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

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