详解vue.js实现贪吃蛇游戏

贪吃蛇是一款经典的h5小游戏，对于许多入门js的同学来说这是一个很好的练手项目，可以锻炼思维并且更熟悉js与视图层的交互。网上普遍的做法都是用原生js实现的，很少有用框架来实现的。所以我试着用vue.js做了出来，在难度和代码量上确实比我之前用原生js做的小了点，下面讲解我的每一步思路和步骤:

Step 1

首先先创建棋盘

先创建一个大的容器，然后每行20格，共20行填上小格子。这里稍微计算一下高宽，用两层for循环实现。因为之后要频繁对dom结点操作，所以用ref钩住，调用方式为

this.$refs.grid[index]

html

<div class="board">
<div v-for="(i,index) in 20" :key="index">
<div class="commonGrid" v-for="(j,index) in 20" ref="grid" :key="index">
</div>
</div>
</div>

.board {
width: 300px;
height: 300px;
flex-flow: row;
border: 1px solid black;
}
.commonGrid {
float: left;
width: 14px;
height: 14px;
border: 0.5px solid rgb(214, 125, 125);
}
.snakeGrid {
background-color: red;
}
.eggGrid {
background-color: yellow;
}

Step2

好了，有了棋盘，我们要把蛇和蛋放进去了吧。思路是定义一个数组，每个对象包含一个格子的行、列，然后再把蛇渲染到棋盘上。还需要分辨一下头尾。下标为0的对象是头，最后一个为尾，一进入页面就默认生成一条蛇，蛋也是如此。
在data里定义全局变量 snake: [],egg:{}

created() {
//初始化蛇身,下标第一位是头，最后一位是尾
for (let i = 4; i > 0; i--)
this.snake = [
...this.snake,
{
row: 2,
column: i + 1
}
];
},
mounted() {
this.mountSnake()
this.createEgg()
}

在methods里定义渲染蛇和蛋的函数

mountSnake() {
//forEach循环，改变对应格子颜色
this.snake.forEach(body => {
// 由于refs是一维数组，所以要转换一下:行数*20 + 列数就是对应的格子
this.$refs.grid[body.row * 20 + body.column].setAttribute(
"class",
"commonGrid snakeGrid"
);
});
},
createEgg(){
let randrow = null
let randcolumn = null
while(true) {
randrow = Math.floor(Math.random()*20) //生成0-19的随机数
randcolumn = Math.floor(Math.random()*20)
// 不能生长在蛇的身上
if(this.notInSnake(randrow, randcolumn))
break
}
this.egg = {
row: randrow,
column: randcolumn
}

this.$refs.grid[randrow * 20 + randcolumn].setAttribute("class", "commonGrid eggGrid")
},
notInSnake(row,column) {
let flag = false
this.snake.forEach(item => {
if(item.row != row && item.column != column) {
flag = true
}
})
return flag
},

可以看到棋盘上躺着一条蛇啦和一个蛋啦

Step3

第三步是最难的一步。要让蛇动起来，首先要有方向，然后设定定时器，每次循环判断蛇的方向，然后往该方向前移一格。而改变方向需要一个间隔很短的定时器，以判断玩家是否按键盘改变方向了。
data

data() {
return {
pauseButton: false,
snake: [],
dir: 'right', // 初始化方向
moveTimer: null,
dirTimer: null,
};
},

methods
timer会返回一个计时器对象的id值，可以用来暂停时清除定时器。

start() {
// 点击'开始游戏'的事件处理
this.pauseButton = true;	// 暂停
this.moveTimer = this.setTimer()
this.dirTimer = this.changeDir()
},

这里判断方向需要一些逻辑思维，在浏览器中按f12查看每个格子的信息。可以发现行数是从上往下递增，列数是从左到右递增的。
所以每次判断 当方向往右时，创建一个新对象，行数为头部的行数，列数为头部的列数+1，放入snake[0]，再取出尾部。以此类推。详见代码

