canvse小游戏-贪吃蛇_canvns-CSDN博客

本文链接：https://blog.csdn.net/youyouyouyou44/article/details/82457488

思路：
* 1、分别构造方块、蛇、食物三个对象
* 2、蛇由一个一个小方块组成，食物随机生成
* 3、将蛇身的每一个方块排列放在数组中
* 4、始终是蛇头在移动方向，添加的新的方块放在蛇头的后面，然后去掉蛇尾（既最后一个小方块）
* 如果整体移动的话在拐弯的时候就麻烦了，这个方法正好
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvasOne{
            background: #cccccc;
        }
    </style>
</head>
<body>
<canvas id="canvasOne" width="800" height="600"></canvas>

<script>
    var oC = document.getElementById("canvasOne");
    var gd = oC.getContext("2d");

    /*构造一个方块*/
    function Rect(x,y,w,h,cl){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = cl;
    }

    /*添加画方块的方法*/
    Rect.prototype.draw = function (){
        gd.beginPath();
        gd.fillStyle = this.color;
        gd.fillRect(this.x,this.y,this.w,this.h);
    };

    /*构造一个蛇的对象*/
    function Snake(){
        var snakeArr = [];
        for(var i = 0; i < 5; i++){
            var rect = new Rect(i*20,0,20,20,'green');
            snakeArr.splice(0,0,rect);
        }

        var head = snakeArr[0];
        head.color = 'yellow';

        this.head = head;
        this.snakeArr = snakeArr;

        this.direction = 39;
    }

    /*添加画蛇的方法*/
    Snake.prototype.draw = function(){
        for(var i = 0;i < this.snakeArr.length; i++){
            this.snakeArr[i].draw();
        }
    };

    /*添加蛇移动的方法*/
    Snake.prototype.move = function(){

        //添加一个方块，和蛇的头部重合，然后将头部根据点击方向向前移动
        var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,'green');
        this.snakeArr.splice(1,0,rect);

        //判断蛇的头部和食物是否产生碰撞，是就重新生成一个食物，否者就删除最后一个方块
        if(Eat()){
            food = new Food();
        }else{
            this.snakeArr.pop();
        }

        //判断键盘点击的方向，改变蛇头的位置
        switch (this.direction){
            case 38:
                this.head.y -= this.head.h;break;
            case 40:
                this.head.y += this.head.h;break;
            case 37:
                this.head.x -= this.head.w;break;
            case 39:
                this.head.x += this.head.w;break;
            default:
                break;
        }

        //如果蛇的头部超出画布边界，就清除定时器，结束游戏
        if(snake.head.x > oC.width || snake.head.y > oC.height || snake.head.x < 0 || snake.head.y < 0){
            clearInterval(timer);
        }

        //如果蛇头与蛇身相撞，清除定时器，结束游戏
        for(var i = 1; i < snake.snakeArr.length; i++){
            if(snake.head.x === snake.snakeArr[i].x && snake.head.y === snake.snakeArr[i].y){
                clearInterval(timer);
            }
        }
    };

    //实例化一条蛇，初始状态
    var snake = new Snake();
    snake.draw();

    //随机生成一个食物
    var food = new Food();

    //添加定时器，让蛇移动
    var timer = setInterval(function(){
        gd.clearRect(0,0,oC.width,oC.height);
        food.draw();
        snake.move();
        snake.draw();
    },1000);

    //上右下左 38,39,40,37，为了避免蛇直接反向，在case里面需要加一个判断
    document.onkeydown = function(event){
        var ev = event || window.event;
        switch (ev.keyCode){
            case 38:
                if(snake.direction !== 40){
                    snake.direction = 38;
                    break;
                }
            case 40:
                if(snake.direction !== 38){
                    snake.direction = 40;
                    break;
                }
            case 37:
                if(snake.direction !== 39){
                    snake.direction = 37;
                    break;
                }
            case 39:
                if(snake.direction !== 37){
                    snake.direction = 39;
                    break;
                }
            default:
                break;
        }
        ev.preventDefault();
    };

    //随机数函数
    function random(m,n){
        return parseInt(Math.random()*(n-m)+m);
    }

    //生成食物函数
    function Food(){
        var food_bool = true;
        while(food_bool){
            food_bool = false;
            var foodX = random(0,oC.width/20-1);
            var foodY = random(0,oC.height/20-1);
            var rect = new Rect(foodX*20, foodY*20, 20, 20, 'green');
            for(var i = 0;i < snake.snakeArr.length; i++){
                if(snake.snakeArr[i].x === foodX && snake.snakeArr[i].y === foodY){
                    food_bool = true;
                    break;
                }
            }
        }
        return rect;
    }

    //判断食物与蛇头碰撞函数
    function Eat(){
        if(snake.head.x === food.x && snake.head.y === food.y){
            return true;
        }else{
            return false;
        }
    }
</script>
</body>
</html>

效果图：