基於Jquery簡單實現貪吃蛇遊戲——開發思路分析
前言
剛開始是學習前端那會，在熟悉 HTML+CSS+JS 後，我開始嘗試去做貪吃蛇遊戲。沒想到在一頓瞎搞後還真搞出來了一個簡陋版的貪吃蛇。哈哈！因為這是我剛開始學習前端的時候做的，所以程式碼有點簡陋，甚至可能存在不合理的地方。大家看的時候須得留心。
實現思路概述
本專案實現思路是非常簡單的。即在地圖（也就是貪吃蛇可以活動的範圍）上，找到一個點做座標原點，然後將地圖劃分成一個座標系。藉助座標系，就可以通過JS來控制HTML元素標籤的移動，來實現貪吃蛇的上下左右的移動。此外，通過判斷座標XY值的是否相等實現碰撞判定。
以上就是，貪吃蛇這個遊戲的基本實現思路了。
要點分析及大致實現思路講解
接下來就是分析貪吃蛇這個遊戲需要實現的要點。
思考模式
在講解要點前，我們首先要確定一個思考模式。即：
所有看似很複雜的事物都是由各個較小的事物進行特定排序的組合而成的。
這個思考模式是非常重要的，是我們解決大多數問題的有效方法。就好比搭積木，通過對積木的有效組合（堆疊），我們就可以搭建出各種各樣形狀出來。所以，要學會將大一個複雜的問題拆解成多個小的問題。如果小的問題還是很複雜，那就再進行拆解。
貪吃蛇的拆解
在拆解前，我們先要找出貪吃蛇遊戲有什麼？
貪吃蛇遊戲大致上有：
- 有一個給貪吃蛇活動的地圖
- 有一條可以活動的貪吃蛇
- 有食物
上面這次查詢就是一次拆解劃分。當然啦！這是最初淺的拆解。接下來就是基於這3個部分進行拆解
基於地圖的拆解
地圖，也就是貪吃蛇活動的區域。
那這個區域具體是什麼呢？因為這個專案是基於HTML+CSS+Javascript 來實現的。自然而然的，我們就想到在頁面中劃分一個區域就應該是一個 div 標籤了。所以，我們只需要在HTML檔案新增一個div標籤就可以完成地圖的基礎構建了。
但是呢！這只是基礎構建。上面我們說到，要將地圖劃分成一個座標系。這又要怎麼做呢？
座標系的建立
想要建立座標系就要明白座標系有什麼。
座標系有：原點、X軸、Y軸
那HTML+CSS+Javascript 有這個三個東西嗎？
有的！CSS裡面有。
CSS 預設設定
position屬性的標籤的左上角是其子元素標籤的參照點。然後藉助top、right、bottom和left可以對子元素標籤進行移動。這樣，原點（左上角）、X軸（
left或right）、Y軸（top或bottom）就出來了。
但在建立座標系時我們還需要注意一點，這個座標系是有邊界的。這時就有一個問題出現了，這個邊界有多寬。
前面我們說到，要基於座標系來進行碰撞處理。而碰撞的判斷標準就是座標有沒有重合。所以，就要保證邊界的寬度一定是要蛇的一節蛇身長寬（注意，一節蛇身是一個正方形）的倍數。實際上就是將div劃分成由許多個等大的小方格。
對貪吃蛇的拆解
蛇本身的拆解
蛇是由一節節蛇頭加蛇身組成的。為了便於實現，我們將蛇頭和每節蛇身拆解成一個個正方形，然後將它們首尾相連組成一條貪吃蛇。
蛇的行走
貪吃蛇的行走有一個特點：後一節蛇身跟著前一節蛇身走，第一節蛇身跟著蛇頭走。
所以，在實現蛇的行走時需要記錄行走前每節蛇身的座標值，然後依次將前一節的蛇身座標賦值給後一節的。
上下左右轉向的實現
因為貪吃蛇行走的特點，所以控制貪吃蛇的轉向只需要控制蛇頭的轉向就行了。至於蛇頭的轉向可以通過監聽鍵盤事件來呼叫相應的轉向函式來實現。
食物的拆解
食物本質上也是div。因為要保證碰撞的生效（也就是蛇能有效吃到食物），所以食物div的大小要跟蛇頭一樣大。
碰撞的拆解
碰撞時貪吃蛇遊戲非常重要的一點。貪吃蛇遊戲所有的遊戲規則都是通過碰撞來實現的。
碰撞的判定
碰撞的判定很簡單，只需要判定蛇頭的座標和碰撞體的座標是否重合進行。為了保證能準確判斷座標是否重合，我們需要保證的蛇的座標生成規則、食物的生成規則已經牆壁（座標系邊界）的生成規則一致。
碰撞體
碰撞有三種，分別是：食物、牆壁和蛇身
結語
以上就是貪吃蛇遊戲的大略分析了。通過一系列的拆解，我們對實現貪吃蛇遊戲有了較為全面的實現思路。基於這些思路，我們就可以搭建出自己的貪吃蛇遊戲了。下一篇，我將結合我的原始碼對實現過程進行講解。