原生js实现贪吃蛇

最新推荐文章于 2022-11-30 00:14:35 发布
qq_43059674
最新推荐文章于 2022-11-30 00:14:35 发布
阅读量701
点赞数 1
本文链接：https://blog.csdn.net/qq_43059674/article/details/86767868
版权
大家帮我看看有那能优化的不（优化：性能，用户体验）
<!DOCTYPE html>
<html>
<head>
    <title>原生js贪吃蛇</title>
    <meta carset="utf-8">
    <style>
        .start{
            width:100px;
            height:100px;
            border-width: 0;
            background-color:red;
            border-radius: 100%;
            position:absolute;
            left:1100px;
            top:70px;
            line-height: 80px;
           text-align: center;
        }

        .map{
            margin:0 auto;
            position:relative;
            width:800px;
            height:400px;
            background-color:#ccc;
            margin-top: 50px;
        }

        .map div {
            position:absolute;
        }
    </style>
</head>
<body>
    <!-- 开始按钮 -->
    <div type="button" class="start" id="start">开始游戏</div>
    <!-- 游戏面板 --> 
    <div class="map" id="map"></div> 

    <script>
        //游戏界面
        var map = document.getElementById('map');

        //构造函数 蛇
        function Snake() {
            /*
            蛇对象的属性
                当前要走的方向 direction
                身体 body (数组表示)
            蛇对象的方法
                跑 run()
            Snake的方法    
                构造身体元素 myCreate()
            */
            //蛇的走向 默认是右
            this.direction = 'right';
            //蛇的身体，里面我就直接放DOM元素了
            this.body = [];
            //开局，蛇有3节我就用for循环初始化了哈！
            for(var i = 3; i > 0; i --){
                this.body.push(myCreate(0, 10*i));

            }

            //跑的方法 让前一个元素的位变成现在的位置
            this.run = function() {
    
                for (var i = this.body.length - 1; i >= 0; i --) {
                    //当前圈的当前元素
                    var elemt = this.body[i];
                    //如果是蛇头，那么它的位置就要由状态决定了
                    if(!i){
                        //获得当前蛇头坐标
                        var left = parseInt(elemt.style.left);
                        var top = parseInt(elemt.style.top);
                        //判断当前状态所指的方向
                        switch(this.direction) {
                            case "left":
                                elemt.style.left = left - 10 + "px"; 
                                break;
                            case "right":
                                elemt.style.left = left + 10 + "px";
                                break;
                            case "up":
                                elemt.style.top  = top - 10 + "px";
                                break;
                            case "down":
                                elemt.style.top = top + 10 + "px";
                                break;
                        }
                    } else {
                        //不是蛇头的话，那么它的位置就由它的前一个元素决定
                        elemt.style.top = this.body[i - 1].style.top;
                        elemt.style.left = this.body[i - 1].style.left;
                    }
                    //随机变颜色
                    elemt.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";

                }
                //获取当前蛇头的  X、Y轴坐标用于后续使用 
                var headX = parseInt(this.body[0].style.top);
                var headY = parseInt(this.body[0].style.left);
                //判断是否吃到食物
                if(this.body[0].style.left == foo.flag.style.left && this.body[0].style.top == foo.flag.style.top){
                    //给蛇加一节这一节的位置是最后一个元素的后面
                    this.body.push(myCreate(0, 0));
                    //删除食物
                    map.removeChild(foo.flag);
                    //重新构造食物，重新随机位置
                    foo.display();
                }       
                //is用于判读是否自己吃到了自己
                var is = false;
                //吃到自己就死掉,（只有四个元素死不掉的）
                for (var i = 4; i < this.body.length; i ++){
                    if(this.body[0].style.left == this.body[i].style.left && this.body[0].style.top == this.body[i].style.top){
                        is = true;
                        break;
                    }
                }    
                //判断是否结束游戏
                if(headX < 0  || headX > 390 || headY < 0 || headY >  790 || is) {
                    clearInterval(timer);   
                    alert('游戏结束' + is);
                    //删除原来的
                    for(var i =  0; i < this.body.length; i ++){
                        map.removeChild(this.body[i]);
                    }
                    this.direction = "right";
                    this.body = [];
                    //重置新的
                    for(var i = 3; i > 0; i --){
                        this.body.push(myCreate(0, 10*i));
                    }
                    is = false;
                } 

            }

            //2个参数构造身体函数的方法,如果传入3个参数那么就是改变指定DOM的位置
            function myCreate(top, left, ele){
                var element =  ele || document.createElement('div');
                element.style.width = 10 + "px";
                element.style.height = 10 + "px"; 
                element.style.top = top + "px";
                element.style.left = left + "px";
                element.style.borderRadius = "50%";
                map.appendChild(element);
                return element; 
            }
            
        }

        //构造食物
        function Foo(){
            this.display = function(){
                 var f = document.createElement('div');
                this.flag = f;
                f.style.width = 10+ 'px';
                f.style.height = 10 + 'px';
                f.style.background = 'red';
                f.style.borderRadius = '50%';
                f.style.position = 'absolute';
                this.x = Math.floor(Math.random()*80);
                this.y = Math.floor(Math.random()*40);
                f.style.left = this.x * 10 + 'px';
                f.style.top = this.y * 10 + 'px';
                map.appendChild(f);
            }
        }

        //实例化蛇
        var snake = new Snake();

        //实例化食物
        var foo = new Foo();
        //显示食物
        foo.display();

        //给bdoy添加按钮事件，上下左右
        document.body.onkeydown = function(e) {
            //浏览器兼容
            var event = e || window.event;
            //判读方位
            switch(event.keyCode) {
                case 38:
                    if (snake.direction != 'down') {   // 不允许返回，向上的时候不能向下
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        }
        //开始按钮
        var start = document.getElementById('start');
        //点击按钮开始游戏        
        var timer;
        start.onclick = function(){
            clearInterval(timer);
            timer = setInterval("snake.run()", 150);
        }


    </script>
</body>
</html>