canvas之贪吃蛇

这次我们用canvas来制作一个简单的贪吃蛇游戏。我们需要学习了解canvas的基础知识和如何来创建矩形。

1、游戏需要的游戏

(1)蛇

(2)食物

(3)食物被吃掉后随机位置出现

(4)食物不能随机出现再蛇身上

(5)蛇能动，碰到食物就变长

(6)蛇头碰到蛇身和碰到墙就结束

2、游戏思路

(1)要有蛇(画蛇)

a.蛇头

b.蛇身

(2)让蛇动起来

a.默认的开启游戏的时候有一个方向

b.键盘能控制方向

c.animate定时器

(3)有食物随机投放

a.产生随机的位置

b.判断位置是否在蛇头或者蛇身上，如果在重新产生位置，如果不在画食物

(4)吃食物

a.判断迟到食物碰撞检测

b.吃到食物添加蛇身

(5)判断游戏结束

a.蛇头碰到蛇身

b.蛇头碰到墙壁

3.代码

我们首先要创建一个canvas，游戏要在画布上实现，HTML部分如下：

        Document

第一步创建蛇头蛇身，添加蛇默认的运动方向

// 蛇头(准备创建的方块)的元素

function Rect(x,y,width,height,color){

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.color = color;

}

// 完善矩形绘制矩形

Rect.prototype.draw = function(){

    // 开始绘画矩形

    Draw.prototype.xt.beginPath();

    // 画笔颜色

    Draw.prototype.xt.fillStyle = this.color;

    // 填充矩形

    Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);

    // 描边

    Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height);

}

    // 构造对象蛇

    function Snake(obj){

    // 画蛇头蛇头的颜色是红色的

    this.head = new Rect(obj.canvas.width/2-20,obj.canvas.height/2-20,40,40,'red');

    //定义一个空数组存放组成整蛇的方块对象

    this.body = [];

    //表示多个身体

    // 蛇身的x比蛇头移动

    40 var x = this.head.x-40;

    // 距离y不变

    var y = this.head.y;

    // 循环创建身体默认蛇的长度是3

    for (var i = 0; i < 3; i++) {

    // 每吃一个东西蛇身会加一个蛇身的颜色是灰色的

    var rect = new Rect(x,y,40,40,'gray');

    this.body.push(rect);

    x-=40;

}

}

    // 添加蛇默认的运动方向向右

    // 公有属性，任何地方能够修改方向

    Snake.prototype.direction = 1;

    // 定义一个是否吃到食物的标记

    Snake.prototype.isEatFood = false;

    // 画蛇方法

    Snake.prototype.draw = function(){

    // 画蛇头

    this.head.draw();

    // 循环创建蛇身

    for (var i = 0; i < this.body.length; i++) {

    this.body[i].draw();

}

}

第二步让蛇动起来，里面包含风道墙壁和蛇头蛇身然后就游戏结束

// 蛇移动的方法

Snake.prototype.move = function(){

    // 检测碰撞到墙壁

    if (this.head.x<40 || this.head.y<-40 || this.head.x>$('#canvas')[0].width-40-40 ||     this.head.y>$('#canvas')[0].height-40-40) {

        return false;

    }

    // 检测蛇头与蛇身

    for (var i =0;i
        console.log(this.body[i])；

        if (isRectHit(this.head,this.body[i])) {

            return false;

        }

}

// 加一个头

var rect = new Rect(this.head.x,this.head.y,40,40,'gray');

// 添加身体开始的地方

this.body.splice(0,0,rect);

// 去掉一个尾巴,

if (Snake.prototype.isEatFood) {

    Snake.prototype.isEatFood = false;

    // 重新随机产生食物

}else{

    this.body.pop();

}

switch(this.direction){

    case 0:

        this.head.y -= 40

        break;

    case 1:

        this.head.x += 40

        break;

    case 2:

        this.head.y +=40

        break;

case 3:

        this.head.x -= 40

        break;

}

return true;

第三步食物

// 添加键盘监听

$(window).keydown(function(e){

    switch(e.keyCode){

        case 37:

        // 如果当前的方向是向右的，不能改为向左

        if (Snake.prototype.direction == 1) {

            return;

        }

        Snake.prototype.direction = 3;

        break;

        case 38:

        // 如果当前的方向是向下的，不能改为向上

            if (Snake.prototype.direction == 2) {

                return;

           }

            Snake.prototype.direction = 0;

            break;

        case 39:

            if (Snake.prototype.direction == 3) {

                return;

            }

            Snake.prototype.direction = 1;

            break;

case 40:

            if (Snake.prototype.direction == 0) {

                return;

            }

            Snake.prototype.direction = 2;

            break;

    }

})

// 随机产生食物

function randFood(snake){

    // 是否在蛇身上

    isInSnake = true;

    while(isInSnake){

        // 产生两个位置

        x,y var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;

        var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;

        // 创建食物矩形

        var food = new Rect(x-20,y-20,40,40,'green');

        isInSnake = false;

        // 判断食物是否在蛇身

        // 是否是蛇头

        if (isRectHit(food,snake.head)) {

            isInSnake = true;

            continue;

        }

        // 是否是蛇身

        for (var i=0; i < snake.body.length; i++) {

            if (isRectHit(food,snake.body[i])) {

                    isInSnake = true;

                    break;

            }

        }

    }

    return food;

}

// 产生随机数的函数也就是随机产生食物

function getRandPosition(min,max){

    return Math.round(Math.random()*(max-min)+min);

}

// 判断矩形是否重合

function isRectHit(rect1,rect2){

    var R1_min_x = rect1.x;

    var R1_min_y = rect1.y;

    var R2_min_x = rect2.x;

    var R2_min_y = rect2.y;

    var R1_max_x = rect1.x + 20;

    var R2_max_x = rect2.x + 20;

    var R1_max_y = rect1.y + 20;

    var R2_max_y = rect2.y + 20;

// 两个图形的最大边界和最小边界就是食物和蛇头的碰撞

    var min_x = Math.max(R1_min_x,R2_min_x);

    var max_x = Math.min(R1_max_x,R2_max_x);

    var min_y = Math.max(R1_min_y,R2_min_y);

    var max_y = Math.min(R1_max_y,R2_max_y);

    if (min_x
        return true;

    }else{

        return false;

    }

}

var draw = new Draw($('#canvas')[0]);

//创建一个绘图的实例对象

draw.main();

//调用main绘制图像

});

4、效果图如下：

以上是贪吃蛇游戏的全部代码，虽然代码很详细但大家还需要认认真真理解，希望本文对大家有所启发，不懂的地方可以问我。