JS学习——贪吃蛇代码（简易版）
贪吃蛇目录
-
- 页面
-
- 游戏页面
- 开始页面
- 暂停页面
- 代码
-
- html代码
- css代码
- js代码
- 素材
-
- 目录结构
- 图片素材
- 说明
-
-
- 方块的构造函数
- 方块原型上的方法
- 蛇的构造函数
- 蛇的初始化方法
- 蛇的下一个位置方法（重点）
-
- 这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。
- 处理碰撞后要做的事的方法
-
- move（重点）
- eat
- die
- 创建蛇的实例对象
- 创建食物
- 创建游戏逻辑
- 游戏实例的初始化方法
- 游戏的开始，暂停，结束方法
-
- 游戏的开始start
- 游戏的暂停pause
- 游戏的结束over
- 开始游戏和按钮
- 暂停游戏和暂停游戏按钮
-
页面
游戏页面
开始页面
暂停页面
代码
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,0
this.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() {
//创建方块DOM
this.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]); //把蛇头的位置存储起来
// 创建蛇身体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; //默认让蛇向右走
};
// 这个方法用于获取蛇头的下一个位置对应的元素，要根据元素做不同的事情
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的后边的块的前面更新为newBody
newBody.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,0
this.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() {
//创建方块DOM
this.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]); //把蛇头的位置存储起来
// 创建蛇身体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; //默认让蛇向右走
};
初始化蛇头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的后边的块的前面更新为newBody
newBody.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';
}
绑定游戏活动区域点击事件，使游戏暂停，并让暂停按钮显示出来。
绑定暂停按钮点击事件，游戏继续，使暂停按钮消失