使用前端原生 js，贪吃蛇小游戏
2021-07-20 16:07
YPE html>
好久好久，真的是好久好久没来写过了，因为最近有点小忙。不过即使是忙，也也还是写了两个小游戏，其中一个就是这个，贪吃蛇啦。
算是一个小练手了，这个是在有点太简单了，只是第一次写这种小游戏，还是零零星星花了三五天时间，下面就是这个小游戏的gif小动画，比较简单，对比过网上其他用来写出来练手的贪吃蛇作品，这个在颜值还是功能上，都还是不错的，霍霍。
这里讲解一下功能：
- 空格控制开始和暂停。
- 方向键控制移动方向。
- Q 键加速，再按一次恢复常规速度(在加速状态时，按下或者方向键，或者吃到了白色小食物，速度自动恢复正常)。
这次我研究了 github，一个用来管理代码版本的国外网站，不过使用它不需要FQ，它的一个功能，就是可以用来展示网站，比如我就把贪吃蛇放在里 github 中，可以点击后面的链接访问，也就是可以直接玩耍：点击这里打开贪吃蛇
想描述一下技术要点。。。发现有点小忘了，不过一个难点还是记得的，当蛇的身子比较长后，容易和自己挨住，会连成一块，看上去很不方便，所以我在中间添加了这条缝隙，如下图所示，为添加前和添加后的效果：
这条缝隙的添加还是比较麻烦的，我的思路是，给组成蛇身的每个 li 元素小块，都设置个 1px 的border背景色边框，接着每一个 li 的后面跟一个宽度为 2px，高度和 li 等高的 span 标签，背景颜色和li相同，再通过css设置好位置，正好可以补上蛇身中两个正常相连的 li 小块之间，那个 2px 的缝隙，为什么是 2px 呢？因为前一个 li 和后一个 li，各都有 1px 的 border。
源代码也放在下面吧，免得以后啥时候我改了 github 配置，上面那个链接不能使用了。
贪吃蛇 点击空格开始或暂停
可通过WASD或者方向键控制方向
可通过回车键或者Q加速
当改变方向,或者吃到小球,速度自动恢复正常
以下为每局吃掉的小球个数