小游戏之丛林贪吃蛇

前言

贪吃蛇（也叫做贪食蛇）游戏是一款休闲益智类游戏，有PC和手机等多平台版本，既简单又耐玩。该游戏通过控制蛇头方向吃东西，从而使得蛇变得越来越长，直到最后占满全部空格结束。贪吃蛇游戏最初为单机模式，后续又陆续推出团战模式、赏金模式、挑战模式等多种玩法，其中出名的贪吃蛇大作战最为广泛流传。
今天就给大家带来一款比较简单的贪吃蛇，也是最基础的贪吃蛇玩法。其中所使用的技术栈vue。
下面就是一个基础贪吃蛇的完整玩法，图片还是有点长的，可耐心观看。

一、游戏分析

1. 首先游戏中主角肯定是蛇（snake），其次是食物（food）。我们还需要一个规定蛇运动的范围地图（map）。
2. 游戏中蛇只能上下左右移动，所以我们需要根据WASD、方向键来控制蛇的方向。
3. 食物的随机生成，每吃完一个，就会随机在空地中生成一个新的食物。
4. 蛇运动的过程中，不能撞到周围的墙体和自己的身体。

二、基本游戏布局

游戏背景我采用了一个比较有氛围感的图，以及蛇所运动的棋盘网格。
蛇的头、尾、身体以及蛇身拐弯处都用了图片，为了让蛇更为逼真。

首先先看一下效果图：

（1）渲染元素

首先看一下渲染部分，我是利用坐标向地图中判断渲染的。

<div v-for="(item1, index1) in map" :key="index1" class="mapRow"><div v-for="(item2, index2) in item1" :key="index2" ref="zml" class="mapCol"><!-- 砖块 --><div class="brick" v-if="item2 == 1"></div><!-- 苹果 --><img class="food" src="img/food.png" alt="" v-show="item2 == 2"><!-- 蛇头 --><img class="food" src="img/head.png" alt="" v-show="item2 == 3" :style="{'transform': 'rotate('+ headRotate +'deg)'}"><!-- 蛇身 --><img class="food" src="img/body.png" alt="" v-show="item2 == 4" :style="{'transform': 'rotate('+ headRotate +'deg)'}"><!-- 尾巴 --><img class="food" src="img/5-1.png" alt="" v-show="item2 == '5-1'"><img class="food" src="img/5-2.png" alt="" v-show="item2 == '5-2'"><img class="food" src="img/5-3.png" alt="" v-show="item2 == '5-3'"><img class="food" src="img/5-4.png" alt="" v-show="item2 == '5-4'"><!-- 拐弯处 --><img class="food" src="img/6-1.png" alt="" v-show="item2 == '6-1'"><img class="food" src="img/6-2.png" alt="" v-show="item2 == '6-2'"><img class="food" src="img/6-3.png" alt="" v-show="item2 == '6-3'"><img class="food" src="img/6-4.png" alt="" v-show="item2 == '6-4'"></div>
</div>

（2）我们再看一下游戏区上面的得分部分

这里我是利用css的text-shadow让字体有凹进去的效果，具体如下

.score{line-height: 1;color: rgb(220,197,117);font-size: 40px;font-weight: bold;position: absolute;top: 110px;left: 50%;transform: rotate(6deg) translateX(-50%);text-shadow: -2px -2px 2px rgba(0,0,0,.8), 2px 2px 2px rgba(255,255,255,.6);background-color: transparent;
}

三、游戏实现

（1）游戏参数

map: [],				// 地图  0=空地  1=墙  2=食物  3=蛇头  4=蛇身  5 蛇尾  6 蛇拐弯处
row: 18,				// 行
col: 14,				// 列
score: 0, 				// 分数
snake: [], 				// 蛇
dir: 'right', 			// 移动方向 默认向右
speed: 100,				// 速度
isStart: false, 		// 是否开始
isStop: true,			// 是否暂停
isOver: false, 			// 判断游戏是否结束
movetimer: null, 		// 移动定时器

（2）绑定键盘事件

这里我们需要绑定游戏的空格键（游戏开始）、上下左右键（蛇方向）。
蛇前进某个方向，就不能按相反方向的键，比如往右移动，是不能点击左键的，没用。

