基于HTML5的簡(jiǎn)單骰子游戲的設(shè)計(jì)與實(shí)現(xiàn)

摘要：文章用HTML5技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了骰子游戲，即游戲中的小卡通人擲骰子來(lái)決定步數(shù)并移往終點(diǎn)。先分析游戲規(guī)則及功能并給出了小卡通人回家的路程表，再根據(jù)路程表用CSS和JQuery代碼進(jìn)行了游戲界面布局，最后用JQuery和JavaScript實(shí)現(xiàn)了游戲功能。

關(guān)鍵詞：HTML5;擲骰子游戲;CSS;JQuery;JavaScript

中圖分類號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：A? ? 文章編號(hào)：1007-9416（2020）10-0000-00

0引言

網(wǎng)頁(yè)游戲的開(kāi)發(fā)途徑有很多種，其中HTML5的使用最為廣泛[1]。無(wú)論對(duì)開(kāi)發(fā)者來(lái)說(shuō)還是對(duì)用戶來(lái)說(shuō)，基于HTML5的網(wǎng)頁(yè)游戲帶來(lái)了很多的便利。對(duì)開(kāi)發(fā)者而言，HTML5提供了強(qiáng)大又免費(fèi)的相關(guān)技術(shù)[1]。而用戶只需有瀏覽器就可以玩網(wǎng)頁(yè)游戲，不需要安裝、不需要插件并且安全性比較高[2，3]。

本文基于HTML5技術(shù)，使用 JavaScript和JQuery代碼設(shè)計(jì)并實(shí)現(xiàn)了簡(jiǎn)單的骰子游戲——小卡通人回家游戲。

1游戲規(guī)則及功能

游戲?qū)崿F(xiàn)的是游戲中的小卡通人回家的過(guò)程（起點(diǎn)到終點(diǎn)的路程如下表1所示），玩家擲骰子來(lái)決定走幾步：當(dāng)小卡通人走到終點(diǎn)的時(shí)候玩家會(huì)贏并在網(wǎng)頁(yè)上提示“到家了”，游戲結(jié)束;當(dāng)小卡通人走過(guò)了終點(diǎn)，網(wǎng)頁(yè)會(huì)提示“輸了”，游戲結(jié)束;當(dāng)小卡通人走到 “+3”或“-2”是繼續(xù)往前走3步或往后退2步。

這時(shí)游戲中會(huì)有4種畫(huà)面：小卡通人在起點(diǎn)時(shí)游戲還未開(kāi)始;小卡通人在起點(diǎn)和終點(diǎn)之間時(shí)游戲還在繼續(xù);終點(diǎn)的圖片變成心形時(shí)小卡通人已到家;游戲界面沒(méi)有小卡通人并終點(diǎn)圖片沒(méi)有改變時(shí)小卡通人已經(jīng)過(guò)了終點(diǎn)。

2游戲界面布局

2.1 div的添加及排列

游戲界面布局用了表1所示的路程，若每一個(gè)單元格用div來(lái)實(shí)現(xiàn)，那需要10行10列的100個(gè)div區(qū)塊。此游戲中的部分內(nèi)容是通過(guò)HTML來(lái)定義的，用CSS來(lái)設(shè)計(jì)了外觀，剩余的內(nèi)容及布局是通過(guò)JQuery來(lái)完成的[4]，HTML部分如下代碼所示。

上述代碼中只有一個(gè)游戲所需的div元素，剩下的99個(gè)div元素用下列JQuery代碼來(lái)添加：

var div=$（".Mydiv"）;

for（var i=0;i<99;i++）

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

將已經(jīng)在網(wǎng)頁(yè)上的100個(gè)div區(qū)塊排列成10行10列（需要在CSS上把".Mydiv"的position屬性設(shè)為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所指定路程的詳細(xì)內(nèi)容。Lev[i][j]的值為0時(shí)該div不是路程區(qū)塊，Lev[i][j]的值非0時(shí)該div屬于游戲路程。Lev[i][j]的值1～24表示路程區(qū)塊div的排列順序，LevIn的值（按照div的順序排列）設(shè)置1～24號(hào)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游戲功能實(shí)現(xiàn)

3.1 擲骰子功能

擲骰子功能可以用canvas來(lái)實(shí)現(xiàn)，也可用簡(jiǎn)單的JavaScript代碼來(lái)實(shí)現(xiàn)。游戲中用JavaScript代碼來(lái)改變圖片src屬性值來(lái)實(shí)現(xiàn)擲骰子功能，如下代碼所示。

m= Math.floor（Math.random（）*6+1）;

var img=document.getElementById（"Myimg"）;

img.src="img/"+m+".png";

