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

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部分如下代码所示。

</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

本文发布于:2024-09-22 04:29:39，感谢您对本站的认可！

标签：游戏代码技术网页实现设计界面掷骰子

留言与评论（共有 0 条评论）