這篇文章主要介紹了H5中canvas如何實現(xiàn)貪吃蛇小游戲，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站設計制作、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的山南網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

實現(xiàn)效果如下

實現(xiàn)思路：

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

一、先把蛇畫出來

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

2. 畫蛇（初始狀態(tài)）

二、蛇能動（重點）

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

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

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

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

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

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

3. 根據(jù)方向進行移動，一次移動一個格

4. 根據(jù)按鍵改方向

三、隨機投放食物

1. 需要隨機食物的位置

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

四、吃食物

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

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

3. 生成新的食物

五、gameover

1. 撞墻判定

2. 裝自己判定

感謝你能夠認真閱讀完這篇文章，希望小編分享H5中canvas如何實現(xiàn)貪吃蛇小游戲內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設計公司，關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)成都網(wǎng)站設計公司，詳細的解決方法等著你來學習!

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

當前文章：H5中canvas如何實現(xiàn)貪吃蛇小游戲-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/csheco.html