canvas 贪吃蛇实现完整代码

最新推荐文章于 2022-06-19 20:48:44 发布

18790970257

最新推荐文章于 2022-06-19 20:48:44 发布

阅读量142

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangbaile/p/5911944.html

版权

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <canvas id="myCanVas" width="1000" height="600" style="box-shadow: 10px 10px 5px black;"></canvas>

    <script src="CheckOurPeng.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var myCan = document.getElementById("myCanVas");
        var can = myCan.getContext("2d");

        var snakeLength = 5;
        // 定时器对象
        var time = null;
        // 取随机数的方法
        function rand(max, min) {
            return Math.floor(Math.random() * (((max + 1) - min))) + min;
        }
        //碰撞检测
        function checkPeng(obj1, obj2) {
            //相撞时圆心距
            var disX = obj1.w / 2 + (obj2.w / 2);
            var disY = obj1.h / 2 + (obj2.h / 2);
            //实际圆心距
            var centerX = Math.abs(obj2.x + (obj2.w / 2) - (obj1.x + (obj1.w / 2)));
            var centerY = Math.abs(obj2.y + (obj2.h / 2) - (obj1.y + (obj1.h / 2)));
            // 判断
            if(centerX < disX && centerY < disY) {
                //相撞为true
                return true;
            } else {
                return false;
            }
        }

        //蛇的行为
        function Snake() {
            this.x = -40;
            this.y = 40;
            this.w = 40;
            this.h = 40;
            this.color = "gray";
            this.speed = 40;
            // 方向
            this.left = false;
            this.top = false;
            // 默认往右
            this.right = true;
            this.bottom = false;
            // 用于装蛇的每个矩形块的信息(包括头部的)
            this.bodys = [];
        }
        //画蛇
        Snake.prototype.drawSnake = function() {
            for(var i = 0; i < this.bodys.length; i++) {
                var myRect = this.bodys[i];//初始化
                can.beginPath();
                // 头部其实就是bodys数组里最后一个元素
                if(i == this.bodys.length - 1) {
                    can.fillStyle = "yellow";
                } else {
                    can.fillStyle = this.color;
                }
                can.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);
                can.closePath();
            }

        }

        Snake.prototype.move = function() {
            if(this.top) {
                this.y -= this.speed;
            } else if(this.right) {
                this.x += this.speed;
            } else if(this.bottom) {
                this.y += this.speed;
            } else if(this.left) {
                this.x -= this.speed;
            }

            for(var i = 0; i < this.bodys.length; i++) {
                var myRect = this.bodys[i];
                if(myRect.x == this.x && myRect.y == this.y) {
                    clearInterval(time);
                    alert(1111111);

                }
            }

            if(this.x < 0 || this.x > myCan.width || this.y < 0 || this.y > myCan.height) {
                clearInterval(time);
                alert(1111111);
            }
        }


        Snake.prototype.savePosition = function() {
            // 把新移动的这个矩形的位置以及大小信息装
            // 到bodys数组里
            var posi = {
                x: this.x,
                y: this.y,
                w: this.w,
                h: this.h
            }
            if(this.bodys.length == snakeLength) {
                this.bodys.shift();
            }
            this.bodys.push(posi);
        }

        document.onkeydown = function(ev) {
            switch(ev.keyCode) {
                // left
                case 37:
                    
                    
                    if(!sna.right) {
                        sna.left = true;
                        sna.right = false;
                        sna.top = false;
                        sna.bottom = false;
                    }
                    break;
                    // top
                case 38:
                    if(!sna.bottom) {
                        sna.left = false;
                        sna.right = false;
                        sna.top = true;
                        sna.bottom = false;
                    }
                    break;
                    // right
                case 39:
                    if(!sna.left) {
                        sna.left = false;
                        sna.right = true;
                        sna.top = false;
                        sna.bottom = false;
                    }
                    break;

                    // bottom
                case 40:
                    if(!sna.top) {
                        sna.left = false;
                        sna.right = false;
                        sna.top = false;
                        sna.bottom = true;
                    }
                    break;
                default:
                    break;
            }

        }

        var sna = new Snake();


        // 食物的类
        function Food() {
            this.x = 0;
            this.y = 0;
            this.w = 40;
            this.h = 40;
            this.color = "red";
        }
        Food.prototype.draw = function() {
            can.beginPath();
            can.fillStyle = this.color;
            can.fillRect(this.x, this.y, this.w, this.h);
            can.closePath();
        }


        Food.prototype.setPosition = function() {
            
            
            this.x = rand(0, (myCan.width - this.w) / 40) * 40;
            this.y = rand(0, (myCan.height - this.h) / 40) * 40;

            for(var i = 0; i < sna.bodys.length; i++) {

                var myRect = sna.bodys[i];
                if(myRect.x == this.x && myRect.y == this.y) {
                    //  this.setPosition();
                    break;
                }
            }
        }

        var food = new Food();
        food.setPosition();

        time = setInterval(function() {
            can.clearRect(0, 0, myCan.width, myCan.height);
            sna.move();
            sna.savePosition();
            food.draw();
            sna.drawSnake();


            var a = checkPeng(sna, food);
            if(a) {

                food.setPosition();
                snakeLength++;
            }
        }, 100);
    </script>

</body>

转载于:https://www.cnblogs.com/zhangbaile/p/5911944.html

18790970257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 贪吃蛇实现完整代码

<!DOCTYPE html><head> <meta charset="UTF-8"> <title></title></head><body> <canvas id="myCanVas" width="1000" height="600" style="box-shado...
复制链接

扫一扫