setTimer() {
return setInterval(() => {
let newRow = null;
let newColumn = null
switch (this.dir) {
case "right":
newRow = this.snake[0].row;
newColumn = this.snake[0].column + 1;
this.snake.unshift({
row: newRow,
column: newColumn
});
break;
case "up":
newRow = this.snake[0].row - 1;
newColumn = this.snake[0].column;
this.snake.unshift({
row: newRow,
column: newColumn
})
break;
case "left":
newRow = this.snake[0].row;
newColumn = this.snake[0].column - 1;
this.snake.unshift({
row: newRow,
column: newColumn
})
break;
case "down":
newRow = this.snake[0].row + 1;
newColumn = this.snake[0].column;
this.snake.unshift({
row: newRow,
column: newColumn
})
break
}
if(!this.judgeEgg()) //判断是否吃到蛋
{
const delItem = this.snake.pop()
this.$refs.grid[delItem.row * 20 + delItem.column].setAttribute(
"class",
"commonGrid"
)
}
this.judgeFail()
this.mountSnake()
}, 200)
},
changeDir() {
return setInterval(() => {
document.onkeydown = event => {
const e =
event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 37 && this.dir != 'right') {
// 按 左
this.dir = "left"
} else if (e && e.keyCode == 38 && this.dir != 'down') {
// 按 上键
this.dir = "up"
} else if (e && e.keyCode == 39 && this.dir != 'left') {
// 按 右键
this.dir = "right"
} else if (e && e.keyCode == 40 && this.dir != 'up') {
//按 下键
this.dir = "down"
}
this.mountSnake()
};
}, 10);
},

可以看到，蛇已经会动了

Step4

接下来要实现吃蛋功能。在setTimer()可以看到，if（!this.judgeEgg()）语句就是判断蛇的头部是否碰到蛋了，如果碰到了，尾巴就不用减去了，这样就实现了长度+1,并且要重新生成一个蛋

judgeEgg() {
let flag = false
this.snake.forEach( body => {
if(body.row === this.egg.row && body.column === this.egg.column) {
flag = true
this.createEgg()
this.score ++
}
})
return flag
},

Step5

离成功之差一步了！就是要判断失败条件，也就是撞到自己或者墙壁就算输。

judgeFail() {
// 判断是否吃到自己,只需判断新加入的那一块格子是否与身体重叠
for (let i = 1; i < this.snake.length ; i++){
if(this.snake[0].row === this.snake[i].row
&& this.snake[0].column === this.snake[i].column) {
this.fail()
return
}
}
// 判断是否撞到墙，只需判断新加入的那一块格子是否越界
if (this.snake[0].row > 19
|| this.snake[0].row < 0
|| this.snake[0].column > 19
|| this.snake[0].column < 0)
this.fail()
},
fail() {
this.pauseButton = false
clearInterval(this.moveTimer)
clearInterval(this.dirTimer)
this.failFlag = true
},

finally

按照前五步的思路走，就可以实现贪吃蛇小游戏了！
最后就是把样式优化一下，增加点功能 如计算得分、开始/暂停、失败弹框、调整速度等。
总的来说难度中等，考验了对js和vue的掌握程度。涉及到对es6、计时器、对象、生命周期等知识的理解和运用。还是非常不错的练手项目。
下面我把所有代码贴出来

<template>
<div class="container">
<div class="info" v-if="!failFlag">
<button @click="start" v-if="!pauseButton">开始游戏</button>
<button @click="pause" v-else>暂停</button>
<span>长度: {{score}}</span>
</div>
<div class="board" v-if="!failFlag">
<div v-for="(i,index) in 20" :key="index">
<div class="commonGrid" v-for="(j,index) in 20" ref="grid" :key="index"></div>
</div>
</div>
<div v-else class="failBox">
<img src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2872222233,2453972241&fm=26&gp=0.jpg'/>
<button @click="again">再来一次</button>
</div>
</div>
</template>

<script>
import { Message } from "element-ui";
import { setInterval, clearInterval } from "timers";

