150
0 引言
网页游戏的开发途径有很多种，其中HTML5的使用最为广泛[1]。无论对开发者来说还是对用户来说，基于HTML5的网页游戏带来了很多的便利。对开发者而言,HTML5提供了强大又免费的相关技术[1]。而用户只需有浏览器就可以玩网页游戏，不需要安装、不需要插件并且安全性比较高[2-3]。
本文基于HTML5技术，使用JavaScript和JQuery代码设计并实现了简单的骰子游戏——小卡通人回家游戏。
1 游戏规则及功能
游戏实现的是游戏中的小卡通人回家的过程(起点到终点的路程如下表1所示)，玩家掷骰子来决定走几步：当小卡通人走到终点的时候玩家会赢并在网页上提示“到家了”，游戏结束；当小卡通人走过了终点，网页会提示“输
了”，游戏结束；当小卡通人走到“+3”或“-2”是继续往前走3步或往后退2步。
这时游戏中会有4种画面：小卡通人在起点时游戏还未开始；小卡通人在起点和终点之间时游戏还在继续；终点的图片变成心形时小卡通人已到家；游戏界面没有小卡通人并终点图片没有改变时小卡通人已经过了终点。
2 游戏界面布局
2.1 div的添加及排列
游戏界面布局用了表1所示的路程，若每一个单元格用div来实现，那需要10行10列的100个div区块。此游戏中的部分内容是通过HTML来定义的，用CSS来设计了外观，剩余的内容及布局是通过JQuery来完成的[4],HTML部分如下代码所示。
<div id="" class="Myclss"><div id="" class="Mydiv">
</d i v > </
div>
上述代码中只有一个游戏所需的div元素，剩下的99个div元素用下列JQuery代码来添加:
var div=$(".Mydiv");for(var i=0;i<99;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":
表1 起点到终点的路程
基于HTML5的简单骰子游戏的设计与实现
阿依佳肯·阿曼太
(喀什大学计算机科学与技术学院，新疆喀什 844008)
摘要：文章用HTML5技术设计并实现了骰子游戏，即游戏中的小卡通人掷骰子来决定步数并移往终点。先分析游戏规则及功能并给出了小卡通人回家的路程表，再根据路程表用CSS和JQuery代码进行了游戏界面布局，最后用JQuery和JavaScript实现了游戏功能。
关键词:HTML5；掷骰子游戏；CSS；JQuery；JavaScript 中图分类号:TP311文献标识码:A
文章编号:1007-9416(2020)10-0150-03
DOI:10.19695/jki12-1369.2020.10.50
设计开发
收稿日期:2020-08-25
作者简介：阿依佳肯·阿曼太(1987—)，女，柯尔克孜族，新疆乌恰县人，硕士，讲师，研究方向：嵌入式、前端开发。
起 +
3 终
-2
终 -2
2020年第 10 期
游戏网页界面设计151
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;var x=Lev[i][j]-1;
if(Lev[i][j]!=0) {switch(LevIn[x]){case "man":
$(this).css("background-image","url(img/man.png)");break;
…}}
3 游戏功能实现
3.1 掷骰子功能
掷骰子功能可以用c a n v a s 来实现，也可用简单的JavaScript代码来实现。游戏中用JavaScript代码来改变图片src属性值来实现掷骰子功能，如下代码所示。
m= Math.floor(Math.random()*6+1);
var ElementById("Myimg");img.src="img/"+m+".png";
骰子界面素材是用其点数来命名的，因此上述代码中的m表示图片名的同时还表示其点数。点击图2中的“掷骰子”按钮时执行上述代码，代码后加入setTimeout计时功能可以看到骰子画面不停地变换，点击“停止”按钮时用clearTimeout停止计时并显示最终画面。
3.2 游戏小卡通人移动功能
用k来记录小卡通人的位置,k=0是初始值，小卡通人在起点。摇骰的结果m加到k，可以得到小卡通人新的位置(k+=3)，然后在该位置的图片改成小卡通人的图片，及LevIn[k]="man"。最后用2.3中的方法重新布局界面，这时游戏界面图如图3所示，只要小卡通人停过的地方都有小卡通人图片。
因此还需要建立LevInx来存放新的位置，代码如下。先用第一行代码把上一步游戏小卡通人图还原成原始路程图，然后确定新的位置，最后在新的位置放置游戏小卡通人图的同时把起始位置上的小卡通人去掉改成相应的图片。
LevInx[k]=LevIn[k];k+=m;
LevInx[k]="man";LevInx[0]="right";
考虑小卡通人的位置时还要考虑k+=m新的位置刚好
是“+3”或“-2”时:
if(LevInx[k]=="forword3") k+=3;
else if(LevInx[k]=="back2") k-=3;
图3 小卡通人移动图1
图2 摇骰界面图
1 游戏界面
阿依佳肯·阿曼太：基于H T M L 5的简单骰子游戏的设计与实现
第 38 卷 数字技术与应用 www.szjsyyy
152
else k=k;3.3 游戏结果
当k> LevInx.length时，小卡通人已经走过了，游戏输了并点击“掷骰子”按钮时，不会再掷骰子,m=0;
当k=LevInx.length时，小卡通人成功到达终点，并把终点处的图改成心形，如图4所示。此时点击“掷骰子”按钮时，不会再掷骰子,m=0；下列代码实现的是
If(Lev[i][j]-1==LevInx.length&&k==LevInx.length)
$(this).css("background-image","url(img/Finish.png)");
当k<LevIn.length，游戏继续：先执行3.1处掷骰子功能，再继续3.2处小卡通人移动功能。
3.4 游戏拓展
通过改Lev和LevIn，即游戏路程和路程详细内容可以设置新的游戏路程。添加更多的游戏机关来把此游戏改成
闯关游戏，如更改Lev和LevIn内容后的游戏小卡通人移动结果如图5所示。
4 结语
HTML5相关技术给网页游戏开发者提供了技术方面的便利，测试游戏也很方便，只要有支持HTML5技术的浏览器都可测试游戏结果。本文利用HTML5、CSS、JavaScript和JQuery设计并实现骰子相关休闲
游戏。游戏界面布局基本上是用JQuery代码来完成的，此部分还可以用div+css或canvas来实现。此游戏的优点是执行容易、操作简单，不足之处是没有记忆功能。
参考文献
[1] 和歆雨.基于HTML5的网页游戏的设计与开发[J].中国战略新兴产业,2018(4):94-95.
[2] 阳晓霞，谭卫.基于HTML5技术的游戏开发与实现[J].信息与电脑(理论版),2019(9):69-71.
[3] 臧金梅.基于HTML5的简单拼图游戏的设计和实现[J].信息技术与信息化, 2017(12):22-24.
[4] 夏敏捷.HTML5网页游戏设计从基础到开发[M].清华大学,2019:
153-169.
Design and Implementation of Simple Dice Game Based on HTML5
Ayjarken Amantai
(College of Computer Science and Technology, Kashi University, Kashi Xinjiang 844008)
Abstract:This paper uses HTML5 technology to design and implement the dice game, that is, the little cartoon man in the game
roll dice to determine the number of steps and move to the end. Firstly, the rules and functions of the game are analyzed, and the journey table of little cartoon man’s home is given. Then, the game interface layout is carried out with CSS and jQuery code according to the journey table. Finally, the game function is realized with jQuery and JavaScript.
Key words:HTML5; dice game; CSS;JQuery; JavaScript
图4 游戏成功界面图
图5 小卡通人移动图2
发表评论