贪吃蛇是众多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
