Web贪吃蛇（js）

    写这个网页版的贪吃蛇，总历时两天半，又是一写就一发不可收拾。

    游戏链接：Retro Snaker（先玩玩普通模式再试极速吧~）

    Github源码：贪吃蛇

    

    

    主要有几个想提一下的难点：

1. 首先也是写出贪吃蛇最重要的一点，就是怎么让蛇动起来。不难想到可以创建一个数组来存储蛇的每一部分身体的坐标，之后用一个move函数让蛇动起来；
2. move的原理一开始是想通过每次都把蛇的尾巴设为新的蛇头来让其移动，但发现行不通，因为毕竟是一个数组，头尾似乎是比较难融化的。于是只能按照比较常规的方法，每次都从数组的最后往前遍历，把每个的坐标都设为前一个的坐标，然后snake[0]则另外与方向变量dir相加来改变坐标，如此即实现了前进；
3. 然后再用setInterval来循环调用move，而第二个参数间隔时间，也刚好可以用来控制蛇的爬行速度；
4. 但这个时候问题就来了，游戏中要改变蛇的速度该怎么改变？我一开始直接是改变speed变量的值，发现蛇的速度根本不受影响，花了好久才知道原来是speed确实被改变了，但setInterval的第二个参数值一直没变，一直是一开始speed的值；
5. 这个时候幸好有一个与setInterval对应的clearInterval函数，用于清除循环调用，所以每次改变speed的值之前，都先clearInterval，改变后再重新setInterval即可。

    

    其实游戏的基本大概一天就可以写出来了，只是代码优化来优化去，连外观都花了不少时间，也加了一些特别的东西，比如：

• 蛇头与蛇身颜色区分；
• 计分板和等级制，速度随等级变化；
  
• 满级的时候每次屏幕上都保持有两个食物（这才是贪吃蛇！）；
• 极速模式；

    上面这些看起来似乎没什么但其实都要改动不少的，比如蛇头要不一样就得给area对象加多一个isHead属性之类。

    而极速模式是我觉得比较新奇的东西，普通模式玩久了再玩总要从头最慢的速度开始，直接一开始吃了第一个食物就满级的感觉特别爽！而这方面的实现想起来也不难，就是把速度设定为不变即可（即不改变setInterval的第二个参数）。

    还有到达一定程度就每次都有两个食物，这样就还要在快速反应中赶紧选择要吃哪一个哈哈哈。

    另外有两个没法好好解决的问题想挂出：

    一个是我本来想在按开始键后，不要那么快开始，先3,2,1一下，不然怕玩家从鼠标到键盘的过渡会比较匆忙，但关于这个3,2,1一直没法好好实现，网上的通过new Date写出来的sleep函数虽然是可以暂停，但出来的效果好烂。。跟卡住一样，也无法加倒计时提醒了。

    另一个是按键问题，这个问题在一开始的时候比较明显，蛇的速度太慢，按键却按的很快，蛇的方向还没来得及转换就立刻按了下一个方向，很容易就让蛇自己卡死了。。。为此我能做的只有在每次按键的判断之后加一个setTimeout来缓和一下，如此就不那么容易卡死，但缺点是玩家会有按键不够灵敏的抱怨。

    以上两个问题随时欢迎大神指教！！谢谢~