js写贪吃蛇案例

最新推荐文章于 2024-05-02 14:46:08 发布
木易一
最新推荐文章于 2024-05-02 14:46:08 发布
阅读量571
点赞数
分类专栏： JavaScript
本文链接：https://blog.csdn.net/weixin_43684713/article/details/87892093
版权
JavaScript 专栏收录该内容
43 篇文章 1 订阅
订阅专栏

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .map{
            width: 900px;
            height: 600px;
            background-color: black;
            margin: 0 auto;
            position: relative;
        }
        .score{
            width: 500px;
            right: 10px;
            color: white;
            position: absolute;
            text-align: right;
            top: 10px;
            font-size: 20px;

        }
        .snake{
            width: 30px;
            height: 30px;
            position: absolute;
            border-radius: 8px;
        }
        .food{
            width: 30px;
            height: 30px;
            background-color: #93ffc5;
            position: absolute;
            border-radius: 50%;
        }

    </style>
</head>
<body>
<script>
    var Map;
    var Snake;
    var Food;
    var score=0;
    var speed=600;

    var game=(function(){
        //创建地图
        function map(){
            this._map=null;
            //创建地图div
            this.createMap=function(){
                if(this._map==null){
                    this._map=document.createElement("div");
                    this._map.className="map";
                }
            };
            //创建地图上的计分span
            this.createSpan=function(){
                if(this._span==null){
                    this._span=document.createElement("span");
                    this._span.className="score";
                    this._span.innerHTML="总分：0";
                }
                this._map.appendChild(this._span);
            }
        }
        //创建蛇
        function snake(){
            this._map=null;
            this.direct="right";
            this._snake=[[3,1,"#ff86b6",null],[2,1,"#fbff8b",null],[1,1,"#fbff8b",null]];//蛇的默认元素
            this.createSnake=function(){//创建蛇
                for(var i=0;i<this._snake.length;i++){
                    if(this._snake[i][3]==null){
                        this._snake[i][3]=document.createElement("div");
                        this._snake[i][3].style.backgroundColor=this._snake[i][2];
                        this._snake[i][3].className="snake";
                    }
                    this._snake[i][3].style.left=this._snake[i][0]*30+"px";//设置蛇的初始位置
                    this._snake[i][3].style.top=this._snake[i][1]*30+"px";
                    this._map.appendChild(this._snake[i][3]);//将蛇追加给地图

                }
            };
            this.SnakeMove=function(){
                var len=this._snake.length-1;
                for(var i=len;i>0;i--){
                    this._snake[i][0]=this._snake[i-1][0];
                    this._snake[i][1]=this._snake[i-1][1];
                }
                switch (this.direct){
                    case "right":
                        this._snake[0][0]+=1;
                        break;
                    case "left":
                        this._snake[0][0]-=1;
                        break;
                    case "up":
                        this._snake[0][1]-=1;
                        break;
                    case "down":
                        this._snake[0][1]+=1;
                        break;
                }
                if(this._snake[0][0]==Food.x&&this._snake[0][1]==Food.y){
                    score+=10;
                    this._span.innerHTML="总分："+score+"分";
                    this._snake.push([
                        this._snake[this._snake.length-1][0],
                        this._snake[this._snake.length-1][1],
                        "#fbff8b",
                        null
                    ]);
                    Food.createFood();
                }
                this.createSnake(this._map);
            }
        }

        //创建食物
        function food(){
            this._food=null;
            this._map=null;
            this.x=0;
            this.y=0;
            this.createFood=function(){//创建食物
                //生成随机数量
                this.x=Math.floor(Math.random()*30);
                this.y=Math.floor(Math.random()*20);
                if(this._food==null){
                    this._food=document.createElement("div");
                    this._food.className="food";
                }
                this._food.style.left=this.x*30+"px";//生成随机坐标
                this._food.style.top=this.y*30+"px";
                this._map.appendChild(this._food);//追加给map
            }

        }

        function getMaps(){
            Map = new map();//实例化地图
            Map.createMap();//调用函数
            Map.createSpan();//调用函数

            //创建蛇 把map作为参数传进去  添加蛇
            CreateSnake(Map._map,Map._span);

            //创建食物
            CreateFood(Map._map);

            return Map._map;
        }
        function CreateSnake(map,span){
            Snake=new snake();//实例化蛇
            Snake._map=map;
            Snake._span=span;
            Snake.createSnake();//调用函数

            //蛇移动
            setInterval(function () {
                Snake.SnakeMove();
            }, speed);
        }
        function CreateFood(map){
            Food=new food();//实例化食物
            Food._map=map;
            Food.createFood();//调用函数
        }
        //设置按键控制蛇移动方向
        document.onkeypress=function(e){
            switch (e.keyCode){
                case 119:
                    if (Snake.direct == "down")
                        return;
                    Snake.direct="up";
                    break;
                case 97:
                    if (Snake.direct == "right")
                        return;
                    Snake.direct="left";
                    break;
                case 115:
                    if (Snake.direct == "up")
                        return;
                    Snake.direct="down";
                    break;
                case 100:
                    if (Snake.direct == "left")
                        return;
                    Snake.direct="right";
                    break;
            }
        }
        return{
            SnakeMap:getMaps()
        }
    })();
    document.body.appendChild(game.SnakeMap);//创建的元素显示到body页面
</script>

</body>
</html>