本系列實體教程第二趴，作者僅僅想通過一些實際案例，帶領大家了解編程，編程其實如此簡單，

在學習本教程之前，需要有兩個準備，首先，您需要有一點點的編程基礎，比如什么是變數、條件判斷、回圈等，其次，請先玩一玩貪吃蛇這個游戲，如果沒有玩過，是不太容易理解其中的一些演算法的，

當然，也可以先學習一下第一趴 1小時開發2048，原來游戲如此簡單，

我能給您的保證就是，通過本文，您一定可以自己手動編碼一個貪吃蛇的游戲，如果不行，請在評論區轟炸我~

材料準備

1. 開發環境準備
2. 代碼基礎準備
3. 涉及到的樣式

1. 開發環境準備

首先，您需要先有一臺電腦，如果是手機查看，就算了，，，然后，一個代碼編輯器，可以是記事本，也可以是IDEA，這里推薦使用visual studio code編輯器和chrome瀏覽器，至于visual studio code是啥，請自行百度了，
就是這么簡單，開發環境已經準備好了，

2. 代碼基礎準備

• 完全沒有基礎的同學，可以先看看w3school關于html的教程、CSS的教程、JS的教程，比較不是僅僅寫個hello world，還有需要有一丟丟基礎的，
• 教程中，不是使用的原生js，而是基于Jquery進行的編碼，使用了一些Jquery的語法，請參考：Jquery的教程

3. 涉及到的樣式說明

• width 寬度

• height 高度

• background-color 設定背景顏色

• float 浮動模式

• .content 代表某個標簽下class屬性為content，是一個css選擇器，以下是例子：

<div class="content"></div>

好了，我們開始進入正題，進入編碼環節

正式編碼，一共分為

1. 頁面基礎框架撰寫
2. 樣式撰寫
3. 通過陣列展示
4. 向右移動第一顆
5. 通過方向控制移動
6. 多顆如何移動（第一種方法）
7. 多顆如何移動（第二種方法）
8. 隨機出現食物
9. 吃到食物如何處理
10. 解決隨機出現食物bug
11. 判斷游戲失敗：出邊界
12. 判斷游戲失敗：撞到自己
13. 處理一些其他bug

1. 頁面基礎框架撰寫

詳見上圖，這是一個最基礎的html代碼，分為三塊，頁面、css樣式、js邏輯，請參考圖中的注釋，直接瀏覽器打開本檔案，即可看到效果，（可按F12，調出chrome的控制臺）
再次說明，html基礎標簽和結構，請參考html的教程

2. 樣式撰寫

我們設定整個幕布大小是400px * 400px，每個小塊是10 * 10，每行每列就是40個塊，一共1600個 ，分別定義出蛇身體顏色黑色、蛇頭顏色紅色、食物顏色綠色，整體樣式設定較為交單，具體請參考代碼注釋，重繪運行，查看效果，

3. 通過陣列展示

3.1 思路

多說幾句，關于這個小標題，通過陣列展示，其實具有了編程思維的同學，應該很好理解，但是對于沒有基礎的同學，就有點難了，先看這張圖：

游戲中貪吃蛇，就是一條蜿蜒的小蛇，沿著自己走過的路，一步一步往前挪動，我們理解其位在一個二維陣列中，連續的一系列方格代表蛇，感覺自己沒說清楚，但是不理解也沒有關系，編程就是，編著編著就會了，先往下看，

3.2 老實孩子的寫法

之前通過樣式，我們已經清楚了，我們一共是一個40*40，一共1600個格子的二維陣列，先來直觀的感受下，有多少，

每一行40個0，一共40行，代碼冗余了，反正我是看不下去，所以簡化它，

3.3 通過回圈來初始化

