Vue2模拟贪吃蛇小游戏
目录
一、效果展示
二、代码展示
三、原理讲解
3.1、页面创建
3.2、创建蛇与食物
3.3、移动与边界判断
3.4、吃、得分总结
二、代码展示
view的本地文件：可直接运行。
得分: {{ score }}
等级: {{ level }}
吃: {{ times }}
暂停/开始
向上
向左
向右
向下
上面代码引入的工具值：utils里的js文件
这里是刷新页面会获取的不同渐变色
// 渐变色
export const color = [
[
'linear-gradient(180deg,#FFA7EB 0%,#F026A8 100%)',
'linear-gradient(180deg,#DFA1FF 0%,#9A36F0 100%)',
'linear-gradient(180deg,#9EAAFF 0%,#3846F4 100%)',
'linear-gradient(180deg,#7BE7FF 0%,#1E85E2 100%)',
'linear-gradient(180deg,#89FEDB 0%,#18C997 100%)',
'linear-gradient(180deg,#FFED48 0%,#FD9E16 100%)',
'linear-gradient(180deg,#FFBA8D 0%,#EB6423 100%)',
],
]
三、原理讲解
3.1、页面创建
20x20方格阵：由双层for循环得到一个20x20的数组进行渲染，即代码的gameFrame()方法。
3.2、创建蛇与食物
(1)创建蛇：见initSnake()方法，通过坐标渲染。
这里的site: [9, 8, 9, 9, 9, 10]原理见下图：
(2)创建食物：见initFood()()方法，通过坐标渲染。
这里在随机生成食物位置时，要考虑食物会生成在蛇身上，导致食物看不见的情况，所以在sFood()方法里排除蛇身体的所有位置，再生成食物。
(3)统一渲染：
renderBlock(a, b, n)：a:方块 b:渲染位置 n:类型(0清除 1渲染)。通过考虑行、列进行渲染。
3.3、移动与边界判断
moveLeft()、moveRight()、moveTop()、moveBottom()四个方向的移动对应fx: -1, //方向：0左 1右 2上 3下的4个方向。
以moveLeft()方法为例：
this.over是边界判断，即是否到达矩阵的边界，this.fx是向左对应的方向(0);
在使用循环定时器时要先进行停止的条件，不然代码会一直执行；
先让蛇的第一个方块移动，后面的方块依次转化为前面的坐标，这样就会有蛇‘移动’的效果，这里方块移动一个，后面的就得少一个（即变为背景色，不然蛇身长度会一直加1，这种情况应该 在蛇‘吃掉食物’后再进行变化），这个参考move()方法；
在一个方向移动的过程中应考虑‘碰到自己’的情况，即oneself()方法，就是拿当前头部与身体对比。
3.4、吃、得分总结
在eat(i, j)方法里如果蛇头即将与食物触碰，就要考虑将食物吃掉时，把食物变成蛇的一部分，即从蛇头部插入该点，重新生成下一个食物。每吃掉一次，右侧的等级与分数就会增加，30级截止。
现在页面加载出来，蛇是运动的，通过autoMove()方法可以将运动‘暂停/开始’。
总结：目前，这个模拟游戏在向右时有一个方块会先消失，再变为正常，而且在任何一个方向‘碰到自己’/'到达边界'时就无法再触发四个方法的函数，属于bug。希望大家可以提出建议！