骰子界面素材是用其點(diǎn)數(shù)來(lái)命名的，因此上述代碼中的m表示圖片名的同時(shí)還表示其點(diǎn)數(shù)。點(diǎn)擊圖2中的“擲骰子”按鈕時(shí)執(zhí)行上述代碼，代碼后加入setTimeout計(jì)時(shí)功能可以看到骰子畫(huà)面不停地變換，點(diǎn)擊“停止”按鈕時(shí)用clearTimeout停止計(jì)時(shí)并顯示最終畫(huà)面。

3.2游戲小卡通人移動(dòng)功能

用k來(lái)記錄小卡通人的位置，k=0是初始值，小卡通人在起點(diǎn)。搖骰的結(jié)果m加到k，可以得到小卡通人新的位置（k+=3），然后在該位置的圖片改成小卡通人的圖片，及LevIn[k]="man"。最后用2.3中的方法重新布局界面，這時(shí)游戲界面圖如圖3所示，只要小卡通人停過(guò)的地方都有小卡通人圖片。

因此還需要建立LevInx來(lái)存放新的位置，代碼如下。先用第一行代碼把上一步游戲小卡通人圖還原成原始路程圖，然后確定新的位置，最后在新的位置放置游戲小卡通人圖的同時(shí)把起始位置上的小卡通人去掉改成相應(yīng)的圖片。

LevInx[k]=LevIn[k];

k+=m;

LevInx[k]="man";

LevInx[0]="right";

考慮小卡通人的位置時(shí)還要考慮k+=m新的位置剛好是“+3”或“-2”時(shí)：

if（LevInx[k]=="forword3"） k+=3;

else if（LevInx[k]=="back2"） k-=3;

else k=k;

3.3游戲結(jié)果

當(dāng)k> LevInx.length時(shí)，小卡通人已經(jīng)走過(guò)了，游戲輸了并點(diǎn)擊“擲骰子”按鈕時(shí)，不會(huì)再擲骰子，m=0;

當(dāng)k==LevInx.length時(shí)，小卡通人成功到達(dá)終點(diǎn)，并把終點(diǎn)處的圖改成心形，如圖4所示。此時(shí)點(diǎn)擊“擲骰子”按鈕時(shí)，不會(huì)再擲骰子，m=0;下列代碼實(shí)現(xiàn)的是

If（Lev[i][j]-1==LevInx.length&&k==LevInx.length）

$（this）.css（"background-image"，"url（img/Finish.png）"）;

當(dāng)k

3.4游戲拓展

通過(guò)改Lev和LevIn，即游戲路程和路程詳細(xì)內(nèi)容可以設(shè)置新的游戲路程。添加更多的游戲機(jī)關(guān)來(lái)把此游戲改成闖關(guān)游戲，如更改Lev和LevIn內(nèi)容后的游戲小卡通人移動(dòng)結(jié)果如圖5所示。

4結(jié)語(yǔ)

HTML5相關(guān)技術(shù)給網(wǎng)頁(yè)游戲開(kāi)發(fā)者提供了技術(shù)方面的便利，測(cè)試游戲也很方便，只要有支持HTML5技術(shù)的瀏覽器都可測(cè)試游戲結(jié)果。本文利用HTML5、CSS、JavaScript和JQuery設(shè)計(jì)并實(shí)現(xiàn)骰子相關(guān)休閑游戲。游戲界面布局基本上是用JQuery代碼來(lái)完成的，此部分還可以用div+css或canvas來(lái)實(shí)現(xiàn)。此游戲的優(yōu)點(diǎn)是執(zhí)行容易、操作簡(jiǎn)單，不足之處是沒(méi)有記憶功能。

參考文獻(xiàn)

[1]和歆雨.基于HTML5的網(wǎng)頁(yè)游戲的設(shè)計(jì)與開(kāi)發(fā)[J].中國(guó)戰(zhàn)略新興產(chǎn)業(yè)，2018（4）：94-95.

[2]陽(yáng)曉霞，譚衛(wèi).基于HTML5技術(shù)的游戲開(kāi)發(fā)與實(shí)現(xiàn)[J].信息與電腦（理論版），2019（9）：69-71.

[3]臧金梅.基于HTML5的簡(jiǎn)單拼圖游戲的設(shè)計(jì)和實(shí)現(xiàn)[J].信息技術(shù)與信息化， 2017（12）：22-24.

[4]夏敏捷.HTML5網(wǎng)頁(yè)游戲設(shè)計(jì)從基礎(chǔ)到開(kāi)發(fā)[M].清華大學(xué)，2019：153-169.

收稿日期：2020-08-25

作者簡(jiǎn)介：阿依佳肯·阿曼太（1987—），女，柯?tīng)柨俗巫澹陆疄跚】h人，碩士，講師，研究方向：嵌入式、前端開(kāi)發(fā)。

Design and Implementation of Simple Dice Game Based on HTML5

Ayjarken Amantai[A1]

（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 mans 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.

Keywords：HTML5; dice game; CSS;JQuery; JavaScript