這里我們先定義了一個總的gameArr變數，用于存放所有塊，是一個二維陣列，Array(40)代表生成了一個40位長度的陣列，然后，我們遍歷這個資料，目前這個陣列還是一維的，里面所有元素都是null，所以，我們遍歷后，給每個遍歷值gameArr[i]又賦值Array(40)，然后再次遍歷，通過雙層遍歷，設定gameArr[i][j]等于0，就這樣，完成了陣列的初始化，請看下圖代碼，

3.4 陣列通過畫布來呈現

我們通過陣列，在畫布上將1600個div呈現出來，雙層回圈遍歷，仔細看代碼即可，通過瀏覽器，將滑鼠移動到對應的代碼上，就可以看到頁面上對應的div呈現出來，

現在，我們僅僅呈現了空白，那么其他值，我們也需要讓其呈現出來，

0代表沒有任何東西
1代表蛇的身子
2代表蛇頭
9代表食物
這些數值的含義，都是我們自己定義的而已，可以改為其他的，

通過判斷gameArr[i][j]的值，拼接不同的div，設定是設定好了，但是看不到效果呢，不著急，我們設定一些示例代碼即可，請看代碼：

然后我們分別設定幾個位置為1、2、9，重繪頁面，即可看到內容呈現出來了，

4. 向右移動第一顆

4.1 重新初始化一下代碼

好了，準備作業都做好了，現在開始有意思的了，首先我們僅設定1個蛇塊，其余的去掉，

首先，我們定義了一個snakeItem作為蛇身，初始化位置為第11行，第11列（js陣列下標是從0開始的），然后將對應的gameArr的值，設定為1，snakeItem主要是用于表示蛇的坐標，用于計算，而gameArr是用于最終展示畫圖的，所以需要根據snakeItem修改gameArr對應的值，重繪頁面后結果，請參考圖片，

4.2 添加定時任務

好了，現在，我們需要讓其動起來了，這里就不將原理了，設計異步、并行等概念，畢竟我們是實際編程例子，不講基礎（其實是我也說不清，，，）

涉及到JavaScript的定時執行方法，setInterval，該方法涉及兩個引數，第一個引數是需要執行的方法，第二個引數是多久執行一次，單位是毫秒，請參考下面的代碼

以上代碼，會不停的在控制臺列印出日志，

4.3 讓小方塊動起來

關鍵的來了，如何讓小方塊動起來呢，向右移動，其實就是snakeItem的列坐標有之前的10，變為11，定時任務中，就是不停的+1，剛剛說了snakeItem是用于計算的，修改了snakeItem后，還要更新gameArr，然后執行drawGame，才能重繪游戲幕布，執行效果如下：

呀，奇怪，動是動起來了，但是變長了，而不是往右移動，

原因是第11列，之前是1，現在12列變為1后，11列還是原來的值1，所以需要重新設定一下，所以在看代碼

這里的思路是：先清除畫布，然后變到下一個坐標，然后在按新坐標畫上去，仔細看代碼注釋，您就能理解了，

好了，我們的第一個塊，終于動起來了，建議設定定時任務的值不要太小，否則你的瀏覽器會卡死，電腦風扇會狂響，，，不要問我為什么知道的，

5. 通過方向控制移動

上面的代碼，我們已經讓方塊動起來了，但是固定往右的，所以，我們需要加一個變數來代表方向，然后通過監聽鍵盤事件，控制變數，而定時任務根據方向變數，來確定下一個出現的塊的位置，請看代碼：

5.1添加方向變數

方向變數的值，是可以任意定義的，我這里是用的鍵盤事件中，上下左右方向鍵所代表的值，方便對應而已，你也可以用1，2，3，4來代表，對應處理的地方，判斷處理即可，

5.2 添加鍵盤監聽方法

這里定義了一個方法，里面添加了jQuery的鍵盤監聽事件，我們僅處理上下左右鍵，所有，判斷等于37、38、39、40的值進行賦值即可，

僅添加方法是不行的，沒有地方觸發呼叫，所以我們在啟動進入方法里面，呼叫addListener

5.3 通過方向變數控制走向

先看下之前的代碼

