? ? ? ? 貪吃蛇是眾多90后小時候玩過的一款經典手游，但是在程序員眼中則是幾頁代碼的編輯，代碼里所涉及的內容也比較簡單，下面我就為大家簡單介紹一下貪吃蛇事件。
涉及內容
? ? ? ?主要為構造函數及其原型的應用，游戲框架是由表格和數組通過構造函數書寫的js結構即為游戲引擎部分。
事件結構
? ? ? 整個貪吃蛇事件大體結構可分為兩部分：
?1：尋找對象
（1）蛇
屬性： 長度、顏色、位置、頭、移動方向
方法： 吃、移動、長大
（2）食物
屬性： 大小、顏色、位置
方法： 改變位置
（3）游戲引擎
屬性： 場景、蛇、食物
方法： 初始化、鍵盤控制、啟動游戲、停止游戲
? ?2：實現對象
游戲引擎
采用 字面量的形式 創建對象。 因為游戲引擎只有1個，采用這種方式會更合適些。代碼如下：
```
// 定義? 游戲引擎? 對象
var gGameBox = {
rows: 20,? // 行數
cols: 20,? // 列數
allTds: [], // 存儲所有的td元素對象
food: null, // 食物對象
snake: null, // 蛇對象
timer: null, // 定時器
// 方法： 清空環境
clear: function() {
for (var i = 0; i < gGameBox.allTds.length; i++) {
for (var j = 0; j < gGameBox.allTds[i].length; j++) {
gGameBox.allTds[i][j].className = "";
}
}
},
// 方法：支持鍵盤控制
keyControl: function() {
// onkeydown 鍵盤按下事件
window.onkeydown = function(e) {
// 獲取按鍵編碼
var c = e.keyCode;
if (c == 37)
{
// 左
if (gGameBox.snake.direct == "right")
{
// 當前是往右走，不能掉頭，終止函數
return ;
}
gGameBox.snake.direct = "left";
}
else if (c == 38)
{
// 上
if (gGameBox.snake.direct == "down")
{
return ;
}
gGameBox.snake.direct = "up";
}
else if (c == 39)
{
// 右
if (gGameBox.snake.direct == "left")
{
return ;
}
//? 改變蛇的方向
gGameBox.snake.direct = "right";
}
else if (c == 40)
{
if (gGameBox.snake.direct == "up")
{
return ;
}
// 下
gGameBox.snake.direct = "down";
}
}
},
// 方法： 游戲開始
start: function() {
gGameBox.init(); // 游戲初始化
gGameBox.food = new Food(); // 創建食物
gGameBox.snake = new Snake(); // 創建蛇
// 支持鍵盤控制
gGameBox.keyControl();
// 啟動游戲時，定時移動蛇
gGameBox.timer = setInterval(function() {
// 1. 清空棋盤
gGameBox.clear();
// 2. 蛇移動
gGameBox.snake.move();
// 3. 顯示食物
gGameBox.food.show();
}, 500);
//gGameBox.snake.fresh();
},
// 初始化
init: function() {
// 場景布置好, 用表格來做
var oTable = document.createElement("table");
for (var i = 0; i < gGameBox.rows; i++)
{
// 創建tr
var oTr = document.createElement("tr");
// 每一行，定義1個空數組
var arr = [];
for (var j = 0; j < gGameBox.cols; j++) {
// 創建td
var oTd = document.createElement("td");
oTr.appendChild(oTd);
// 將td放到空數組中
arr.push(oTd);
}
// 將當前行所有的td，壓入到 allTds 屬性中
gGameBox.allTds.push(arr);
oTable.appendChild(oTr);
}
// 添加到body
document.body.appendChild(oTable);
}
};
```
事件框架大致內容
? ? ? 事件框架主頁部分內容不多，主要為游戲引擎js以及游戲食物（food.js）的調用或者引入和他們樣式的書寫具體內容如下：
游戲引擎框架和食物樣式的書寫：
游戲引擎js的書寫：
游戲中食物（food.js）的書寫：
食物
因為食物可能在不斷地創建，所以采用 （構造函數）的方式，更合適些。
（擴展） 產生不同的食物
```
function Food() {
// 坐標
this.x = 0;
this.y = 0;
// 一開始就隨機位置
this.change();
}
// 方法1: 出現在環境中
Food.prototype.show = function() {
gGameBox.allTds[this.y][this.x].className = "food";
}
// 方法2: 改變位置, 隨機的
Food.prototype.change = function() {
this.x = parseInt(Math.random() * gGameBox.cols);
this.y = parseInt(Math.random() * gGameBox.rows);
this.show();
}
游戲中蛇對象的書寫;
蛇
因為蛇可能需要手動創建，可能有多條蛇，所以 采用 構造函數的方式 更合適些。
（擴展） 蛇的顏色、蛇的大小、蛇的初始位置? 都可以改，也可以繼承的方式來實現不同的蛇
```
function Snake() {
// 存儲蛇 所有節點坐標， 同時也存儲了蛇的長度? this.arr.length
//? 默認蛇頭? this.arr[0]? 節點
this.arr = [
{x: 5, y: 1},
{x: 4, y: 1},
{x: 3, y: 1},
{x: 2, y: 1},
{x: 1, y: 1}
];
// 當前移動方向：? left, right, down, up
this.direct = "down";
// 創建完就刷新到頁面上
this.fresh();
}
// 方法1： 更新到頁面上? fresh 刷新
Snake.prototype.fresh = function() {
// 給所有蛇節點，都添加樣式
for (var i = 0; i < this.arr.length; i++)
{
// this.arr[i] 是蛇節點對象
var x = this.arr[i].x;
var y = this.arr[i].y;
gGameBox.allTds[y][x].className = "snake"
}
}
// 方法2： 移動
Snake.prototype.move = function() {
// 蛇頭坐標
var x = this.arr[0].x;
var y = this.arr[0].y;
// 思路： 根據當前蛇的方向，來分情況處理
if (this.direct == "right")
{
//? 4? ? ? 3? ? ? 2? ? 1? ? ? 0
// (1,1) (2,1) (3,1) (4,1) (5,1)
// (2,1) (3,1) (4,1) (5,1) (6,1)
//? ? ? (2,1) (3,1) (4,1) (5,1) (6,1)
//? 在 蛇頭 增加新點 (6,1)， 刪除蛇尾
x++;
}
else if (this.direct == "down")
{
y++;
}
else if (this.direct == "left")
{
x--;
}
else if (this.direct == "up")
{
y--;
}
if (x >= gGameBox.cols || y >= gGameBox.rows || x < 0 || y < 0)
{
clearInterval(gGameBox.timer);
console.log("GG啦~");
alert("GG啦~");
return ;
}
if (x == gGameBox.food.x && y == gGameBox.food.y)
{
// 吃到食物了，增加1個點
this.arr.unshift({x: x, y: y});
// 食物更改位置
gGameBox.food.change();
this.fresh();
return ;
}
// 在蛇頭增加新點
this.arr.unshift({x: x, y: y});
// 刪除蛇尾
this.arr.pop();
// 將新蛇刷新到頁面上
this.fresh();
}
啟動游戲
```
gGameBox.start();
```
### 項目開發總結
1. 構造函數名 首字母建議 大寫
2. 變量名不要寫錯
3. 注意語法
事件具體效果鏈接：127.0.0.1:8020/20171013/02%E8%B4%AA%E5%90%83%E8%9B%87.html
