JS学习——贪吃蛇代码（简易版）

贪吃蛇目录

游戏链接：
页面
- 游戏页面
- 开始页面
- 暂停页面
代码
- html代码
- css代码
- js代码
素材
- 目录结构
- 图片素材
说明
- 方块的构造函数
- 方块原型上的方法
- 蛇的构造函数
- 蛇的初始化方法
- 蛇的下一个位置方法（重点）
- - 这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。
- 处理碰撞后要做的事的方法
- - move（重点）
  - eat
  - die
- 创建蛇的实例对象
- 创建食物
- 创建游戏逻辑
- 游戏实例的初始化方法
- 游戏的开始，暂停，结束方法
- - 游戏的开始start
  - 游戏的暂停pause
  - 游戏的结束over
- 开始游戏和按钮
- 暂停游戏和暂停游戏按钮

游戏链接：

链接: link.
有很多bug

页面

游戏页面

开始页面

暂停页面

代码

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>贪吃蛇</title><link rel="stylesheet" href="css/index.css">
</head><body><div class="content"><div class="btn startBtn"><button></button></div><div class="btn pauseBtn"><button></button></div><div id="snakeWrap"></div></div><script src="js/index.js"></script>
</body></html>

css代码

* {margin: 0;padding: 0;
}.content {width: 640px;height: 640px;margin: 30px auto;position: relative;
}.btn {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 2;
}.btn button {background: none;border: none;background-size: 100% 100%;cursor: pointer;outline: none;position: absolute;left: 50%;top: 50%;
}.startBtn button {width: 200px;height: 80px;background-image: url(../images/startGame.png);margin-left: -100px;margin-top: -40px;
}.pauseBtn {display: none;
}.pauseBtn button {width: 70px;height: 70px;background-image: url(../images/start.png);margin-left: -35px;margin-top: -35px;
}/* snakeWrap */#snakeWrap {width: 600px;height: 600px;background: #225675;border: 20px solid #7dd9ff;position: relative;
}.snakeHead {background-image: url(../images/snakeHead.png);background-size: cover;
}.snakeBody {background-image: url(../images/snakeBody.png);background-size: cover;/* background-color: #9ddbb1; *//* border-radius: 50%; */
}.food {background-image: url(../images/apple2.png);background-size: cover;
}

js代码

