JavaScript貪喫蛇小遊戲——學習JavaScript的面向對象編程
預覽支持移動端和pc端哦。
Github源碼地址：https://github.com/fu-x/snake
遊戲預覽：http://coolxiang.top/snake
編程思想：面向對象
分析
首先對貪喫蛇遊戲進行邏輯分析。
1. 小蛇需要移動，需要一個參數表示移動方向。
2. 小蛇可以喫食物，蛇頭和食物座標相等讓小蛇長度+1。
3. 小蛇不能移動出地圖邊緣。
4. 小蛇的蛇頭不能和身體位置重疊（不能喫到自己的身體）。
5. 食物位置隨機生成。
使用面向對象的思想，就要先找出遊戲中存在哪些對象。這裏的地圖用簡單的div做地圖背景，所以我們可以很快找出有兩個實體對象：蛇和食物。但是，遊戲的開始和結束、小蛇和食物的控制以及規則判定也是需要一個對象，這時候再封裝一個遊戲對象。
我們對每個對象所需要的屬性和方法進一步分析。
蛇：
1. 一塊身體的寬、高、長度、顏色、地圖等屬性。
2. 每一塊身體的位置，用數組存儲。
3. 渲染當前位置的小蛇方法。
4. 移除小蛇上一個位置的方法。
5. 小蛇移動的方法。
6. 因爲蛇的位置是相對於地圖而改變的，所以構造函數應接受一個地圖dom元素。
食物：
1. 寬、高、顏色、地圖等屬性。
2. 構造函數可接收一個obj對象，存儲生成食物的位置。
3. 因爲食物的位置是相對於地圖而改變的，所以構造函數應接受一個地圖dom元素。
4. 重新渲染食物（隨機位置、刪除上一個食物dom）。
遊戲：
1. 當前得分（喫一個食物加一分）、包含一個小蛇屬性、一個食物屬性以及地圖屬性。
2. 渲染生成小蛇和食物方法。
3. 鍵盤或者button事件控制小球移動方法。
4. 小蛇死後重新渲染位置方法。
5. 小蛇喫食物的方法。
6. 判斷死亡方法。
大致分析完對象後，就可以搭建界面，封裝一個個對象，並實現對象的方法了。
我們以食物對象爲例：
;(function(){ // 自調用函數，保證屬性和方法的局部性
let div; // 聲明一個全局變量，存儲當前食物dom
function Food(map, obj){ // 聲明食物對象
this.obj = obj || {}; // 接受外界參數：食物的位置x和y，並賦值給obj屬性
this.obj.width = 10; // 默認食物的大小
this.obj.height = 10;
this.obj.x = obj.x || 300;
this.obj.y = obj.y || 250;
this.obj.bgc = 'green'; // 背景色
this.map = map; // 地圖背景dom元素
}
Food.prototype.render = function(obj){ // 渲染食物方法
obj = obj || {}; // 如果有參數就使用參數數據，如果沒有使用對象自身默認屬性
this.obj.x = obj.x || this.obj.x;
this.obj.y = obj.y || this.obj.y;
if(div) div.remove(); // 刪除上一個食物dom
div = document.createElement('div');
this.map.appendChild(div); // 創建新的食物dom
div.style.width = this.obj.width + 'px'; // 給dom設置style
div.style.height = this.obj.height + 'px';
div.style.position = 'absolute';
div.style.left = this.obj.x + 'px';
div.style.top = this.obj.y + 'px';
div.style.backgroundColor = this.obj.bgc;
}
window.Food = Food; // 給window一個Food方法，即將Food對象暴露出去
})()
代碼我就粘貼了，需要詳細代碼的再標題下邊有Github源碼地址。或者在我主頁有源碼文件下載（需要c幣）。
喜歡的小夥伴可以關注我哦， 有任何問題的歡迎私聊我。