HTML canvas之——贪吃蛇-原创手记-慕课网

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas1 {
                background-color: gainsboro;
                box-shadow: 0 0 3px red;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas1" width="600" height="600">
            浏览器版本那么低，你咋不上天呢？
        </canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');
        //Math.PI:180°
        var deg = Math.PI / 180;
        //矩形
        function Rect(x, y, w, h, color) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
            this.color = color;
        }
        Rect.prototype.draw = function() {

            context.beginPath();
            context.rect(this.x, this.y, this.w, this.h);
            context.fillStyle = this.color;
            context.fill();
            context.stroke();
        }
        Rect.prototype.move = function() {

            switch(snake.fx) {
                case 37:
                    this.x -= this.w;
                    break;
                case 38:
                    this.y -= this.h;
                    break;
                case 39:
                    this.x += this.w;
                    break;
                case 40:
                    this.y += this.h;
                    break;
            }
        }

        //蛇
        function Snake() {
            //存储body
            this.bodyArr = [];
            //初始化运动方向
            this.fx = 37;
            //加锁，防止运动时间慢时，快速点击方向键造成反向运动
            this.update = true;
            for(var i = 0; i < 4; i++) {
                var body1 = new Rect(400 + i * 50, 300, 50, 50, "#40FF9F");
                this.bodyArr.push(body1);
            }
            this.bodyArr[0].color = "#006636";
        }

        Snake.prototype.move = function() {
            //运动时更新身体位置
            //创建一节新的蛇身
            var bodys = new Rect(this.bodyArr[0].x, this.bodyArr[0].y, this.bodyArr[0].w, this.bodyArr[0].h, "#40FF9F");
            //运动后解锁
            this.update=false;
            //在下标为1的位置插入
            //将蛇身插入到蛇头后
            this.bodyArr.splice(1, 0, bodys);
            //当蛇头碰到食物后食物更新，否则蛇尾减一
            if((food.x + food.w) == this.bodyArr[0].x && (food.y) == this.bodyArr[0].y && this.fx == 37 || 
               (food.y + food.h) == this.bodyArr[0].y && food.x == this.bodyArr[0].x && this.fx == 38 || 
                food.x == (this.bodyArr[0].x + this.bodyArr[0].w) && food.y == this.bodyArr[0].y && this.fx == 39||
                food.y==(this.bodyArr[0].y + this.bodyArr[0].h)&&food.x==this.bodyArr[0].x&&this.fx==40) {
                //更新食物
                food=createFood();

            }else{
                //删除最后一个
                this.bodyArr.pop();
            }

            this.bodyArr[0].move();
        }
        //撞墙
        Snake.prototype.pWall = function() {
            if(this.bodyArr[0].x < 0 || this.bodyArr[0].y < 0 || this.bodyArr[0].x+this.bodyArr[0].w > canvas.width || this.bodyArr[0].y+this.bodyArr[0].h > canvas.height) {
//              console.log("撞左墙了")
                return false;
            }
//          if(this.bodyArr[0].y < 0) {
//              console.log("撞上墙了")
//          }
//          if(this.bodyArr[0].x+this.bodyArr[0].w > canvas.width) {
//              console.log("撞右墙了")
//          }
//          if(this.bodyArr[0].y+this.bodyArr[0].h > canvas.height) {
//              console.log("撞下墙了")
//          }
            return true;
        }
        //撞身体
        Snake.prototype.pSelf=function(){
            var ps=true;
            for(var i=1;i<this.bodyArr.length;i++){
                var br=this.bodyArr[i].x+this.bodyArr[i].w;
                var bb=this.bodyArr[i].y+this.bodyArr[i].h;
                var hr=this.bodyArr[0].x+this.bodyArr[0].w;
                var hb=this.bodyArr[0].y+this.bodyArr[0].h;
                if(this.bodyArr[0].x<br &&this.bodyArr[0].y<bb && this.bodyArr[i].x<hr && this.bodyArr[i].y<hb ){
                    console.log(1)
                    ps=false;
                    break;
                }
            }
            return ps;
        }

        function createFood(){
            //设置一个变量判断是否出现在蛇身上（有为true）
            var flag=true;
            //while循环设置食物出现的起点
            //当食物出现在蛇身上时（flag=true）循环设置起点直到不在蛇身上出现（flag=false）
            while(flag){
                //食物的起点随机(600/50=12)
                var x=parseInt(rand(0,11));
                var y=parseInt(rand(0,11));
                //食物不能出现在身体上
                for(var i=0;i<snake.bodyArr.length;i++){
                    if(snake.bodyArr[i].x==x*50&&snake.bodyArr[i].y==y*50){
                        flag=true;
                        break;
                    }else{
                        flag=false;
                    }
                }
            }
            //创建食物对象
            var food=new Rect(x*50,y*50,50,50,"red");
            //返回食物对象
            return food;
        }
        function rand(min,max){
            return Math.random()*(max-min+1)+min;
        }

        var snake = new Snake();
        //times控制移动用时
        var times = 0;
        var food=createFood();

        var timer=null;

        function ani() {
            times++;
            if(times % 20 == 0) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                for(var i = 0; i < snake.bodyArr.length; i++) {
                    snake.bodyArr[i].draw();
                }
                snake.move();
                food.draw();
            }
            if(snake.pWall()&&snake.pSelf()){
                timer=window.requestAnimationFrame(ani);
            }

        }
        ani();
        //键盘改变运动方向
        document.onkeydown = function(e) {
            var ev = e || event;
            //没有锁的时候执行
            if(snake.update == false) {
                switch(ev.keyCode) {
                    case 37:
                        if(snake.fx != 39) {
                            snake.fx = 37;
                            snake.update=true;
                        }
                        break;
                    case 38:
                        if(snake.fx != 40) {
                            snake.fx = 38;
                            snake.update=true;
                        }
                        break;
                    case 39:
                        if(snake.fx != 37) {
                            snake.fx = 39;
                            snake.update=true;
                        }
                        break;
                    case 40:
                        if(snake.fx != 38) {
                            snake.fx = 40;
                            snake.update=true;
                        }
                        break;
                    default:
                        break;
                }
            }
        }
    </script>

</html>