一款简单贪吃蛇游戏开发详解（下）

上篇讲到SnakeGame，SnakeGame类算不上某一种结构抽象， 它仅仅是一组功能的封装， 其中包括人机交互事件、将数据结构转换成界面和一系列组成游戏的功能。此类比较复杂，就不以讲解之前两个类的方法讲解了。我们从类的实例化为入口开始讲解，然后再逐步扩展至类中的其它方法和属性。

var game = new SnakeGame();

实例化对象，调用构造函数后，类的几个属性被声明或初始化。

snake 也就是Snake类的实例

moveTimer 使蛇身运动的setTimeout函数的返回值， clearTimeout此值后，表示游戏暂停

randomTimer 随机产生食物的setInterval函数的返回值，clearInterval后停止生成食物，表示游戏暂停

foods 食物，因为会有多个食物产生，因为初始化为数组来存放食物

status 游戏状态，初始化状态为暂停中

context 游戏界面的canvas对象

self 没有表示实例自身， 跟游戏不相关

onEatOne 并不是属性， 而是游戏的一个事件， 当蛇吃到食物时， 此函数（事件）会被调用以用来通知监听者

game.initialize("snake");

初始化游戏，initialize方法的参数是游戏界面的canvas的元素ID，这个方法的细节如下

执行的操作分别是

1. 实例化蛇的第一个节点，事实上刚开始也只有一个节点，位置设置在界面的中间。
2. 随机生成一个方向并设置
3. 实例化Snake类，以head（第一个节点）作为构造函数参数
4. 引用canvas，获取canvas的context对象

至此，游戏已经初始化完成，然而，此刻的游戏是静止的，我们还需要调用start方法让游戏开始

此方法执行的操作分别是

1. 将游戏的状态设置成 GAME_START常量的值（表示游戏开始）
2. 让蛇身持续移动
3. 每5秒生成一个食物
4. 绑定交互事件，也就是我们用键盘的方向键上下左右控制蛇游动的方向的事件

先看被setTimeout调用的move方法

1. 方法里面还有一次setTimeout调用，起的到作用和setInterval相同
2. 设置蛇游动的方向
3. 调用蛇的move方法移动
4. 获得蛇头的位置，检查它是否与物品的位置重叠，假如重叠那么表示蛇吃到了食物，因为会调用蛇的addNode方法为蛇增加一个结点，并且触发onEatOne事件用来通知外部的事件监听，再将初吃掉的食物从食物列表中拿掉
5. 判断游戏是否结束，假如没结束那么就执行draw方法将数据结果渲染至游戏界面

再来看 computeMoveInterval 方法，这个方法是setTimeout的第二个参数，在这里表达的意思就是定时执行move方法的时间间隔。

随着游戏的进行，游戏的级别会增加，随着级别增加， 这个值越小， 也就是说move方法被执行的频率就越高，因此蛇游动的速度会越快， 游戏难度也就越大。

createFood每5秒被调用一次生成一个食物

蛇身体所占的位置和已有食物的位置被排除掉，显然食物不能生成在已被占用的位置上。

最后，我们来讲一下draw方法，它的作用是将游戏的数据结构转换为可视化界面

将游戏结构转换成draw方法可用的数据结构还需要调用两个方法，分别是getMap和arrayToMap

arrayToMap的作用其实是将一个一维数组转换为二维数组（并不是真正的二维数组，但是为了方便表达就借用二维数组这种结构），只是JavaScript的二维数组表示的有点奇葩，是一个map，所以这个函数的名称就被命名为arrayToMap

getMap函数的逻辑如下

1. 建一个二维数组，元素个数等于TRANSVERSE * VERTICAL
2. 获取蛇身所占的位置列表，转换成二维数组
3. 获得食物所占的位置列表，转换成二维数组
4. 通过null、snake、food三种值区分空、蛇身节点、食物

最终的数组结构从可视的角度来表示大概是这个样子

[null,null,null,null,null,

null,null,null,food,null,

null,null,null,null,null,

null,null,food,null,null,

null,null,snake,snake,null,

null,null,snake,null,null]

这个结构会随着move方法的调用而不断变化， draw方法就不断的将数据结构渲染至canvas上，整条蛇因此也就动了起来。

最后我们来看bindEvent方法

这个方法很简单，就是用来监听方向键的事件，然后控制蛇的方向以达到操作游戏的效果。

至此，整个游戏的逻辑也就开发完成了。麻雀虽小，但五脏俱全，这个游戏玩法虽然很少，但确实是一个正儿八经的贪吃蛇游戏。