document.addEventListener('keydown', event => {const e = event || window.event || arguments.callee.caller.arguments[0];if(this.isOver) { return };// 空格if(e.keyCode == 32) {this.playStart()}// 这里我用了一个节流函数，防止用户方向键点击过快导致会撞到自己throttle(() => {// 当蛇向右移动的时候，不能按左，向上的时候，不能按下，其他同理if (e.keyCode == 37 && this.dir != 'right' && !this.isStop) {this.dir = 'left'; //向左} else if (e.keyCode == 38 && this.dir != 'down' && !this.isStop) {this.dir = 'up'; //向上} else if (e.keyCode == 39 && this.dir != 'left' && !this.isStop) {this.dir = 'right'; //向右} else if (e.keyCode == 40 && this.dir != 'up' && !this.isStop) {this.dir = 'down'; //向下}}, this.speed / 2.5)
})

（3）初始化游戏（createInit）

地图使用的是一个二维数组
蛇默认是四节
墙体可以根据自己的需要进行添加

createInit() {// 地图for(let i = 0; i < this.row; i++) {this.map[i] = [];for (let j = 0; j < this.col; j++) {this.map[i][j] = 0;}}// 蛇for (let i = 4; i > 0; i--) {this.snake = [...this.snake, [1, i]];}// 墙体let wall = [];if(wall.length) {for(let i = 0; i < wall.length; i++) {let [x, y] = wall[i];this.map[x][y] = 1;}}// 渲染蛇和食物this.snakeStyle();this.foodStyle();
},

上面所说的墙体可以自定义，就是自己定义哪块有墙，可自行添加。
比如我想让地图的中间一行有强，并且中间留两个空隙走路。则可以像这样添加：

let wall = [[9, 0], [9, 1], [9, 2], [9, 3], [9, 4], [9, 5],[9, 8], [9, 9], [9, 10], [9, 11],[9, 12], [9, 13]
];

则渲染出来的效果是这样的：

（4）渲染蛇（snakeStyle）

1. 我们渲染蛇的时候要注意的是，要想蛇变得跟逼真，则需要注重的是蛇尾、蛇身、蛇头、拐弯处的图片处理
2. 每种都有四种图片处理，而其中蛇头和直行的蛇身我就直接用了css旋转来调整，蛇尾和蛇身弯处利用了图片处理，为了让蛇看起来更丝滑。

// 蛇头(3)  蛇身(4)  蛇尾(5-1 5-2 5-3 5-4)  蛇拐弯处(6-1 6-2 6-3 6-4)
snakeStyle() {// 蛇头this.map[this.snake[0][0]][this.snake[0][1]] = 3// 尾巴// 我们需要比较最后两个数据，来断定尾巴的朝向let [x1, y1] = this.snake[this.snake.length - 1];let [x2, y2] = this.snake[this.snake.length - 2];if(x1 == x2 && y1 < y2) { this.map[x1][y1] = '5-1' }if(x1 == x2 && y1 > y2) { this.map[x1][y1] = '5-2' }if(x1 > x2 && y1 == y2) { this.map[x1][y1] = '5-3' }if(x1 < x2 && y1 == y2) { this.map[x1][y1] = '5-4' }// 身体 // 先把身体都用普通身体代替for (let i = 1; i < this.snake.length - 1; i++) {let [x, y] = this.snake[i];this.map[x][y] = 4;}// 再去判断拐弯处// 我们只要判断某一段身体的前一个和后一个就行了for (let i = 1; i < this.snake.length - 1; i++) {let [a, b] = this.snake[i];let [a1, b1] = this.snake[i - 1];let [a2, b2] = this.snake[i + 1];if(((a1 < a2 && b1 > b2) || (a1 > a2 && b1 < b2)) && ((a < a1 && b == b1) || (a == a1 && b < b1))) { this.map[a][b] = '6-1' }if(((a1 > a2 && b1 > b2) || (a1 < a2 && b1 < b2)) && ((a > a1 && b == b1) || (a == a1 && b < b1))) { this.map[a][b] = '6-2' }if(((a1 > a2 && b1 > b2) || (a1 < a2 && b1 < b2)) && ((a < a1 && b == b1) || (a == a1 && b > b1))) { this.map[a][b] = '6-3' }if(((a1 < a2 && b1 > b2) || (a1 > a2 && b1 < b2)) && ((a > a1 && b == b1) || (a == a1 && b > b1))) { this.map[a][b] = '6-4' }}this.$forceUpdate();
},

