最近在做一个贪吃蛇的项目，这是我第一次用js来实现做一款游戏，虽然很low,但出现预想的效果时还是很开心的，虽然做出了效果但还是对其中的一些还不太熟练，在后续我会将游戏开始，地图构建，食物出现，蛇的出现分别写入一个文件，这样更便于理解。
我们先定义一个游戏引擎用来定义游戏的开始、结束以及场景的布置。
用创建对象来定义一个游戏gGameBox其中有地图的属性，以及地图的所有坐标。
var gGameBox = {
rows: 20, // 行数
cols: 20, // 列数
allTds: [], // 存储所有的td元素对象
food: null, // 食物对象
snake: null, // 蛇对象
.
.
.//(以下到场景布置都是)
}
清除蛇尾定义清除属性clear，由于蛇的移动是将蛇节的坐标加++，所以蛇身会一直增加，要清除蛇的小尾巴。
clear: function(){
for(var i = 0; i< gGameBox.allTds.length;i++){
for(var j=0;j定义一个方法用来判断按键，可以由上下左右来控制蛇的移动。（注意蛇不能在往左走的同时往右走，同理其他一样）
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";
}
}
},
定义一个方法布置场景，创建食物，创建蛇，分别调用了food.js文件、snake.js文件。用定时器来实现蛇的移动、先清除蛇尾、判断键盘按键来控制蛇的方向、调用蛇的移动方法、让食物随机出现。
start: function() {
gGameBox.init(); // 游戏初始化
this.food = new Food();// 创建食物
this.snake = new Snake(); // 创建蛇
this.timer=setInterval(function(){
gGameBox.clear();
gGameBox.keyControl();
gGameBox.snake.move();
gGameBox.food.show();
},200);
},
init为布置场景的方法，在js中创建表格然后加入页面中。
// 初始化
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);
}
Food.js文件
我们用外接文件来写贪吃蛇中的食物。
先给食物的属性横坐标x,纵坐标y,并让食物一开始的坐标就是随机出现的（调用函数change()）。
function Food() {
// 坐标
this.x = 0;
this.y = 0;
// 一开始就随机位置
this.change();
}
在食物的原型中加入食物的方法（show为食物出现在页面中定义了食物的样式，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();
}
snake.js文件
我们用外接文件来写贪吃蛇中的蛇（注意蛇很有灵性需要特别小心）。
先定义了一个arr数组用来存放蛇节的坐标。x其实为表格的列数，y为表格的行数。
direct为让蛇一开始便让其往右边移动。
fresh为让蛇出现在地图中。
function Snake(){
this.arr = [
{x: 5, y: 1},
{x: 4, y: 1},
{x: 3, y: 1},
{x: 2, y: 1},
{x: 1, y: 1},
];
this.direct = "right";
this.fresh();
}
在蛇的原型中加入让蛇显示的行为。
Snake.prototype.fresh = function(){
for(var i = 0; i在蛇的原型中加入蛇的移动行为move，并判断按键后改变蛇的移动方向，给出判断游戏结束（蛇死亡）的条件。给出判断是否吃到食物的条件，如果吃到就在蛇尾增加一节让食物再随机出现一个，更新蛇的位置。蛇的移动是通过在蛇头加一个表格，蛇尾减去一个表格实现的unshift加一个蛇头，pop删除一个蛇尾然后更新蛇的位置。
Snake.prototype.move = function(){
var x=this.arr[0].x;
var y=this.arr[0].y;
if(this.direct == "right"){
x++;
}else if (this.direct =="down"){
y++;
}else if (this.direct == "left"){
x--;
}else if (this.direct =="up"){
y--;
}
//判断蛇是否over
if(x >=gGameBox.cols|| y>=gGameBox.rows||x<0||y<0){
clearInterval(gGameBox.timer);
alert("GG");
return;
}
//判断蛇是否吃到food
if(x == gGameBox.food.x && y==gGameBox.food.y){
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();
}