canvas实现贪吃蛇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style type="text/css">
        .game_container{
            background-color: #F0F8FF;
            margin-left: 100px;
            text-align: left;
            width:200px;
        }
        #drawing{
            background-color: #D1EEEE;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
<body>
    <div class="game_container">
        <canvas id = "drawing" width="500" height="500">浏览器不支持</canvas>
    </div>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("drawing");
    var context = canvas.getContext("2d");

    //绘制canvas网格
    function drawGrid(){
        context.lineWidth = 0.3;
        var width = canvas.width;
        var height = canvas.height;
        for(var i = 1;i < width/10;i ++){
            context.moveTo(i*10,0);
            context.lineTo(i*10,height);
        }
        for(var j = 1;j < height/10;j ++){
            context.moveTo(0,j*10);
            context.lineTo(width,j*10);
        }
        context.stroke();
    }
    //方块的制作方法
    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(){
        context.beginPath();
        context.fillStyle = this.color;
        context.rect(this.x,this.y,this.width,this.height);
        //context.arc(this.x,this.y,this.width/2,0,Math.PI*2);
        context.fill();
        context.stroke();
    }

    //蛇
    function Snake(){
        //组成蛇的方块对象
        var snakeBodyArray = [];
        //蛇初始化
        for(var i = 0;i < 4;i ++){
            var rect = new Rect(i*10,10,10,10,'green');
            snakeBodyArray.splice(0,0,rect);
        }
        var snakeHead = snakeBodyArray[0];
        snakeHead.color = 'red';
        //保存蛇头 蛇身  方向
        this.head = snakeHead;
        this.snakeArray = snakeBodyArray;
        this.direction = 39;
    }
    //画蛇的方法
    Snake.prototype.draw  = function(){
        var snakeArray = this.snakeArray;
        for(var i = 0;i < snakeArray.length;i ++){
            snakeArray[i].draw();
        }
    }
    //蛇移动的方法  跟新当前蛇的组成数组
    Snake.prototype.move = function(){
        /*********判断是否碰撞***********/
        //撞墙的方法
        if(
            (this.head.x + this.head.width) >= canvas.width ||
            (this.head.y + this.head.height) >= canvas.height ||
            (this.head.x) <= 0 ||
            (this.head.y) <= 0){
            clearInterval(gameHandle);
            return;
        }
        //撞上自身的方法(避开蛇头与蛇头比较的情况)
        for(var m = 1; m < this.snakeArray.length; m ++){
            var bodyItem = this.snakeArray[m];
            if(bodyItem.x == this.head.x && bodyItem.y == this.head.y){
                clearInterval(gameHandle);
                return;
            }
        }
        /*********贪吃蛇的移动方法**********/
            //蛇移动   删除最后面的一个方块   在蛇头后面添加一个方块  蛇头向前移动一格
        var rect = new Rect(this.head.x,this.head.y,this.head.width,this.head.height,'green');
        //先添加一个方块(判断是否吃到食物,如果吃到,就不弹出数组最后一个,否则弹出最后一个)
        this.snakeArray.splice(1,0,rect);

        /**********判断蛇是否吃食物***********/
        if(this.head.x == food.x && this.head.y == food.y){
            //重新生成食物
            food = createSnakeFood();
        }else{
            this.snakeArray.pop();//弹出最后一个
        }
        //设置蛇的运动方向  37左 38上  39右  40下
        switch(this.direction){
            case 37:
                this.head.x = this.head.x - this.head.width;
                break;
            case 38:
                this.head.y = this.head.y - this.head.height;
                break;
            case 39:
                this.head.x = this.head.x + this.head.width;
                break;
            case 40:
                this.head.y = this.head.y + this.head.height;
                break;
            default:
                break;
        }

    }
    //获取两个数之间的随机数
    function generateRandom(min,max){
        var range = max - min;
        var r = Math.random();
        return Math.round(r*range + min);
    }
    //生成蛇的食物
    function createSnakeFood(){
        var isFoodInBody = true;
        var rect;
        while(isFoodInBody){
            isFoodInBody = false;
            var x = generateRandom(0,canvas.width/10 - 2);
            var y = generateRandom(0,canvas.height/10 - 2);
            rect = new Rect(x*10,y*10,10,10,'yellow');
            var snakeArray = snake.snakeArray;
            for(var i = 0;i < snakeArray.length; i ++){
                if(snakeArray[i].x == rect.x && snakeArray[i].y == rect.y){
                    isFoodInBody = true;
                    break;
                }
            }
        }
        return rect;
    }
    //键盘的事件监听  37左 38上  39右  40下
    document.onkeydown = function(event){
        switch(event.keyCode){
            case 37:
                if(snake.direction !== 39){
                    snake.direction = 37;
                }
                break;
            case 38:
                if(snake.direction !== 40){
                    snake.direction = 38;
                }
                break;
            case 39:
                if(snake.direction !== 37){
                    snake.direction = 39;
                }
                break;
            case 40:
                if(snake.direction !== 38){
                    snake.direction = 40;
                }
                break;
            default:
                break;
        }
        event.preventDefault();
    }

    //游戏启动
    var snake = new Snake();
    var food = createSnakeFood();
    food.draw();
    snake.draw();
    var gameHandle = setInterval(function(){
        context.clearRect(0,0,canvas.width,canvas.height);
        food.draw();
        snake.move();
        snake.draw();
    },300);
</script>
</html>
猜你喜欢
