HTML5 Canvas实现贪吃蛇（二）

有了一个实心圆，就可想想大致的思路了。

游戏思路

全局变量：global

浏览器类型，区别PC浏览器和手机端的浏览器，broswerType；

canvas的长和宽，paleWidth,paleHeight;

实心圆半径，radius；

蛇身前进步长，step；

蛇：snake

蛇身的组成是一个一个实心圆，所以最核心的属性就是长度，设为length；

蛇需要移动，就需要一个前进的方向，设为head；

需要在canvas中绘制蛇身，需要一系列坐标，需要一个数组来存储这些坐标，设为body；

考虑到后续可能要改变蛇前进的速度，设定速度speed；

设置一个定时移动的方法，moveTimer；

食物：food

作为游戏的一个结束条件，给食物设定一个总量，totalNum；

同时可能会放置多个食物，设定一个同时存在的食物数量concurrenctNum；

吞食一个食物之后蛇身增加的长度,energy；

同时放置多个食物时，为了控制食物数量，检测是否生成新食物，将现存食物数量保存下来，presentFoodNum；

绘制多个食物，需要数组存储食物坐标，foodsLocation；

这里有个比较关键的问题就是蛇身具体怎么动起来。首先肯定是根据重绘canvas来让它动起来的，那么就需要两次绘制中snake.body的坐标点有变化，这个变化是根据snake.head这个方向来的，这里约定：0-上，1-下，2-左，3-右。具体到坐标的变化，很直观的想法是后面一个坐标替代前面一个坐标，然后再新增一个坐标，但这样一来，是比较复杂的。我采取的做法是：

根据snake.head生成一个新的圆-newpart;

将newpat插入snake.body；

通过snake.length截取新的蛇身，完成绘制；

这样一来，算法复杂度是很小的。接下来，代码码起来。

首先，绘制边界：

c.width = global.paleWidth;
c.height = global.paleHeight;
cc.beginPath();
cc.fillStyle = "#FFFF00";
cc.lineWidth = 4;
cc.moveTo(0, 0);
cc.lineTo(global.paleWidth - 3, 0);
cc.lineTo(global.paleWidth - 3, global.paleHeight - 3);
cc.lineTo(0, global.paleHeight - 3);
cc.lineTo(0, 0);
cc.stroke();
cc.closePath();

接着，可以在点上面随机找一个绘制一个圆，同时把这个坐标放入snake.body：

var initX = Math.floor(Math.random() * (global.paleWidth + 1)) / 3 * 3;
var initY = Math.floor(Math.random() * (global.paleHeight + 1)) / 3 * 3;
var initLocation = [initX, initY];
snake.body.push(initLocation);
snake.paintCycle(initLocation, global.lineWidth, global.radius);

同时，设置一个定时方法，执行蛇的移动动作：

snake.moveTimer = setInterval(snake.move, 600);

下面构建move方法：

move: function() {
switch (snake.head) {
case 0:
var newPart = [snake.body[snake.body.length - 1][0], snake.body[snake.body.length - 1][1] - global.step];
if (newPart[1] < 0)
newPart[1] += global.paleHeight;
break;
case 1:
var newPart = [snake.body[snake.body.length - 1][0], snake.body[snake.body.length - 1][1] + global.step];
if (newPart[1] > global.paleHeight)
newPart[1] -= global.paleHeight;
break;
case 2:
var newPart = [snake.body[snake.body.length - 1][0] - global.step, snake.body[snake.body.length - 1][1]];
if (newPart[0] < 0)
newPart[0] += global.paleWidth;
break;
case 3:
var newPart = [snake.body[snake.body.length - 1][0] + global.step, snake.body[snake.body.length - 1][1]];
if (newPart[0] > global.paleWidth)
newPart[0] -= global.paleWidth;
break;
}
snake.body.push(newPart);
cc.clearRect(3, 3, global.paleWidth - 10, global.paleHeight - 10);
if (snake.body.length > snake.length) {
snake.body = snake.body.splice(1, snake.length);
}
for (i = 0; i < snake.body.length; i++) {
snake.paintCycle(snake.body[i], 5.6, 3);
}
}

这样，蛇身就会动起来了。接下来就需要设计食物了。