HTML+js实现贪吃蛇小游戏（内含完整代码）

}

}

初始化对象分析：

---

蛇有了，我们现在需要把蛇放到最开始的位置，设置坐标，这时候就初始化蛇，这里有个新的知识点就是链表关系，如下图，相当于在已知关系中确定各自的相对位置。

js代码：

//单词init指的是初始化

Snake.prototype.init = function() {

//创建一个蛇头

var snakeHead = new Square(2, 0, ‘snakeHead’);

snakeHead.create();

this.head = snakeHead; //存储蛇头信息

this.pos.push([2, 0]); //把蛇头的位置存起来

//创建蛇身体1

var snakeBody1 = new Square(1, 0, ‘snakeBody’);

snakeBody1.create();

this.pos.push([1, 0]); //把蛇身1的坐标也存起来

//创建蛇身体2

var snakeBody2 = new Square(0, 0, ‘snakeBody’);

snakeBody2.create();

this.tail = snakeBody2; //把蛇尾信息存起来

this.pos.push([0, 0]); //把蛇身2的坐标也存起来

//形成链表关系

snakeHead.last = null;

snakeHead.next = snakeBody1;

snakeBody1.last = snakeHead;

snakeBody1.next = snakeBody2;

snakeBody2.last = snakeBody1;

snakeBody2.next = null;

//给蛇添加一个属性，用来表示蛇走的方向

this.direction = this.directionNum.right; //默认让蛇往右走

};

创建食物以及生成新的食物：

---

首先定义一个食物实例，食物的产生是随机的所以会用到随机数，但是食物产生的位置是有范围的，一是只能在一定区域内，所以需要设置参数使他不能超过边界；二是食物不能出现在蛇的身上，所以就需要判断是否在蛇身上，如果食物的位置与蛇身上的每一个身体部分的坐标不重合，就代表没有在蛇身上。

新的食物的生成条件是当蛇吃了食物（就代表场上没有食物了），才会生成新的食物。食物的消失条件就是去判断蛇头的下一个位置是否和食物的位置重合，如果重合就让食物消失。

js代码：

//创建食物

var food = null,//食物的实例

function createFood() {

//食物小方块的随机坐标

var x = null;

var y = null;

var include = true; //循环跳出的条件，true表示随机生成食物的坐标在蛇身上(需要继续循环);false表示食物坐标不在蛇身上(不循环了)

while (include) {

x = Math.round(Math.random() * (td - 1));

y = Math.round(Math.random() * (tr - 1));

snake.pos.forEach(function(value) {

if (x != value[0] && y != value[1]) {

//这个条件成立说明在随机出来的坐标，在蛇身上并没有找到

include = false;

}

});

}

//生成食物

food = new Square(x, y, ‘food’);

food.pos = [x, y]; //存储一下生成食物的坐标，用于跟蛇头要走的下一个点做对比

var foodDom = document.querySelector(‘.food’);

if (foodDom) {

foodDom.style.left = x * sw + ‘px’;

foodDom.style.top = y * sh + ‘px’;

} else {

food.create();

}

}

判断蛇头下一步的位置分析：

---

蛇头下一步又分成4种情况：一是撞到自己的身体了，游戏结束；二是撞到围墙了，游戏结束；三是碰到食物了，吃掉食物；四是前面方格子什么也没有，继续走；每一种情况都对应一种结果。

js代码：

//这个方法用来获取蛇头下一个位置对应的元素，要根据元素做不同的事情

Snake.prototype.getNextPos = function() {

var nextPos = [

this.head.x / sw + this.direction.x,

this.head.y / sh + this.direction.y

]

//单词forEach代表遍历数组

//(1)下个点是自己，代表撞到了自己，游戏结束

var selfCollied = false; //是否撞到自己

this.pos.forEach(function(value) {

if (value[0] == nextPos[0] && value[1] == nextPos[1]) {

//如果数组中两个数据都相等，说明下一个点在蛇身体里面能找到自己了

selfCollied = true;

}

});

if (selfCollied) {

this.strategies.die.call(this);

return;

}

//(2)下个点是围墙，代表撞到了围墙，游戏结束

if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {

this.strategies.die.call(this);