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

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

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

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

0引言

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

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

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

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

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

2游戲界面布局

2.1 div的添加及排列

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

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

var div=$（".Mydiv"）;

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

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

將已經(jīng)在網(wǎng)頁上的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號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來實(shí)現(xiàn)，也可用簡單的JavaScript代碼來實(shí)現(xiàn)。游戲中用JavaScript代碼來改變圖片src屬性值來實(shí)現(xiàn)擲骰子功能，如下代碼所示。

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

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

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

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

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

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

因此還需要建立LevInx來存放新的位置，代碼如下。先用第一行代碼把上一步游戲小卡通人圖還原成原始路程圖，然后確定新的位置，最后在新的位置放置游戲小卡通人圖的同時(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)走過了，游戲輸了并點(diǎn)擊“擲骰子”按鈕時(shí)，不會再擲骰子，m=0;

當(dāng)k==LevInx.length時(shí)，小卡通人成功到達(dá)終點(diǎn)，并把終點(diǎn)處的圖改成心形，如圖4所示。此時(shí)點(diǎn)擊“擲骰子”按鈕時(shí)，不會再擲骰子，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游戲拓展

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

4結(jié)語

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

參考文獻(xiàn)

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

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

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

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

收稿日期：2020-08-25

作者簡介：阿依佳肯·阿曼太（1987—），女，柯爾克孜族，新疆烏恰縣人，碩士，講師，研究方向：嵌入式、前端開發(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