在代码中我们可以看到如何判断尾巴的朝向和何时是拐弯处。

• 第一点尾巴，我们只需要去看蛇的最后两部分就行，只要判断蛇尾跟倒数第二个部分的坐标值，判断在同一方向上面，如果是左右，则x相等，比较y大小。如果是上下，则y相等，比较x大小。
• 第二点拐弯处，我们只需要判断每段蛇身的前一块和后一块即可。一共四个方位，八个判断。
• 包括向右移动向上拐弯、向右移动向下拐弯、向左移动向上拐弯、向左移动向下拐弯、向上移动向左拐弯、向上移动向右拐弯、向下移动向左拐弯、向下移动向右拐弯。

（5）渲染食物（foodStyle）

随机产生食物，并且不能随机到蛇身上、墙上

foodStyle() {// 获取所有空格let arr = [];this.map.forEach((item1, index1) => {item1.forEach((item2, index2) => {if(item2 == 0) {arr.push({ x: index1, y: index2 })}})})let randomNum = Math.floor(Math.random() * arr.length)let {x, y} = arr[randomNum];// 给食物添加样式this.map[x][y] = 2;this.$forceUpdate();
}

（6）游戏开始（playStart）

我们点击空格的时候，关闭遮罩，开始蛇移动定时器

playStart() {if (this.isOver) {this.isStart = false;alert("游戏结束！请重新开始！");return;}if(!this.isStart) {this.isStart = true;this.isStop = false;this.snakeMove()return;}if(this.isStop) {this.isStop = false;this.snakeMove()} else {this.isStop = true;clearInterval(this.movetimer);}
}

（7）蛇移动（snakeMove）

注意，关于游戏的实现都在这里面处理的
基本需要解释的，都在代码里注释了，都很简单

