HTML5怎么制作網(wǎng)頁游戲

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

　?。ㄒ唬┯螒蛞?guī)則：

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

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

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

　?。ǘ?、游戲玩法

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

　　游戲動畫演示：

　　設(shè)計思路：

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

　　對石頭對象添加inputstart 、inputend事件監(jiān)聽。實現(xiàn)點擊輸入和拖動輸入。當有有效輸入時，交換對應(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ù)組中的下標。

　　posY Number 生成石頭的Y軸坐標，因為要實現(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)過本文的學習后，相信大家對HTML5怎么制作網(wǎng)頁游戲這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！