gameArr[snakeItem[0]][snakeItem[1]] = 0 // 先將snakeItem位置置為0
snakeItem[1] += 1 // 再向右移動，其實就是列坐標加1，
gameArr[snakeItem[0]][snakeItem[1]] = 1 // 最后設定新的位置為1

第一句和第三句，都是固定的，不需要變化，只有第二句，在方向改變的時候，需要調整，所以，看下面的代碼：

通過switch陳述句，判斷方向變數moveDirection的值，然后做出回應，具體請看代碼注釋，

好了，大家可以重繪頁面，然后體驗一下根據方向鍵，小方塊移動了，如果速度比較慢，可以將定時任務的間隔值，調低一些，但是不建議小于100，否則會卡的，

6. 多顆如何移動（第一種方法）

我們先來說第一種移動的思路，每一塊，按順序往前移動，前是哪里，主要看方向變數，

我們先定義連續的三個塊，代表蛇的身體，

然后修改初始化方法，之前我們只畫了一個點，現在我們畫3個點，

最后，我們來處理移動，先看我第一步這樣寫，

先理解這里，我們默認的是往右，所以我們先改39這個分支，
那么向右移動，按之前的思路先清除原先位置，然后所有塊向前走，最后再將新的塊畫上去，先看下效果，向右沒問題，那我們先按這樣的方式，將上下所有都填好，

向左、向右，挺好，但是向上向下，不對了，整體移動，

我們這樣寫是有問題的，其實思路上，不應該世界按方向加，而是只有第一個頭，按方向加，其余的應該往前覆寫，
將snakeItem1的坐標給snakeItem2
將snakeItem2的坐標給snakeItem3
將snakeItem3的坐標清空
然后snakeItem1設定為下一個坐標

看代碼：

仔細理解下代碼，思考，為什么先2賦值給3，再1賦值給2，
而不是我們上面說的，先1賦值給2，再2賦值給3，應該比較好理解的，可以自己調下順序，

這里再說下，不能直接snakeItem3 = snakeItem2，這樣是參考賦值了，最后三個都指向一個變數了，大家也可以調下代碼試試，

好了，現在第一個思路基本將清楚了，解決最后一個問題，這是三個，如何變成多個呢，這里就不能固定寫snakeItem1，snakeItem2，snakeItem3了，要用陣列來表示，看下面的代碼：

首先修改為陣列：

然后，初始化幾個蛇身子坐標

修改移動里面方法的處理，也改為陣列的方式

其實代碼里面的注釋已經很清晰了，請多多理解，注意里面第二塊，迭代，要從倒數第二個開始后移，多多思考思考，

刷洗下頁面，看看效果吧，

也可以自己改改蛇的長度，這個陣列及后續的演算法，就可以支持任意長度了，

第一個演算法介紹完畢，建議多寫幾遍，熟練貫通，

7. 多顆如何移動（第二種方法）

第一種方法，是所有的塊都在往前移動，第二種方式，我們換個思路：
首先有三個塊，位置是1，2，3，現在要變為，2，3，4，看前來是不是第一個思路的，2->1，3->2，4是下一個，4->3，

但是，我們觀察，首先所有的塊都是小黑塊，1，2，3在頁面上除了位置，其他都一樣，那我們換一個思路，將1位置洗掉掉，陣列變成了2，3，再在最前面添加一個4，是不是就行了呢，說起來不是特別清楚，我們直接上代碼吧：（以后重新撰寫的時候，應該會上一些圖來幫助理解）

第一，即以當前蛇的第一塊為主，根據方向，生成下一個塊，
第二，將新生成的下一個塊，添加到蛇陣列的最前面，作為蛇頭，
第三，將蛇陣列的最后一塊去掉，記得清空游戲幕布的值，

好了，第二個方法完成，第二種方法，移動量比較少，只涉及到新增的下一個塊和最后一個塊，這樣蛇不管有多長，計算量都是固定的，而第一種方法，每一個塊都要移動，新多看幾遍，琢磨琢磨，

