這篇文章主要講解了“HTML5怎么制作網(wǎng)頁游戲”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML5怎么制作網(wǎng)頁游戲”吧！

原平網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,原平網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為原平上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的原平做網(wǎng)站的公司定做！

（一）游戲規(guī)則：

1、開始游戲時，手機出現(xiàn)在最上面一行的任意一格；

2、開始游戲時，彩色石頭隨機從上往下落，填滿所有的方框，相同的三個石頭不能相鄰的排在一列或者一行；

3、手機從上移動到最下面一行的任意一格，就算勝利，或游戲時間結(jié)束，消除的石頭數(shù)量超過30個也算勝利。

（二）、游戲玩法

只要三個相同的石頭相鄰的排在一列或者一行，他們就會消失，同時上面的石頭往下落，落到消失的石頭位置上。

游戲動畫演示：

設(shè)計思路：

游戲開始首先生成一個8*8 = 64的石頭陣列，會從上到下一次落下。陣列的石頭會存放到一個數(shù)組中。每個石頭都有相應(yīng)的類型。

對石頭對象添加inputstart 、inputend事件監(jiān)聽。實現(xiàn)點擊輸入和拖動輸入。當(dāng)有有效輸入時，交換對應(yīng)的兩個相鄰的石頭。等待檢測時發(fā)現(xiàn)是否會形成消掉石頭的條件，如果沒有則再交換回來。

游戲開始后，會在每幀都調(diào)用一次runcheck（）函數(shù)來檢測是否有生成消掉石頭的條件。檢測的方式是：先按行遍歷一遍數(shù)組，看有沒有連續(xù)超過三個相鄰石頭的類型是相同的。然后再按列遍歷一遍數(shù)組，看有沒有連續(xù)超過三個相鄰石頭的類型是相同的。如果有，則將相同的石頭消除，并生成新的石頭，并從上到下依次落下。

關(guān)鍵點：

1.生成新的石頭對象：

Game.createStone = function （type,index,posY）

{

var j = Math.floor（index / hang）;

var i = num - hang * j;

var instance = mugeda.createInstanceOfSymbol（ stone  + type）;

scene.appendChild（instance, null）;

instance.left = （kuan * i）;

instance.top = posY;

instance.addEventListener（ inputstart , onStart）;//監(jiān)聽inputstart事件

instance.addEventListener（ inputend , onClick）;//監(jiān)聽inputend事件

instance.scene.setSegment（ static , 0,0,false）;//靜態(tài)segment

instance.scene.setSegment（ run , 1,10,true）;//消失特效的動態(tài)segment

instance.scene.playSegment（ static

return instance;

};

函數(shù)參數(shù)：

type Number 要生成的石頭對象的類型，一共有7種不同的石頭。

index Number 要生成的石頭在數(shù)組中的下標(biāo)。

posY Number 生成石頭的Y軸坐標(biāo)，因為要實現(xiàn)新生成的石頭依次落下。

生成的石頭添加到數(shù)組中

var instance = Game.createStone（type,（j* hang + i），posY）;

stoneArray.push（{obj:instance, type:type,v:v0}）;

2.消除石頭

從舞臺場景中移除石頭對象

scene.removeChild（stoneArray[xiaoArray[x].num].obj）;

stoneArray[xiaoArray[x].num].obj = null;

stoneArray[xiaoArray[x].num].type = 0;

3.生成新的石頭對象

var type = Math.floor（Math.random（） * 100） % 6;

var instance = game.createStone（type,（i - x * hang），posY）;

stoneArray[i - x * hang].type = type;

stoneArray[i - x * hang].obj = instance;

感謝各位的閱讀，以上就是“HTML5怎么制作網(wǎng)頁游戲”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對HTML5怎么制作網(wǎng)頁游戲這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！