基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏

近重要在研究OAuth2，等demo完成了，会给大家来一个专题分享。

看到我身边的一个同事在玩 蛇蛇争霸 感觉蛮有意思的，这里找了一个 贪吃蛇的游戏 分享给大家。

按理说canvas与其应用是老生常谈了，可我在准备阶段却搜索不到有用的资料(不是代码！)，所以说呢，只能自力更生.

首先是大致要考虑的东西：

1.要有蛇(没蛇怎么叫贪吃蛇)。

2.然后要有地图(蛇是不能上天的)。

3.不能水平\垂直掉头(如果想掉头，需要至少变换方位并且至少移动一格才可)。

4.食物(不然怎么贪吃)。

5.吃了食物要变长(这才是精髓)。

PS：~现在我回想起来，当时的确只想到这么多(⊙﹏⊙)

怎么做呢？从大到小，先画个矩形作地图，可我觉得太丑，于是花了一张图出来：

context.beginPath();

var bgImg = new Image();

bgImg.src = "img/background.png";

context.drawImage(bgImg, 0, 0, 600, 600);

context.closePath();

现在我们有地图了

地图上好像缺点什么……没错就是礼物，所以我们现在生成礼物，那么问题来了：礼物最多有几个、生成位置、何时生成。

我这里暂时定义为：最多2个、随机位置生成、当礼物个数小于2时生成至2个。

接下来就很简单了，上图中，允许蛇活动的范围是14颗树(周围两颗树是墙)，然后16颗树=600px，很容易我们得到每格多宽~

所以呢，我们只需要定义一个随机生成1-14整数的方法就可以很轻松找到应该生成的位置：

//随机数

function selectfrom() {

return Math.floor(Math.random() * 14 + 1);

}

然后再用求出的数乘以每一格子的宽度，即可求出生成的具体X坐标，因为是正方形，所以Y也一样：

var x = selectfrom() * (600/16);

var y = selectfrom() * (600/16);

并且每得到一组礼物坐标后，都需要存储在一个数组内(一会儿有大用处)，至于画矩形太基础我就不说了。

And Now，我们有了礼物，有了地图ÿ