HTML5怎么制作網頁游戲

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

　　（一）游戲規則：

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

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

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

　　（二）、游戲玩法

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

　　游戲動畫演示：

　　設計思路：

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

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

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

　　關鍵點：

　　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）;//監聽inputstart事件

　　instance.addEventListener（ inputend , onClick）;//監聽inputend事件

　　instance.scene.setSegment（ static , 0,0,false）;//靜態segment

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

　　instance.scene.playSegment（ static

　　return instance;

　　};

　　函數參數：

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

　　index Number 要生成的石頭在數組中的下標。

　　posY Number 生成石頭的Y軸坐標，因為要實現新生成的石頭依次落下。

　　生成的石頭添加到數組中

　　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怎么制作網頁游戲”的內容了，經過本文的學習后，相信大家對HTML5怎么制作網頁游戲這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！