十八岁花季少女重出江湖 只为驯服一条贪吃蛇（附代码）
目录
前言
快来看！ 十八岁花季少女重出江湖！一举拿下一条贪吃蛇！贪吃蛇可以说是JavaScript的必学关卡啦，但是作为小白来无从下手啊！今天我就用这篇博客来给我的宝贝们讲解一下怎么用JavaScript实现贪吃蛇！先给大家展示一下效果！
这是整个程序的视频链接 原生js贪吃蛇游戏实战开发_哔哩哔哩_bilibili ，只是视频比较长但是讲解的还是很详细的；我自己的多添加了一个难度的设置，根据不同的难度的蛇运动的速度就会不同。我觉得文字始终是没有视频讲解的更清楚的，所以我简述实现过程，但是给大家详细讲解一下控制蛇的速度。
实现思想
作为小白都想着它是整体移动的，但是！我们需要把蛇的每个结构分开，就是蛇不是一个整体，分为蛇头、蛇身、蛇尾。而我们的游戏界面并不是一个空白，它是由N个小个子组成的，而蛇的每个部分就是在里面的一个格子里面。如下图所示，每一个部分就是一个格子包括蛇和食物都是这样子的。
蛇和食物是怎么产生的？
我们生成每一个部分都需要构建一个20*20的小方块，可以转食物、蛇头、蛇身。同时需要出传递一个参数控制生成的样式，这个在css里面构建就可以了。我们同时在整个页面创建了一个新的坐标系，一个坐标的长度和宽度都为20px。
蛇是怎么构成的？
蛇是通过链表实现的，在构建蛇的时候就搭建了蛇的链式结构。蛇的链式结构如下图所示：
蛇是怎么移动的？
我们已经知道蛇是通过链表组成，所以两个部分之间是必有联系的。我们需要得到蛇头的下一个位置，让蛇头的位置更新。原来蛇头的位置创建一个新的方块，放在原来蛇头位置，与此同时删掉最后一个方块并更新链表。如下图所示：
蛇是怎么吃食的？
将食物的坐标和蛇头即将去的下一个位置的坐标进行对比。如果是相同的，食物更新坐标（注意食物的坐标不能出现在蛇身上），同时不需要删除原来的蛇尾，只需要添加新的身体即可，这样子蛇就会变长。
怎么判断蛇die？
蛇死掉就是两种情况：撞墙和撞自己。
判断是不是撞墙了？根据蛇头要去的下一个位置就可以知道。下一个位置为：（列数-1）或者（行数-1），此时蛇都是撞墙的情况。即可判断为蛇死掉了。为什么列数和行数需要-1，因为是以坐标的左上角去定的位置，蛇头本身有20px的宽高，不减就会进墙里面。
判断是不是撞自己？我们在初始化的时候需要一个数组存储蛇每个部分的位置，此时只需要将数组和蛇即将去的下一个位置进行对比，如果是蛇的身体，说明撞上了，即蛇死了。
控制蛇的速度
我这里定义了一个全局变量fast，把定时器的固定速度改为fast。在进入游戏的时候，我们需要点击不同盒子来控制fast的值，值越大越慢。我的设置如下所示：
想法是很简单的，但是需要注意的是，点击事件是异步进程，会放在任务队列里面，所以我们不能把fast赋值后的判断放在click事件外面。否则就fast就会一直处于初始值，以至于无法改变速度。（后面有整体代码）
for (var i = 0; i < difficulty_spans.length; i++) {
var index;
difficulty_spans[i].setAttribute('index', i);
difficulty_spans[i].addEventListener('click', function () {
difficulty.style.display = 'none';
startBtn.parentNode.style.display = 'block';
index = this.getAttribute('index');
//必须把判断fast写在点击事件里面
if (index == 0) {
fast = 300;
} else if (index == 1) {
fast = 200;
}
else {
fast = 100;
}
});
//不能放在这个位置
}程序全代码
因为代码比较长，我就放在网盘里面了，需要的小伙伴自行下载。
链接：https://pan.baidu.com/s/1lRe14mblOCmHbFxzA_aHbg
提取码：zmty
总结
学习的过程总是痛苦的，但是未来总是光明的。贪吃蛇这个项目就是写完一遍以后就觉得不是很难了，一点点消化知识，学到就是赚到。我们一起雕刻自己叭~