var sw = 20, //一个方块的宽度sh = 20, //一个方块的高度tr = 30, //行数td = 30; //列数var snake = null, //蛇的实例food = null, //食物的实例game = null; //游戏的实例// 方块构造函数
function Square(x, y, classname) {// 0,0      0,0// 20,0     1,0// 40,0     2,0this.x = x * sw;this.y = y * sh;this.class = classname;this.viewContent = document.createElement('div'); //方块对应的DOM元素this.viewContent.className = this.class;this.parent = document.getElementById('snakeWrap'); //方块的父级
}Square.prototype.create = function() { //创建方块DOMthis.viewContent.style.position = 'absolute';this.viewContent.style.width = sw + 'px';this.viewContent.style.height = sh + 'px';this.viewContent.style.left = this.x + 'px';this.viewContent.style.top = this.y + 'px';this.parent.appendChild(this.viewContent);
}Square.prototype.remove = function() {this.parent.removeChild(this.viewContent);
}// 蛇
function Snake() {this.head = null; //存一下蛇头this.tail = null; //存一下蛇尾this.pos = []; //存一下蛇身上每一方块的位置this.directionNum = { //存储蛇走的方向,用一个对象来表示left: {x: -1,y: 0,rotate: 180 //蛇头在不同的方向中进行旋转，要不始终向右},right: {x: +1,y: 0,rotate: 0},up: {x: 0,y: -1,rotate: -90},down: {x: 0,y: 1,rotate: 90}}
}Snake.prototype.init = function() {//创建蛇头var snakeHead = new Square(2, 0, 'snakeHead');snakeHead.create();this.head = snakeHead; //存储蛇头信息this.pos.push([2, 0]); //把蛇头的位置存储起来// 创建蛇身体1var snakeBody1 = new Square(1, 0, 'snakeBody');snakeBody1.create();this.pos.push([1, 0]); //把蛇身1的坐标也存起来// 创建蛇身体2var 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; //默认让蛇向右走
};// 这个方法用于获取蛇头的下一个位置对应的元素，要根据元素做不同的事情
Snake.prototype.getNextPos = function() {var nextPos = [//蛇头要走的下一个坐标this.head.x / sw + this.direction.x,this.head.y / sh + this.direction.y]// 下个点是自己，代表撞到了自己，游戏结束var selfCollied = false; //是否撞到了自己this.pos.forEach(function(value) {if (value[0] == nextPos[0] && value[1] == nextPos[1]) {// 如果数组中的两个数据都相等，就说明下一个点在蛇身上里面能找到，则代表撞到自己了selfCollied = true;}});if (selfCollied) {console.log('撞到自己了!');this.strategies.die();return;}// 下个点是围墙，代表撞到了围墙，游戏结束if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {console.log("撞墙了");this.strategies.die();return;}// 下个点是苹果，代表吃到了食物，增长身体if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {// 如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点console.log('吃到食物了！');this.strategies.eat.call(this);return;}// 下个点什么都不是，继续前进this.strategies.move.call(this);
};//处理碰撞后要做的事
Snake.prototype.strategies = {move: function(format) { //这个参数用于决定要不要删除最后一个方块(蛇尾)。当传了此参数时表示要做的事情就是吃// 创建新身体（在旧蛇头的位置）var newBody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody');// 更新链表的关系newBody.next = this.head.next; //newBody的后边等于之前蛇头的后边newBody.next.last = newBody; //newBody的后边的块的前面更新为newBodynewBody.last = null;this.head.remove(); //把旧蛇头从原来的位置删除newBody.create();// 创建一个新蛇头(蛇头下一步要走的点nextPos)var newHead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead');// 更新链表的关系newHead.next = newBody;newHead.last = null;newBody.last = newHead;// 更新蛇头的方向newHead.viewContent.style.transform = 'rotate(' + this.direction.rotate + 'deg)';newHead.create();// 蛇身上的每一个方块的坐标也要更新this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y]);this.head = newHead; //更新this.head的信息更新一下if (!format) { //如果format的值为false，表示需要删除(除吃以外的操作)this.tail.remove();this.tail = this.tail.last;this.pos.pop();}},eat: function() {this.strategies.move.call(this, true);createFood();game.score++;},die: function() {// console.log("die");game.over();}
}snake = new Snake();
// snake.init();
// snake.getNextPos();//创建食物
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();}}// 创建游戏逻辑
function Game() {this.timer = null;this.score = 0;
}
Game.prototype.init = function() {snake.init();// snake.getNextPos();createFood();document.onkeydown = function(ev) {if (ev.which == 37 && snake.direction != snake.directionNum.right) { //当蛇往右走时，用户摁下左键时不可以往左走snake.direction = snake.directionNum.left;} else if (ev.which == 38 && snake.direction != snake.directionNum.down) {snake.direction = snake.directionNum.up;} else if (ev.which == 39 && snake.direction != snake.directionNum.left) {snake.direction = snake.directionNum.right;} else if (ev.which == 40 && snake.direction != snake.directionNum.up) {snake.direction = snake.directionNum.down;}}this.start();
}
Game.prototype.start = function() { //开始游戏this.timer = setInterval(function() {snake.getNextPos();}, 100);
}
Game.prototype.pause = function() {clearInterval(this.timer);
}
Game.prototype.over = function() {clearInterval(this.timer);alert('你的得分为：' + this.score);// 游戏回到初始状态var snakeWrap = document.getElementById('snakeWrap');snakeWrap.innerHTML = '';snake = new Snake();game = new Game();var startBtnWrap = document.querySelector('.startBtn');startBtnWrap.style.display = 'block';
}// 开始游戏
game = new Game();
var startBtn = document.querySelector('.startBtn button');
startBtn.onclick = function() {startBtn.parentNode.style.display = 'none';game.init();
}// 暂停游戏
var snakeWrap = document.getElementById('snakeWrap');
var pauseBtn = document.querySelector('.pauseBtn button');
snakeWrap.onclick = function() {game.pause();pauseBtn.parentNode.style.display = 'block';
}pauseBtn.onclick = function() {game.start();pauseBtn.parentNode.style.display = 'none';
}

