html5贪食蛇

原文来自林伟健个人博客

好吧，笔者最近学html5的画布有点津津乐道，总体学习完canvas后，笔者尝试做了个小游戏-《贪食蛇》，下面来讲讲整个游戏的制作流程，关于之前的学习笔记，笔者在稍后会继续更新，有需要的童鞋可以关注下（打打广告= =）：

好，先放出演示效果：[点击查看演示效果]

贪食蛇需要实现的功能：

1.一段时间生成“豆子”

2.贪食蛇吃“豆”并变长

3.贪食蛇撞墙或者撞到自己身体结束游戏

4.贪食蛇积分到一个阶段升级并加快移动速度

5.游戏结束重新开始

玩过贪食蛇游戏（应该没人没玩过吧）的童鞋都知道有这些功能，针对这些功能，有几个比较核心的问题需要先整理好头绪才能开始制作我们的游戏。

贪食蛇核心问题：

1.贪食蛇存储结构

这个很重要，一个好的存储结构，能大大提高执行效率和减低代码复杂度，这里我们只有知道贪食蛇点的存储方式，才能知道贪食蛇移动的方式。下面我有图来给大家讲解：

通过这个图解，我们知道贪食蛇是用队列存储结构，每次移动转弯的时候，其实就是不断加入转点坐标和不断移除转点坐标的过程，而且先出的肯定是队列的头一个，在贪食蛇来看就是尾部的转点。

知道这个有什么好处？好处就在于，我们在控制上，只需要对队列操作，用户按下键盘上下左右键时，就是进入一个转点；而移除时候，都只需要把第一个移除。有了这些点，Canvas画布便根据list的点和头尾点来绘制贪食蛇。

2.要知道贪食蛇方向

笔者这里说的贪食蛇方向是，我们需要知道2个东西，一个是头部到头转点的移动方向，一个是尾转点到尾巴的移动方向。为什么需要知道？如果有留意的话，其实可以发现，转点和转点之间其实是没有移动的，移动的只是：头部到头转点和为尾转点到尾巴这2个有在改变长短，如果还不清楚，可以看图：

知道这个有什么用处？我们知道，其实贪食蛇的移动是在画布上不停的绘制，点的坐标位置不停发生改变,通过上面图解我们可以知道，头部坐标和尾部坐标是在不断变化的，当我们知道头部到头转点是往哪个方向移动时候，我们可以知道头部坐标是怎么样发生改变的。同理，当我们知道尾转点到尾巴是哪个方向的话，才能准确知道尾部点坐标改变情况。

要知道，之所以要知道坐标位置，是因为贪食蛇就是一个不停重绘的过程，每一帧的贪食蛇，其实就是每个点直接的直线连接。所以当我们知道了全部点的坐 标，绘制贪食蛇是很简单的。关键是在于“移动”，怎么样移动，怎么样发生变化才是我们关心的，因此，知道上述说的关键点方向，我们才能知道点的变化，要知 道，贪食蛇往哪个方向移动，其坐标变化是不同的。又见图：

看到上面的，童鞋们可能晕菜，但是认真看的话，其实并不复杂，当我们按下键盘某个方向键时，我们可以确定了头部坐标的变化，

这是因为键盘按下方向和头部到头转点的移动方向是一致的。

而对于尾坐标来说，我们不能单单设定某个变量来确定尾转点到尾巴的方向，因为，随着贪食蛇的移动，尾转点是会被首先移除，在移除后，次尾转点（就是从尾巴开始算的第二个转点）变成为新的尾转点，而这时，尾转点到尾巴的方向已经发生了改变，因此我们确定了全部转点间的移动方向的话，在转点成为尾转点的时候，我们就可以知道是往哪个方向移动，也能确定了尾部坐标变化情况。当然，如果不存在转点的情况下，尾坐标的变化和头坐标变化是一致的。

因此总结1和2来看，我们在存储队列的时候应该也把方向存入到转点的信息上，大致的存储应该是这样的：

1.设定有头坐标hx和hy，头部到头转点的移动方向hdirect,存储队列的list,尾坐标fx和fy

2.一开始贪食蛇的移动设定为向上，因此可以确定了头部坐标变化，这时尾部坐标变化和头部一致。

3.当出现转弯时候，记录转点坐标(x,y)和移动方向hdirect这3个信息到list里，然后把hdirect重新设定为键盘移动方向。

举个栗子：

1.贪食蛇往左移动，hdirect=”left”,头部：hx– hy不变 尾部：fx–fy不变

2.当按下“上”键，list.push([hx,hy,hdirect]);hdirect=”up”,这时候，头部：hx不变，hy–，尾部坐标变化需要看尾转点到尾巴的方向，此时方向是“left”，所以尾部：fx–，fy不变。

其实为什么hdirect作为转点方向，一想便知道：贪食蛇到某点转弯了，头部方向就是随键盘按下方向移动，但是尾部还是在按原来方向移动的。

到这里，贪食蛇的核心移动的思想和算法便已经说完了。可能到这里童鞋们还是有点模糊- -，当然这要怪罪于笔者不太擅长表述的关系。

当然，关于贪食蛇还有几个问题要提下的：

1.关于游戏结束，包括了2种，撞到墙和撞到自己身体：

1.1撞到墙：其情况比较容易，判断头坐标是否在画布坐标内便可。

1.2撞到身体：这个的话需要范围，所谓范围就是循环去读取list的转点，转点之间的范围内如果存在头坐标的话便撞到身体。

2.关于“豆子”，豆子的生成和被吃掉:

2.1豆子生成：豆子生成可以使用随机数，随即生成x和y坐标，当然坐标是在canvas范围内

2.2被吃掉，头部坐标在豆子坐标范围内便被吃掉。

当然这里说在坐标范围内实现上是没什么难度，但是却存在一个问题，因为canvas的LineTo画直线时候有设定lineWidth的宽度的，因 此这里的范围是有上下限的，如：x-lineWidth/2到x+lineWidth/2,因此需要一些判断，当然整个实现上还有一些小问题，这里就不在 论述了。

本文重在讲贪食蛇实现的算法和逻辑思想，不阐述具体实现，笔者在这里再放出整个实现的源代码，童鞋们可以自行下载研究：

[点击下载源码]