export default {
data() {
return {
pauseButton: false,
//二维数组
snake: [],
egg: {
row: Number,
column: Number
},
score: 4,
//蛇前进的方向
dir: String,
moveTimer: null,
dirTimer: null,
failFlag: false
};
},
created() {
//初始化蛇身,下标第一位是头，最后一位是尾
for (let i = 4; i > 0; i--)
this.snake = [
...this.snake,
{
row: 2,
column: i + 1
}
];
this.dir = "right"
},
mounted() {
this.mountSnake()
this.createEgg()
},
methods: {
mountSnake() {
this.snake.forEach(body => {
this.$refs.grid[body.row * 20 + body.column].setAttribute(
"class",
"commonGrid snakeGrid"
);
});
},

start() {
this.pauseButton = true;
this.moveTimer = this.setTimer()
this.dirTimer = this.changeDir()
},
setTimer() {
return setInterval(() => {
let newRow = null;
let newColumn = null
switch (this.dir) {
case "right":
newRow = this.snake[0].row;
newColumn = this.snake[0].column + 1;
this.snake.unshift({
row: newRow,
column: newColumn
});
break;
case "up":
newRow = this.snake[0].row - 1;
newColumn = this.snake[0].column;
this.snake.unshift({
row: newRow,
column: newColumn
})
break;
case "left":
newRow = this.snake[0].row;
newColumn = this.snake[0].column - 1;
this.snake.unshift({
row: newRow,
column: newColumn
})
break;
case "down":
newRow = this.snake[0].row + 1;
newColumn = this.snake[0].column;
this.snake.unshift({
row: newRow,
column: newColumn
})
break
}
if(!this.judgeEgg()) //判断是否吃到蛋
{
const delItem = this.snake.pop()
this.$refs.grid[delItem.row * 20 + delItem.column].setAttribute(
"class",
"commonGrid"
)
}
this.judgeFail()
this.mountSnake()
}, 200)
},
changeDir() {
return setInterval(() => {
document.onkeydown = event => {
const e =
event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 37 && this.dir != 'right') {
// 按 左
this.dir = "left"
} else if (e && e.keyCode == 38 && this.dir != 'down') {
// 按 上键
this.dir = "up"
} else if (e && e.keyCode == 39 && this.dir != 'left') {
// 按 右键
this.dir = "right"
} else if (e && e.keyCode == 40 && this.dir != 'up') {
//按 下键
this.dir = "down"
}
this.mountSnake()
};
}, 10);
},
judgeEgg() {
let flag = false
this.snake.forEach( body => {
if(body.row === this.egg.row && body.column === this.egg.column) {
flag = true
this.createEgg()
this.score ++
}
})
return flag
},judgeFail() {
// 判断是否吃到自己,只需判断新加入的那一块格子是否与身体重叠
for (let i = 1; i < this.snake.length ; i++){
if(this.snake[0].row === this.snake[i].row
&& this.snake[0].column === this.snake[i].column) {
this.fail()
return
}
}
// 判断是否撞到墙，只需判断新加入的那一块格子是否越界
if (this.snake[0].row > 19
|| this.snake[0].row < 0
|| this.snake[0].column > 19
|| this.snake[0].column < 0)
this.fail()
},
notInSnake(row,column) {
let flag = false
this.snake.forEach(item => {
if(item.row != row && item.column != column) {
flag = true
}
})
return flag
},
createEgg(){
let randrow = null
let randcolumn = null
while(true) {
randrow = Math.floor(Math.random()*20) //生成0-19的随机数
randcolumn = Math.floor(Math.random()*20)
if(this.notInSnake(randrow, randcolumn))
break
}
this.egg = {
row: randrow,
column: randcolumn
}
console.log(this.egg)
this.$refs.grid[randrow * 20 + randcolumn].setAttribute("class", "commonGrid eggGrid")
},
pause() {
this.pauseButton = false
clearInterval(this.moveTimer)
clearInterval(this.dirTimer)
this.moveTimer = null
this.dirTimer = null
},
fail() {
this.pauseButton = false
clearInterval(this.moveTimer)
clearInterval(this.dirTimer)
this.failFlag = true
},
again() {
location.reload()
}
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
height: 80vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.board {
width: 300px;
height: 300px;
flex-direction: row;
border: 1px solid black;
}

button {
cursor: pointer;
width: 80px;
height: 30px;
margin: 10px 20px;
}

.commonGrid {
float: left;
width: 14px;
height: 14px;
border: 0.5px solid rgb(214, 125, 125);
}

.snakeGrid {
background-color: red;
}

.eggGrid {
background-color: yellow;
}

.failBox {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
</style>