素材

目录结构

图片素材

说明

var sw = 20, //一个方块的宽度sh = 20, //一个方块的高度tr = 30, //行数td = 30; //列数var snake = null, //蛇的实例food = null, //食物的实例game = null; //游戏的实例

整个div的长宽都为640px,边框大小20px,所以贪吃蛇可活动区域长宽为600px,定义每个小格子为长宽都为20px,所以行数列数为30
初始化实例对象。

方块的构造函数

function Square(x, y, classname) {// 0,0      0,0// 20,0     1,0// 40,0     2,0this.x = x * sw;this.y = y * sh;this.class = classname;this.viewContent = document.createElement('div'); //方块对应的DOM元素this.viewContent.className = this.class;this.parent = document.getElementById('snakeWrap'); //方块的父级
}

页面中的每个元素都是小方块，我们通过传入坐标的方式进行构造，x，y通过换算（*20，后面有很多类似的换算）表示位置，class设置样式属性，通过viewContent创建对应的DOM元素方便操作。设置方块的父级元素为snakeWrap，方便添加元素。

方块原型上的方法

Square.prototype.create = function() { //创建方块DOMthis.viewContent.style.position = 'absolute';this.viewContent.style.width = sw + 'px';this.viewContent.style.height = sh + 'px';this.viewContent.style.left = this.x + 'px';this.viewContent.style.top = this.y + 'px';this.parent.appendChild(this.viewContent);
}Square.prototype.remove = function() {this.parent.removeChild(this.viewContent);
}

原型对象上的所有属性和方法，都会被对象实例所共享。create创建DOM元素，remove删除DOM元素。

蛇的构造函数

function Snake() {this.head = null; //存一下蛇头this.tail = null; //存一下蛇尾this.pos = []; //存一下蛇身上每一方块的位置this.directionNum = { //存储蛇走的方向,用一个对象来表示left: {x: -1,y: 0,rotate: 180 //蛇头在不同的方向中进行旋转，要不始终向右},right: {x: +1,y: 0,rotate: 0},up: {x: 0,y: -1,rotate: -90},down: {x: 0,y: 1,rotate: 90}}
}

贪吃蛇移动的是蛇头，蛇尾用于判别是否下个位置有食物（有则不消失，无则消失），通过一个pos数组存放蛇身上的方块便于后面使用，设置方向用对象表示，x和y是改变的位置坐标，rotate是蛇头要旋转的角度。

蛇的初始化方法

Snake.prototype.init = function() {//创建蛇头var snakeHead = new Square(2, 0, 'snakeHead');snakeHead.create();this.head = snakeHead; //存储蛇头信息this.pos.push([2, 0]); //把蛇头的位置存储起来// 创建蛇身体1var snakeBody1 = new Square(1, 0, 'snakeBody');snakeBody1.create();this.pos.push([1, 0]); //把蛇身1的坐标也存起来// 创建蛇身体2var 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; //默认让蛇向右走
};

初始化蛇头snakeHead和蛇的身体snakeBody1和snakeBody2，调用create方法创建DOM元素，注意存储蛇头head和蛇尾tail的信息，把每个身体部分的位置存入到pos数组中。将蛇头和蛇身体蛇尾形成链表的关系。给蛇添加方向属性direction。

蛇的下一个位置方法（重点）

