十八岁花季少女重出江湖 只为驯服一条贪吃蛇（附代码）

目录

前言

实现思想

蛇和食物是怎么产生的？ 

蛇是怎么构成的？

 蛇是怎么移动的？

 蛇是怎么吃食的？

怎么判断蛇die？

控制蛇的速度

程序全代码

总结

---

前言

     快来看！ 十八岁花季少女重出江湖！一举拿下一条贪吃蛇！贪吃蛇可以说是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

总结

      学习的过程总是痛苦的，但是未来总是光明的。贪吃蛇这个项目就是写完一遍以后就觉得不是很难了，一点点消化知识，学到就是赚到。我们一起雕刻自己叭~