乙個簡單的「貪吃蛇」小遊戲
分享人：鄭漲
頁面結構
簡單的21x21的方塊，頁面結構
id為container的div包含所21個class名為row的div，每個row代表貪吃蛇的一整行，每個row中又包含21個div，代表這一行的每乙個div方格，如果這個方格是空的話，div的類名為blank，如果這乙個方格表示「貪吃蛇」的「食物」，div的類名為food，如果這乙個方格表示「蛇」，div的類名為snake。
js然後我們思考下乙個貪吃蛇遊戲需要那些引數，
首先，介面中可見的元素無非就是空方格，「蛇」還有「食物」，所以需要乙個二維陣列，用來表示每個方格的狀態0表示方格為空，1表示方格為「食物」，2表示方格為「蛇」，然後是乙個陣列，存放「蛇」在方格中所佔位子的座標，再然後是乙個存放「食物座標」，由於需要確定「蛇」移動的方向，所以需要個存放方向的變數，還需要乙個定時器，控制蛇每秒鐘的移動，最後是需要統計使用者的得分，所以有
我們需要建立遊戲介面，所以在game中新增函式createdom，根據我們上文所說的頁面結構，我們有
有了createdom之後，在game初始化的時候呼叫，初始化函式名為init
所以有
首先呼叫上文的createdom方法生成頁面
然後初始化data，data為乙個長度21的二維陣列，二維陣列的每乙個子元素又是乙個陣列，陣列中的每個元素值都為0，
然後初始化蛇的座標，這裡預設為方格的9,10,11行的第10列，
然後是遍歷snake陣列，講snake陣列中每個元素表示的data中的位置的值改為2，即在data中表示蛇的位置，
接著需要生成食物的座標，由於之後還要多次生成食物座標，所以寫了乙個create_food方法，方便之後呼叫，
蛇的初始移動方向預設為「上」，
如果是使用者第二次開始，先清除上一次遊戲設定的定時器
初始化玩家得分為0
呼叫key_action方法，設定鍵盤事件，控制蛇的移動方向
然後是呼叫display方法，重新整理遊戲頁面
create_food方法
先隨機生成乙個x，y的座標，由於「食物」的生成位置只能在空位置，即data中值為0的位置，所以如果data[x][y]的值不為0的話，一直重新生成，直到生成的位置為空，將生成位置對應data中的值改為1，
key_action方法
讀取鍵盤事件，並根據情況設定「貪吃蛇」的移動方向，
display方法
遍歷data二維陣列，陣列中的值0，1，2對應空，「食物」，「蛇」，講頁面中所對應的標籤的類名分別改寫為「blank」，「food」，「snake」，
最為關鍵的是需要讓蛇能動起來，我們寫了乙個snake_move方法，
思考一波，比如說snake現在的元素有[,,]，當前的direction的值是「up」向上移動，所以下乙個狀態的snake的元素應該是[,,],也就是說，原來的snake將最後乙個元素捨棄，然後根據direction的值，計算出乙個新的座標，並snake陣列的頭部加入
所以有
last變數存放原來snake陣列的最後乙個元素，obj存放下乙個時刻的snake頭部的元素
如果direction的值為「up」那麼下乙個時刻snake頭部元素，應該為原來的snake首個元素snake[0]的x值減1，snake[0]的y值不變，
direction為其他值的時候類推
但這樣還不夠，貪吃蛇存在碰到「牆壁」或者碰到「蛇」自己身體的情況，
還是拿direction的值為「up」模擬，當原snake[0]的x值為0的時候，即已經到達了遊戲框的頂部，如果繼續向上移動，那麼下乙個x值應該為-1，顯然是不合理的，所以有
還有「蛇」撞到自己身體的情況，上面說到obj存放的是下乙個時刻snake頭部的座標，如果在data陣列中所對應位置的值為2即「蛇」的身體，表示「蛇」撞到了自己的身體
所以有上面說到obj存放的是下乙個時刻snake頭部的座標,但是實際上snake這個陣列並沒有被重新賦值，所以我們還需要乙個add_snake方法，每次陣列變化的時候更新snake陣列
並在snake_move中呼叫，呼叫後結果改變了snake陣列變味了下乙個狀態，但是這個時候data陣列所表示的原來的snake陣列的最後乙個元素，應該為空（蛇移動之後，尾部重新變為空）所以我們將之前儲存下來的原snake的最後乙個元素在data中對應的值變為0,
最後重新遍歷新生成的snake陣列，講snake陣列在data陣列所對應的位置的值設為2
完整的snake_move方法
最後需要乙個start方法，設定乙個定時器，不斷呼叫snake_move方法讓蛇移動
在init的末尾呼叫start方法，大功告成
最後game.init();初始化遊戲，試玩下
簡單的貪吃蛇小遊戲
食物的建立 蛇頭吃食物 遊戲結束 原始碼乙個基於原生js可由鍵盤上下左右控制的貪吃蛇遊戲，主要開發思路分為以下幾個部分 基本的html頁面 地圖區域，開始按鈕，計分板 地圖網格的建立 這裡為方便修改，用js建立可控大小的網格 蛇頭的建立 蛇的移動 食物的建立，隨機刷位置 排除刷在蛇身上的情況 蛇頭和...
貪吃蛇小遊戲
1 doctype html 2 html 3 head 4 title snake title 5head 6 body style text align center margih 100px background color aaaaaa 7 canvas id canv width 400 ...
canvas寫乙個貪吃蛇小遊戲
截圖 開始 js snake.js function snake canvas this.ctx canvas.getcontext 2d this.state score 0,分數 this.getpoint this.init this.state.startx,this.state.start...