基于HTML5的简单骰子游戏的设计与实现.docxVIP

?

?

基于HTML5的简单骰子游戏的设计与实现

?

?

摘要：文章用HTML5技术设计并实现了骰子游戏，即游戏中的小卡通人掷骰子来决定步数并移往终点。先分析游戏规则及功能并给出了小卡通人回家的路程表，再根据路程表用CSS和JQuery代码进行了游戏界面布局，最后用JQuery和JavaScript实现了游戏功能。

关键词：HTML5;掷骰子游戏;CSS;JQuery;JavaScript

中图分类号：TP311???文献标识码：A??文章编号：1007-9416（2020）10-0000-00

0引言

网页游戏的开发途径有很多种，其中HTML5的使用最为广泛[1]。无论对开发者来说还是对用户来说，基于HTML5的网页游戏带来了很多的便利。对开发者而言，HTML5提供了强大又免费的相关技术[1]。而用户只需有浏览器就可以玩网页游戏，不需要安装、不需要插件并且安全性比较高[2，3]。

本文基于HTML5技术，使用JavaScript和JQuery代码设计并实现了简单的骰子游戏——小卡通人回家游戏。

1游戏规则及功能

游戏实现的是游戏中的小卡通人回家的过程（起点到终点的路程如下表1所示），玩家擲骰子来决定走几步：当小卡通人走到终点的时候玩家会赢并在网页上提示“到家了”，游戏结束;当小卡通人走过了终点，网页会提示“输了”，游戏结束;当小卡通人走到“+3”或“-2”是继续往前走3步或往后退2步。

这时游戏中会有4种画面：小卡通人在起点时游戏还未开始;小卡通人在起点和终点之间时游戏还在继续;终点的图片变成心形时小卡通人已到家;游戏界面没有小卡通人并终点图片没有改变时小卡通人已经过了终点。

2游戏界面布局

2.1div的添加及排列

游戏界面布局用了表1所示的路程，若每一个单元格用div来实现，那需要10行10列的100个div区块。此游戏中的部分内容是通过HTML来定义的，用CSS来设计了外观，剩余的内容及布局是通过JQuery来完成的[4]，HTML部分如下代码所示。

上述代码中只有一个游戏所需的div元素，剩下的99个div元素用下列JQuery代码来添加：

vardiv=$（.Mydiv）;

for（vari=0;i99;i++）

{div.clone（）.appendTo（$（.Myclss））;}

将已经在网页上的100个div区块排列成10行10列（需要在CSS上把.Mydiv的position属性设为absolute，高度和宽度为50px）：

$（.Mydiv）.each（function（index）{

$（this）.css（{left：50*（index%10）+px，top：50*Math.floor（index/10）+px}）;}）;

2.2游戏界面布局

Lev=[[0，0，0，0，0，0，0，0，0，0]，[0，0，0，0，0，0，0，0，0，0]，[0，1，2，3，4，5，6，7，8，0]，[0，0，0，0，0，0，0，0，9，0]，[0，0，0，0，0，0，0，0，10，0]，[0，22，23，24，0，0，0，0，11，0]，[0，21，0，0，0，0，0，0，12，0]，[0，20，19，18，17，16，15，14，13，0]，[0，0，0，0，0，0，0，0，0，0]，[0，0，0，0，0，0，0，0，0，0]];

LevIn=[man，right，right，right，right，forword3，right，right，buttom，buttom，buttom，back2，left，left，left，back2，left，left，left，top，top，right，right，Home];

Lev表示游戏路程地图，LevIn表示Lev所指定路程的详细内容。Lev[i][j]的值为0时该div不是路程区块，Lev[i][j]的值非0时该div属于游戏路程。Lev[i][j]的值1～24表示路程区块div的排列顺序，LevIn的值（按照div的顺序排列）设置1～24号div的背景图片。最终游戏界面如图1所示。

i=Math.floor（index/10）;j=index%10;

varx=Lev[i][j]-1;

if（Lev[i][j]！=0）{switch（LevIn[x]）

{caseman：

$（this）.css（background-image，url（img/man.png））;break;

…}}

3游戏功能实现

3.1掷骰子功能

掷骰子功能可以用canvas来实现，也可用简单的JavaScript代码来实现。游戏中用JavaScript代码来改变图片src属性值来实现掷骰子功能，如下代码所示。

m=Math.floor（Math.ra