建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了H5中canvas如何實現(xiàn)貪吃蛇小游戲，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
10年積累的網(wǎng)站設計、成都網(wǎng)站制作經驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有寶安免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
實現(xiàn)效果如下
實現(xiàn)思路：
ps：這個只是思路，詳細可看代碼注釋
一、先把蛇畫出來
定義一下蛇的結構，用一個數(shù)組保存一堆矩形，包含蛇頭（紅）和蛇身（灰）。
畫蛇（初始狀態(tài)）
二、蛇能動（重點）
蛇移動方式：自始至終都只有蛇頭在動
畫一個灰色的方塊，位置與蛇頭重疊
將這個方塊插到數(shù)組中蛇頭后面一個的位置arrar.splice(0,1,rect)
砍去末尾的方塊array.pop()
將蛇頭向設定方向移動一格
需要一個保存方向的變量(direction)
根據(jù)方向進行移動，一次移動一個格
根據(jù)按鍵改方向
三、隨機投放食物
需要隨機食物的位置
需要判斷食物在不在蛇身上。
四、吃食物
判斷食物是否與蛇頭重疊
數(shù)組加一個元素（少刪除一個元素就是加一個元素）
生成新的食物
五、gameover
撞墻判定
裝自己判定
Document
感謝你能夠認真閱讀完這篇文章，希望小編分享H5中canvas如何實現(xiàn)貪吃蛇小游戲內容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!
網(wǎng)站名稱：H5中canvas如何實現(xiàn)貪吃蛇小游戲
瀏覽路徑：http://fisionsoft.com.cn/article/jpoced.html