這里我們的蛇頭都沒有寫，修改下代碼，看看效果：

第一步修改下初始化位置的代碼

其次修改新增的蛇頭的代碼，要注意，新增的蛇頭設定為2，之前老的蛇頭要設定為1喲，要不蛇頭越來越長，你可以試試看看，

8. 隨機出現食物

開始寫食物了，隨機，Math.random()會生成一個0到1之間的一個隨機浮點小數，

先添加一個全域的食物坐標存盤的變數，一個陣列，用于表示食物在幕布上的位置，

然后隨機生成兩個0到39的整數，賦值給foodItem，設定上幕布在該坐標的值為9，下面判斷了，9的值的位置，會顯示綠色，

好了現在加好方法了，在哪里觸發呢？

1，在初始化后，就觸發一次
2，在吃到這個食物的時候觸發

我們先來在初始化的位置，呼叫該方法：

重繪頁面后，已經可以看到了，現在你可以控制方向，將蛇引導過去，但是碰得到卻吃不掉，

9. 吃到食物如何處理

這里，我們僅基于第二種移動演算法來進行處理喲，為什么呢？因為我把第一種演算法的代碼刪掉了，，，所以，第一種演算法的同學，自己寫吧，

還是一樣，先說下思路，如何判斷吃到食物：
第一：就是蛇身新增的下一個塊，如果坐標和食物重合，其實就是吃到了食物，
第二：然后貪吃蛇會怎么樣呀，對了，對變長，其實就是長度+1，換句話說，就是不需要丟掉尾巴，
第三：最后，重新隨機食物，
話不多說，看代碼 ：

注釋寫得很清楚拉，重繪后，可以試試玩玩啦，我們貪吃蛇已經初具樣子了，

10. 解決隨機出現食物bug

是什么bug呢，其實就是隨機的時候，有可能隨機到蛇身體上，這樣就不對了，做下判斷處理即可，看代碼：

11. 判斷游戲失敗：出邊界

游戲已經可以玩了，但是跑到邊框，就報錯，這樣不對，我們要判斷游戲結束：出邊界，如何判斷呢，其實就是新生成的蛇頭，坐標超出了邊看范圍，即行坐標大于39，小于0，列坐標大于39，小于0，都是出界了，所以，看代碼：

注意，這段代碼的位置，在新坐標出來后，就直接可以判斷了，

12. 判斷游戲失敗：撞到自己

一樣的道理，新生成的塊，同自己所有的塊進行下比較，看代碼：

13. 處理一些其他bug

第一個bug

現在失敗后，你試試點擊彈出框的確定按鈕，發現會一直彈框，是因為我們的這個定時任務會一直不停的繼續請求，我們需要加一個變數來控制游戲結束，結束后就不要再觸發了，

查看上面三塊代碼，看看注釋，主要注意最后不要缺少一個“}”符號，代碼比較長，就沒有一起截圖了，

好了現在再試試，結束后，就不會一直彈出來了，

第二個bug

現在正在向右移動的貪吃蛇，可以直接向左回傳，而且會直接死掉，，，所以我們要限制一下，向右走的，不能向左走，只能上下，其他方向依次類推，看代碼注釋吧：

好了，到這里為止，我們的整個基礎版的貪吃蛇就開發好了，可以自己玩一玩，畢竟是自己的開發成果呢，小有成就感是吧，

這是一個基礎版的貪吃蛇，大家可以自己完后完善，包括積分、時間、速度快慢、游戲模式：多個食物、穿墻、障礙等等，以后我會更新高級版本的實體教程，敬請期待~~

謝謝大家耐心看完本教程，如果覺得還不錯，請點個贊，幫忙轉發一下，謝謝~~

歡迎各位留言~~原創不易，也請大家多多轉發，將這么好的教程讓更多人看到，后續將推出更多其他詳細案例講解，