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);    }}

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