如何用HTML5制作貪吃蛇游戲？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

本文介紹了H5 canvas實現貪吃蛇小游戲，分享給大家，具體如下：

實現效果如下

實現思路：

ps：這個只是思路，詳細可看代碼注釋

一、先把蛇畫出來

1. 定義一下蛇的結構，用一個數組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。

2. 畫蛇（初始狀態）

二、蛇能動（重點）

1. 蛇移動方式：自始至終都只有蛇頭在動

1. 畫一個灰色的方塊，位置與蛇頭重疊

2. 將這個方塊插到數組中蛇頭后面一個的位置arrar.splice(0,1,rect)

3. 砍去末尾的方塊array.pop()

4. 將蛇頭向設定方向移動一格

2. 需要一個保存方向的變量(direction)

3. 根據方向進行移動，一次移動一個格

4. 根據按鍵改方向

三、隨機投放食物

1. 需要隨機食物的位置

2. 需要判斷食物在不在蛇身上。

四、吃食物

1. 判斷食物是否與蛇頭重疊

2. 數組加一個元素（少刪除一個元素就是加一個元素）

3. 生成新的食物

五、gameover

1. 撞墻判定

2. 裝自己判定

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯成都網站設計公司行業資訊頻道，感謝您對創新互聯成都網站設計公司的支持。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。