简单的 JavaScript 贪吃蛇基本原理

贪吃蛇的种类很多，今天我们说的这种是由很多格子组成的。

我的要求是尽可能的简单高效。

贪吃蛇一直困扰我的是转向之后为什么后面的方块会跟着前面的方块，有人说用数组把蛇的身体存储起来，道理我都懂，但是这是个什么原理呢？

首先我们先了解一下这个游戏的地图组成：

然后用css调整一下样式

*{ margin:0; padding: 0;}
#map{margin: 40px auto;border: 1px solid #000;}
.cellDiv{border: 1px solid #000;float: left; box-sizing: border-box;}

其中box-sizing: border-box;是css3，它可以压缩内边距，不会因为边框的大小影响样式。

地图创建好就是下图的样子，每个

都有一个编号，我们可以通过这个编号控制每一个div的样式，但是因为没有使用二维数组所以需要一个公式来进行转换，如22号div的位置，写成二位数组的形式就是arr[2][1],每一行有20个div，然而22=1*20+2，写成更一般的形式就是arr[x][y]=y*20+x;有了这个公式我们就可以通过加减x、y来控制蛇了。

下面是完整代码

这个贪吃蛇有一个问题就是，键盘快速连续按下的时候会有吃到自己，网络上大多数贪吃蛇代码都没有解决这个问题，这里使用pd=true;
setTimeout(function(){pd=false;},100);

来解决这个问题。但是这并不是最好的方法，当把蛇的速度设的很慢的时候，键盘快速连续按下时，依然有机会触发bug。

后来我想了一下，把setTimeout(function(){pd=false;},100);换了一个位置，完美解决了bug。

后来我又想了一下，根本不需要什么setTimeout，直接pd=false;就行了

今天我在IE上测试了一下，不能正常运行，edge可以，Chrome也可以。