如何用原生 JS，快速写一个贪吃蛇小游戏

,贪吃蛇算是小游戏里面比较好写的，没有什么难点，基本上需要实现的功能，都能很顺利的用代码敲出来。,,仍然是用 16 * 16 的二维数组来绘制，对这个数组进行遍历。第一层遍历的时候创建 tr，第二层遍历的时候创建 td。然后添加一些 CSS 样式，游戏区域就写好了。,游戏元素的话一共有 3 个，蛇头，身体和苹果。就用 3 个构造函数来生成坐标，以及给对应坐标的那个对象里面添加不同的属性。用构造函数写既方便查找，也方便修改。然后写个渲染函数，格子里面对应的不同的属性，就渲染出不同的样式。,移动功能要分两个步骤来写。一个是蛇头的移动，一个是身体的移动。贪吃蛇的身体它不是一个整理，是不能写成一块的。蛇头动的时候，身体它得扭来扭去，这才像个蛇。,蛇头移动很简单，上下左右键对应着蛇头 X 和 Y 两个值的加减。X 和 Y 超出范围，代码就会报错。就可以直接用 try catch 来判断边界。报错了就说明出界了，直接走 catch 的游戏结束。,,蛇身体怎么移动，是身体里的每个元素都往前移动一格吗，显然不是。仔细观察你会发现，蛇移动时，身体的中间部分其实是不动的。动的只有最前端和最末端的两格。也就是说蛇移动时，其实就是把身体最末端的格子移动到了身体最前端，其他的都不需要动。前面声明的身体元素数组就是这个时候用的。把身体的最后一个元素移动到头部，同时数组里的最后一个元素也要移动到最前面去。,,写键盘事件的时候要加一个判断，让这个蛇只能够相对它自身左右移动。不能掉头，也不能向前冲，向前冲很容易就撞到墙了。,吃苹果功能分为 3 个步骤,1.判断头部和苹果有没有重合，重合的话，就让这个苹果消失，让分数 +1。,2.生成随机坐标来渲染苹果，判断一下这个坐标上是否与蛇身体重合了，重合的话就要重新生成坐标。,3.生成一个新的身体实例，并且把这个新实例添加到身体数组中。,和吃苹果的逻辑一样，就判断头部和身体是不是重合的。,自动移动可以通过间歇函数来实现，然后不能单纯的在间歇函数的回调里面写上下左右的某一个，要判断一下蛇当前的移动方向是什么。然后来一个分数越高速度越快的功能。,这两个比较简单，就一起说了。暂停功能就是让定时器停止，并且让flag变量变为false。这样就不能再去控制蛇了。这个游戏一共有256个格子，胜利的条件就是身体有255个元素，因为要减去一个头部。,游戏到这里就写完了，代码虽然看起来多，但是并没有什么难的地方，想到就能写。唯一麻烦一点的就是那个身体的移动，相通了就很简单了。,,