snakeMove() {if(this.isOver) { return; }this.movetimer = setInterval(() => {// 首先定义一个行x 和 列y 坐标，存放下一步将要走的格子let x = null;let y = null;// 判断蛇的方向switch (this.dir) {case 'right':x = this.snake[0][0]; 		// 如果往右移动，则行不变，列++y = this.snake[0][1] + 1;break;case 'down':x = this.snake[0][0] + 1;y = this.snake[0][1];break;case 'left':x = this.snake[0][0];y = this.snake[0][1] - 1;break;case 'up':x = this.snake[0][0] - 1;y = this.snake[0][1];break;}// 撞到墙// 判断是否超过row、col临界值if(x < 0 || x > this.row - 1 || y < 0 || y > this.col - 1 || this.map[x][y] == 1) {console.log('撞到墙了')this.isOver = true;clearInterval(this.movetimer);return;}// 撞到自己了// 判断头部是否与身体其他部位重合let arrX = this.snake.map(item => item[0]);let arrY = this.snake.map(item => item[1]);let bodys = [4,'5-1','5-2','5-3','5-4','6-1','6-2','6-3','6-4'];if(arrX.includes(x) && arrY.includes(y) && bodys.includes(this.map[x][y])) {console.log('撞到自己了')this.isOver = true;clearInterval(this.movetimer);return;}// 如果什么都没撞到，则需要判断是否吃到苹果了// 首先无论有没有吃到苹果，都在蛇数组开头加一节this.snake.unshift([x, y]);// 如果没吃到，则就会把最后一个尾巴清掉if (this.map[x][y] != 2) {const [a, b] = this.snake.pop();this.map[a][b] = 0;} else {// 如果吃到了，那就不用减去最后一个，相当于直接把苹果变成了蛇头this.score += 1;this.foodStyle();}// 重新渲染一下蛇，也就是更新一下蛇最新的位置this.snakeStyle();		}, this.speed);
}

最后

游戏整体不算太难，需要优化的地方还是有的，本次游戏用来练手、休闲还是可以的。
附上完整代码：
张大炮 - 《丛林贪吃蛇》

喜欢游戏的还可以看看我的其他游戏文章。
《俄罗斯方块》
《数字华容道》
《扫雷》
《疯狂斗兽棋》
《人机五子棋》

谢谢观看！

小游戏之丛林贪吃蛇

前言

贪吃蛇（也叫做贪食蛇）游戏是一款休闲益智类游戏，有PC和手机等多平台版本，既简单又耐玩。该游戏通过控制蛇头方向吃东西，从而使得蛇变得越来越长，直到最后占满全部空格结束。贪吃蛇游戏最初为单机模式，后续又陆续推出团战模式、赏金模式、挑战模式等多种玩法，其中出名的贪吃蛇大作战最为广泛流传。
今天就给大家带来一款比较简单的贪吃蛇，也是最基础的贪吃蛇玩法。其中所使用的技术栈vue。
下面就是一个基础贪吃蛇的完整玩法，图片还是有点长的，可耐心观看。

一、游戏分析

1. 首先游戏中主角肯定是蛇（snake），其次是食物（food）。我们还需要一个规定蛇运动的范围地图（map）。
2. 游戏中蛇只能上下左右移动，所以我们需要根据WASD、方向键来控制蛇的方向。
3. 食物的随机生成，每吃完一个，就会随机在空地中生成一个新的食物。
4. 蛇运动的过程中，不能撞到周围的墙体和自己的身体。

二、基本游戏布局

游戏背景我采用了一个比较有氛围感的图，以及蛇所运动的棋盘网格。
蛇的头、尾、身体以及蛇身拐弯处都用了图片，为了让蛇更为逼真。

首先先看一下效果图：

（1）渲染元素

首先看一下渲染部分，我是利用坐标向地图中判断渲染的。

<div v-for="(item1, index1) in map" :key="index1" class="mapRow"><div v-for="(item2, index2) in item1" :key="index2" ref="zml" class="mapCol"><!-- 砖块 --><div class="brick" v-if="item2 == 1"></div><!-- 苹果 --><img class="food" src="img/food.png" alt="" v-show="item2 == 2"><!-- 蛇头 --><img class="food" src="img/head.png" alt="" v-show="item2 == 3" :style="{'transform': 'rotate('+ headRotate +'deg)'}"><!-- 蛇身 --><img class="food" src="img/body.png" alt="" v-show="item2 == 4" :style="{'transform': 'rotate('+ headRotate +'deg)'}"><!-- 尾巴 --><img class="food" src="img/5-1.png" alt="" v-show="item2 == '5-1'"><img class="food" src="img/5-2.png" alt="" v-show="item2 == '5-2'"><img class="food" src="img/5-3.png" alt="" v-show="item2 == '5-3'"><img class="food" src="img/5-4.png" alt="" v-show="item2 == '5-4'"><!-- 拐弯处 --><img class="food" src="img/6-1.png" alt="" v-show="item2 == '6-1'"><img class="food" src="img/6-2.png" alt="" v-show="item2 == '6-2'"><img class="food" src="img/6-3.png" alt="" v-show="item2 == '6-3'"><img class="food" src="img/6-4.png" alt="" v-show="item2 == '6-4'"></div>
</div>

（2）我们再看一下游戏区上面的得分部分

这里我是利用css的text-shadow让字体有凹进去的效果，具体如下

.score{line-height: 1;color: rgb(220,197,117);font-size: 40px;font-weight: bold;position: absolute;top: 110px;left: 50%;transform: rotate(6deg) translateX(-50%);text-shadow: -2px -2px 2px rgba(0,0,0,.8), 2px 2px 2px rgba(255,255,255,.6);background-color: transparent;
}

三、游戏实现

（1）游戏参数

map: [],				// 地图  0=空地  1=墙  2=食物  3=蛇头  4=蛇身  5 蛇尾  6 蛇拐弯处
row: 18,				// 行
col: 14,				// 列
score: 0, 				// 分数
snake: [], 				// 蛇
dir: 'right', 			// 移动方向 默认向右
speed: 100,				// 速度
isStart: false, 		// 是否开始
isStop: true,			// 是否暂停
isOver: false, 			// 判断游戏是否结束
movetimer: null, 		// 移动定时器

（2）绑定键盘事件

这里我们需要绑定游戏的空格键（游戏开始）、上下左右键（蛇方向）。
蛇前进某个方向，就不能按相反方向的键，比如往右移动，是不能点击左键的，没用。

document.addEventListener('keydown', event => {const e = event || window.event || arguments.callee.caller.arguments[0];if(this.isOver) { return };// 空格if(e.keyCode == 32) {this.playStart()}// 这里我用了一个节流函数，防止用户方向键点击过快导致会撞到自己throttle(() => {// 当蛇向右移动的时候，不能按左，向上的时候，不能按下，其他同理if (e.keyCode == 37 && this.dir != 'right' && !this.isStop) {this.dir = 'left'; //向左} else if (e.keyCode == 38 && this.dir != 'down' && !this.isStop) {this.dir = 'up'; //向上} else if (e.keyCode == 39 && this.dir != 'left' && !this.isStop) {this.dir = 'right'; //向右} else if (e.keyCode == 40 && this.dir != 'up' && !this.isStop) {this.dir = 'down'; //向下}}, this.speed / 2.5)
})

（3）初始化游戏（createInit）

地图使用的是一个二维数组
蛇默认是四节
墙体可以根据自己的需要进行添加

createInit() {// 地图for(let i = 0; i < this.row; i++) {this.map[i] = [];for (let j = 0; j < this.col; j++) {this.map[i][j] = 0;}}// 蛇for (let i = 4; i > 0; i--) {this.snake = [...this.snake, [1, i]];}// 墙体let wall = [];if(wall.length) {for(let i = 0; i < wall.length; i++) {let [x, y] = wall[i];this.map[x][y] = 1;}}// 渲染蛇和食物this.snakeStyle();this.foodStyle();
},

上面所说的墙体可以自定义，就是自己定义哪块有墙，可自行添加。
比如我想让地图的中间一行有强，并且中间留两个空隙走路。则可以像这样添加：

let wall = [[9, 0], [9, 1], [9, 2], [9, 3], [9, 4], [9, 5],[9, 8], [9, 9], [9, 10], [9, 11],[9, 12], [9, 13]
];

则渲染出来的效果是这样的：

（4）渲染蛇（snakeStyle）

1. 我们渲染蛇的时候要注意的是，要想蛇变得跟逼真，则需要注重的是蛇尾、蛇身、蛇头、拐弯处的图片处理
2. 每种都有四种图片处理，而其中蛇头和直行的蛇身我就直接用了css旋转来调整，蛇尾和蛇身弯处利用了图片处理，为了让蛇看起来更丝滑。

// 蛇头(3)  蛇身(4)  蛇尾(5-1 5-2 5-3 5-4)  蛇拐弯处(6-1 6-2 6-3 6-4)
snakeStyle() {// 蛇头this.map[this.snake[0][0]][this.snake[0][1]] = 3// 尾巴// 我们需要比较最后两个数据，来断定尾巴的朝向let [x1, y1] = this.snake[this.snake.length - 1];let [x2, y2] = this.snake[this.snake.length - 2];if(x1 == x2 && y1 < y2) { this.map[x1][y1] = '5-1' }if(x1 == x2 && y1 > y2) { this.map[x1][y1] = '5-2' }if(x1 > x2 && y1 == y2) { this.map[x1][y1] = '5-3' }if(x1 < x2 && y1 == y2) { this.map[x1][y1] = '5-4' }// 身体 // 先把身体都用普通身体代替for (let i = 1; i < this.snake.length - 1; i++) {let [x, y] = this.snake[i];this.map[x][y] = 4;}// 再去判断拐弯处// 我们只要判断某一段身体的前一个和后一个就行了for (let i = 1; i < this.snake.length - 1; i++) {let [a, b] = this.snake[i];let [a1, b1] = this.snake[i - 1];let [a2, b2] = this.snake[i + 1];if(((a1 < a2 && b1 > b2) || (a1 > a2 && b1 < b2)) && ((a < a1 && b == b1) || (a == a1 && b < b1))) { this.map[a][b] = '6-1' }if(((a1 > a2 && b1 > b2) || (a1 < a2 && b1 < b2)) && ((a > a1 && b == b1) || (a == a1 && b < b1))) { this.map[a][b] = '6-2' }if(((a1 > a2 && b1 > b2) || (a1 < a2 && b1 < b2)) && ((a < a1 && b == b1) || (a == a1 && b > b1))) { this.map[a][b] = '6-3' }if(((a1 < a2 && b1 > b2) || (a1 > a2 && b1 < b2)) && ((a > a1 && b == b1) || (a == a1 && b > b1))) { this.map[a][b] = '6-4' }}this.$forceUpdate();
},

在代码中我们可以看到如何判断尾巴的朝向和何时是拐弯处。

• 第一点尾巴，我们只需要去看蛇的最后两部分就行，只要判断蛇尾跟倒数第二个部分的坐标值，判断在同一方向上面，如果是左右，则x相等，比较y大小。如果是上下，则y相等，比较x大小。
• 第二点拐弯处，我们只需要判断每段蛇身的前一块和后一块即可。一共四个方位，八个判断。
• 包括向右移动向上拐弯、向右移动向下拐弯、向左移动向上拐弯、向左移动向下拐弯、向上移动向左拐弯、向上移动向右拐弯、向下移动向左拐弯、向下移动向右拐弯。

（5）渲染食物（foodStyle）

随机产生食物，并且不能随机到蛇身上、墙上

foodStyle() {// 获取所有空格let arr = [];this.map.forEach((item1, index1) => {item1.forEach((item2, index2) => {if(item2 == 0) {arr.push({ x: index1, y: index2 })}})})let randomNum = Math.floor(Math.random() * arr.length)let {x, y} = arr[randomNum];// 给食物添加样式this.map[x][y] = 2;this.$forceUpdate();
}

（6）游戏开始（playStart）

我们点击空格的时候，关闭遮罩，开始蛇移动定时器

playStart() {if (this.isOver) {this.isStart = false;alert("游戏结束！请重新开始！");return;}if(!this.isStart) {this.isStart = true;this.isStop = false;this.snakeMove()return;}if(this.isStop) {this.isStop = false;this.snakeMove()} else {this.isStop = true;clearInterval(this.movetimer);}
}

（7）蛇移动（snakeMove）

注意，关于游戏的实现都在这里面处理的
基本需要解释的，都在代码里注释了，都很简单

snakeMove() {if(this.isOver) { return; }this.movetimer = setInterval(() => {// 首先定义一个行x 和 列y 坐标，存放下一步将要走的格子let x = null;let y = null;// 判断蛇的方向switch (this.dir) {case 'right':x = this.snake[0][0]; 		// 如果往右移动，则行不变，列++y = this.snake[0][1] + 1;break;case 'down':x = this.snake[0][0] + 1;y = this.snake[0][1];break;case 'left':x = this.snake[0][0];y = this.snake[0][1] - 1;break;case 'up':x = this.snake[0][0] - 1;y = this.snake[0][1];break;}// 撞到墙// 判断是否超过row、col临界值if(x < 0 || x > this.row - 1 || y < 0 || y > this.col - 1 || this.map[x][y] == 1) {console.log('撞到墙了')this.isOver = true;clearInterval(this.movetimer);return;}// 撞到自己了// 判断头部是否与身体其他部位重合let arrX = this.snake.map(item => item[0]);let arrY = this.snake.map(item => item[1]);let bodys = [4,'5-1','5-2','5-3','5-4','6-1','6-2','6-3','6-4'];if(arrX.includes(x) && arrY.includes(y) && bodys.includes(this.map[x][y])) {console.log('撞到自己了')this.isOver = true;clearInterval(this.movetimer);return;}// 如果什么都没撞到，则需要判断是否吃到苹果了// 首先无论有没有吃到苹果，都在蛇数组开头加一节this.snake.unshift([x, y]);// 如果没吃到，则就会把最后一个尾巴清掉if (this.map[x][y] != 2) {const [a, b] = this.snake.pop();this.map[a][b] = 0;} else {// 如果吃到了，那就不用减去最后一个，相当于直接把苹果变成了蛇头this.score += 1;this.foodStyle();}// 重新渲染一下蛇，也就是更新一下蛇最新的位置this.snakeStyle();		}, this.speed);
}

最后

游戏整体不算太难，需要优化的地方还是有的，本次游戏用来练手、休闲还是可以的。
附上完整代码：
张大炮 - 《丛林贪吃蛇》

喜欢游戏的还可以看看我的其他游戏文章。
《俄罗斯方块》
《数字华容道》
《扫雷》
《疯狂斗兽棋》
《人机五子棋》

谢谢观看！