// 这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情
Snake.prototype.getNextPos = function() {var nextPos = [//蛇头要走的下一个坐标this.head.x / sw + this.direction.x,this.head.y / sh + this.direction.y]// 下个点是自己，代表撞到了自己，游戏结束var selfCollied = false; //是否撞到了自己this.pos.forEach(function(value) {if (value[0] == nextPos[0] && value[1] == nextPos[1]) {// 如果数组中的两个数据都相等，就说明下一个点在蛇身上里面能找到，则代表撞到自己了selfCollied = true;}});if (selfCollied) {console.log('撞到自己了!');this.strategies.die();return;}// 下个点是围墙，代表撞到了围墙，游戏结束if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) {console.log("撞墙了");this.strategies.die();return;}// 下个点是苹果，代表吃到了食物，增长身体if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) {// 如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点console.log('吃到食物了！');this.strategies.eat.call(this);return;}// 下个点什么都不是，继续前进this.strategies.move.call(this);
};

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

定义一个nextPos数组根据方向计算出下一位要走的坐标。

下个点有四种情况：
1.下个点是自己，代表撞到了自己，游戏结束
通过selfCollied检验是否撞到了自己，通过forEach遍历pos数组进行比较，撞到了就执行strategies里的die()方法。并通过return结束函数执行。
2.下个点是围墙，代表撞到了围墙，游戏结束
与上面的情况类似，撞倒后执行die()方法，再return。nextPos[0] < 0表示下一个坐标的x位置小于了0，也就是撞到了左墙，nextPos[1] < 0表示下一个坐标的y位置小于零0，也就是撞到了上墙。同理可得：nextPos[0] > td - 1和nextPos[1] > tr - 1表示撞到了右墙和下墙（tr和td是最开始定义的行列数）。
3.下个点是苹果，代表吃到了食物
当下个点的位置和食物food的位置相同时执行，调用strategies里的eat()方法，并改变当前的this（this应继续指向蛇的实例，如果不改指向的是this.strategies），return结束。
4.下个点什么都不是，继续前进
当以上三种情况都不执行时，继续走。并传入this(this应继续指向蛇的实例，如果不改指向的是this.strategies）

处理碰撞后要做的事的方法

Snake.prototype.strategies = {move: function(format) { //这个参数用于决定要不要删除最后一个方块(蛇尾)。当传了此参数时表示要做的事情就是吃// 创建新身体（在旧蛇头的位置）var newBody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody');// 更新链表的关系newBody.next = this.head.next; //newBody的后边等于之前蛇头的后边newBody.next.last = newBody; //newBody的后边的块的前面更新为newBodynewBody.last = null;this.head.remove(); //把旧蛇头从原来的位置删除newBody.create();// 创建一个新蛇头(蛇头下一步要走的点nextPos)var newHead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead');// 更新链表的关系newHead.next = newBody;newHead.last = null;newBody.last = newHead;// 更新蛇头的方向newHead.viewContent.style.transform = 'rotate(' + this.direction.rotate + 'deg)';newHead.create();// 蛇身上的每一个方块的坐标也要更新this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y]);this.head = newHead; //更新this.head的信息更新一下if (!format) { //如果format的值为false，表示需要删除(除吃以外的操作)this.tail.remove();this.tail = this.tail.last;this.pos.pop();}},eat: function() {this.strategies.move.call(this, true);createFood();game.score++;},die: function() {// console.log("die");game.over();}
}

一共三种方法：move,eat,die;

move（重点）

传入参数format，这个参数用于决定要不要删除最后一个方块(蛇尾)。当此参数为true时表示吃食物，不删蛇尾。
在蛇头移动前原来的位置上创建新的身体newBody，更新链表关系。将原来的蛇头删除后，创建newBody。
创建一个新的蛇头，位置为nextPos中的一样，也就是下一个要走的坐标点，更新链表的关系。通过transform更新蛇头的方向（每走一步都会new新蛇头，在这里更正方向更合适，在键盘按下时更正会报错）。创建newHead。
蛇身上的每一个方块的坐标也要更新，通过splice(index,n,content)索引位置，替换个数，替换的内容，将新蛇头添加到pos数组位置的最前端。更新this.head的信息。
根据format判断是否吃食物，如果吃到了食物，则不执行，不用删除蛇尾。如果没有吃到，将tail删除后更新为之前tail的前一位，并将位置数组里面的最后一位用pop()删除。

eat

继续移动调用move方法，传入当前的指向实例的this和format的值为true（表示吃了食物不用删除蛇尾）。创建新的食物createFood（）。游戏分数加一。

die

结束游戏，调用game.over（）。

创建蛇的实例对象

snake = new Snake();

创建食物

//创建食物
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();}}

创建食物的坐标x和y，要求坐标不能在蛇身上，不能在活动空间之外。通过一个循环进行创建，不满足条件再次执行。Math.round(Math.random() * (td - 1))表示返回值是一个大于等于0，且小于（td-1）的随机数并通过Math.round()进行四舍五入返回一个整数。
创建成功坐标后跳出循环生成食物。并存储一下生成食物的坐标，用于跟蛇头要走的下一个点做对比。
通过foodDom判断当前有无food元素，有则改变食物的位置（不用再次创建，提高效率），无则创建食物。

创建游戏逻辑

function Game() {this.timer = null;this.score = 0;
}

timer为定时器，score为分数

游戏实例的初始化方法

Game.prototype.init = function() {snake.init();// snake.getNextPos();createFood();document.onkeydown = function(ev) {if (ev.which == 37 && snake.direction != snake.directionNum.right) { //当蛇往右走时，用户摁下左键时不可以往左走snake.direction = snake.directionNum.left;} else if (ev.which == 38 && snake.direction != snake.directionNum.down) {snake.direction = snake.directionNum.up;} else if (ev.which == 39 && snake.direction != snake.directionNum.left) {snake.direction = snake.directionNum.right;} else if (ev.which == 40 && snake.direction != snake.directionNum.up) {snake.direction = snake.directionNum.down;}}this.start();
}

初始化蛇snake.init();
创建食物createFood();
给上键盘事件，event.which是键值对，37,38,39,40分别对应的是左,上,右,下方向键。除了改变方向外，蛇不可以逆行（比如此时蛇向右，蛇不可以直接改变方向向左）
调用start方法开始。

游戏的开始，暂停，结束方法

Game.prototype.start = function() { //开始游戏this.timer = setInterval(function() {snake.getNextPos();}, 100);
}
Game.prototype.pause = function() {clearInterval(this.timer);
}
Game.prototype.over = function() {clearInterval(this.timer);alert('你的得分为：' + this.score);// 游戏回到初始状态var snakeWrap = document.getElementById('snakeWrap');snakeWrap.innerHTML = '';snake = new Snake();game = new Game();var startBtnWrap = document.querySelector('.startBtn');startBtnWrap.style.display = 'block';
}

游戏的开始start

设置定时器，调用snake.getNextPos();（这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情）。可通过定时器的速度改变游戏难度，设置蛇的移动速度。

游戏的暂停pause

清除定时器。

游戏的结束over

清除定时器，返回得到的分数。
将游戏设置为初始状态：
snakeWrap.innerHTML = ‘’;将snakeWrap里面的元素清空。创建新的snake和game，让开始按钮.startBtn再次显示出来

开始游戏和按钮

game = new Game();
var startBtn = document.querySelector('.startBtn button');
startBtn.onclick = function() {startBtn.parentNode.style.display = 'none';game.init();
}

实例化game，将开始按钮绑定点击事件，点击后按钮display设置为none，调用game的初始化方法init（）。

暂停游戏和暂停游戏按钮

var snakeWrap = document.getElementById('snakeWrap');
var pauseBtn = document.querySelector('.pauseBtn button');
snakeWrap.onclick = function() {game.pause();pauseBtn.parentNode.style.display = 'block';
}pauseBtn.onclick = function() {game.start();pauseBtn.parentNode.style.display = 'none';
}

绑定游戏活动区域点击事件，使游戏暂停，并让暂停按钮显示出来。
绑定暂停按钮点击事件，游戏继续，使暂停按钮消失