pannel就是我们的幕布，我们在这个里面用td标签来画上一个个的“像素点”。我们用两种样式来表现不同的对象，.body表示蛇的身体的样式，.food表示食物的样式。

我们定义了一个全局的settings用来存放全局性的变量，比如幕布的大小、蛇移动的速度和工作的线程。然后通过一个函数把幕布画了出来，最后的效果就是这样：

方向和定位

既然我们的“舞台”已经搭建完了，怎么来定义我们“演员”的位置和移动的方向呢。首先定义一个全局的方向变量，对应的数值就是我们的上下左右方向键所代表的keyCode。

我们在上面画幕布的时候通过两次遍历画出了一个类似于中学里学的坐标系，有X轴和Y轴。如果每次都用{x:x,y:y}来表示会很（mei）麻（bi）烦（ge），我们可以定义一个坐标点对象。

副咖–食物

既然定义好了坐标点对象，那么可以先来看一下简单的对象，就是我们的食物（Food）对象，上面说了，它有一个重要的属性就是它的坐标点。

既然食物有了坐标点这个属性，那么我们什么时候给他赋值呢？我们知道Food是随机产生的，因此我们定义了一个Create函数用来产生Food的坐标点。但是产生的坐标点又不能在蛇的身体上，所以通过一个while循环来产生坐标点，如果坐标点正确了，就终止循环。此外为了方便我们统一处理坐标点的样式，因此定义了一个handleDot函数。

主咖–蛇

终于到了我们的主咖，蛇。首先定义一下蛇基本的属性，最重要的肯定是蛇的body属性，每次移动时，都需要对这个数组进行一些操作。其次是蛇的方向，我们给它一个默认向下的方向。然后是食物，在蛇的构造函数中我们传入食物对象，在后续移动时需要判断是否吃到食物。

移动函数处理

下面对蛇移动的过程进行处理，由于我们每次都采用添头去尾的方式移动，因此我们每次只需要关注蛇的头和尾。我们约定数组的第一个元素是头，最后一个元素是尾。

检测函数处理

这样我们对蛇身数组就处理完了。但是我们还需要对新的头（newHead）进行一些碰撞检测，判断新头部的位置上是否有其他东西（碰撞检测）。

重新绘制

因此我们需要对Move函数进行一些扩充：

因为在Move函数处理数组的后我们的蛇身还没有重新绘制，因此我们很巧妙地判断如果是吃到食物的情况，在数组中就把原来的尾部添加上，这样就达到了吃食物的效果。同时我们定义一个rePaint函数进行页面的重绘。

游戏控制器

我们的“幕布”、“演员”和“动作指导”都已经到位，那么，我们现在就需要一个“摄影机”进行拍摄，让它们都开始“干活”。

我们给document绑定一个keydown事件，当触发按键时改变蛇的移动方向，但是如果和当前蛇移动方向相反时就直接return。最后的效果如下：

可以戳这里查看

点击这里

实现了贪吃蛇的一些基本功能，比如移动、吃点、控制速度等，页面也比较的简单，就一个table、select和button。后期可以添加一些其他的功能，比如有计分、关卡等，也可以添加多个点，有的点吃完直接GameOver等等。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。