js实现贪吃蛇蛇蛇蛇

最新推荐文章于 2022-08-16 21:45:54 发布

Chanyelo_

最新推荐文章于 2022-08-16 21:45:54 发布

阅读量974

点赞数

本文链接：https://blog.csdn.net/qq_41985171/article/details/80552595

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    /*第一步：创建地图：*/
    var map;
    //封装地图的类
    function Map(){
        //设置地图的相关属性
        this.width=1200;
        this.height=600;
        this.bgcolor="black";
        //居中的属性
        this.margin="0 auto";
        //封装接收地图对象的属性
        this._map=null;
        //封装方法来实现dom元素的创建
        this.createMap=function (){
            //创建dom元素
           if(this._map==null)
           {
               this._map=document.createElement("div");
               this._map.style.width=this.width+"px";
               this._map.style.height=this.height+"px";
               this._map.style.position="relative";
               this._map.style.margin=this.margin;
               this._map.style.backgroundColor=this.bgcolor;
               document.body.appendChild(this._map);
           }
        }
    }
    var snack;
    function Snack(){
        this.width=30;
        this.height=30;
        //控制方向的
        this.direct="right";
        //封装蛇的身子
        this.snackbody=[[3,1,"blue",null],[2,1,"white",null],[1,1,"white",null]];
        //封装创建蛇的方法
        this.createsnack=function (){
            for(var i=0;i<this.snackbody.length;i++)
            {
                if(this.snackbody[i][3]==null)
                {
                    //创建dom元素
                    this.snackbody[i][3]=document.createElement("div");
                    this.snackbody[i][3].style.width=this.width+"px";
                    this.snackbody[i][3].style.height=this.height+"px";
                    this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2];
                    this.snackbody[i][3].style.position="absolute";
                    map._map.appendChild(this.snackbody[i][3]);
                }
                this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+"px";
                this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+"px";
            }
        }
        //封装蛇移动的方法
        this.snackmove=function (){
            var length=this.snackbody.length-1;
            for(var i=length;i>0;i--)
            {
                this.snackbody[i][0]=this.snackbody[i-1][0];
                this.snackbody[i][1]=this.snackbody[i-1][1];
            }
            //在xy传递之后让蛇头动
            /*根据移动方向来确定想x,y++ --*/
            switch (this.direct){
                case "right":this.snackbody[0][0]+=1; break;
                case "left":this.snackbody[0][0]-=1; break;
                case "up":this.snackbody[0][1]-=1; break;
                case "down":this.snackbody[0][1]+=1; break;
            }
            this.snackback();
            this.snackCollider();
            //去判断蛇头和食物是否坐标一致
            if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y)
            {
               //开始长身体
                this.snackbody.push([
                    this.snackbody[this.snackbody.length-1][0],
                    this.snackbody[this.snackbody.length-1][1],
                    "white",
                    null
                ]);
                //食物换位置
                food.createfood();
            }
            //动态传递xy坐标之后   重新设置蛇的位置
            this.createsnack();
        }
        //判断蛇是否穿墙
        this.snackback=function (){
            if(this.snackbody[0][0]>=40)
            {
                 this.snackbody[0][0]=0;
            }
            if(this.snackbody[0][0]<0)
            {
                this.snackbody[0][0]=39;
            }
            if(this.snackbody[0][1]>=20)
            {
                this.snackbody[0][1]=0;
            }
            if(this.snackbody[0][1]<0)
            {
                this.snackbody[0][1]=19;
            }
        }
        //判断是否自己撞自己
        this.snackCollider=function (){
           for(var i=1;i<this.snackbody.length;i++)
           {
               if(this.snackbody[0][0]==this.snackbody[i][0]&&this.snackbody[0][1]==this.snackbody[i][1])
               {
                   clearInterval(time);
                   alert("撞死啦！");
               }
           }
        }
    }
    var food;
    function Food(){
        this.width=30;
        this.height=30;
        //食物的属性坐标
        this.x=0;
        this.y=0;
        this._food=null;
        this.createfood=function (){
            //设置随机值
            this.x=Math.floor(Math.random()*40);
            this.y=Math.floor(Math.random()*20);
            if(this._food==null)
            {
                this._food=document.createElement("div");
                this._food.style.width=this.width+"px";
                this._food.style.height=this.height+"px";
                this._food.style.position="absolute";
                this._food.style.backgroundColor="yellow";
                map._map.appendChild(this._food);
            }
            this._food.style.left=this.x*this.width+"px";
            this._food.style.top=this.y*this.height+"px";
        }
    }
    var time;
    //在窗体加载完成里面去实例化对象
    window.οnlοad=function (){
        map=new Map();
        map.createMap();
        snack=new Snack();
        snack.createsnack();
        time=setInterval("snack.snackmove()",100);
        food=new Food();
        food.createfood();
        document.οnkeydοwn=function (e){
            /* 通过按键   控制蛇的移动方向*/
            /*e.keyCode*/
            switch (e.keyCode){
                case 37: if(snack.direct!="right")snack.direct="left"; break;
                case 38: if(snack.direct!="down") snack.direct="up";break;
                case 39: if(snack.direct!="left")snack.direct="right";break;
                case 40: if(snack.direct!="up")snack.direct="down";break;
            }
        }
    }
</script>
</body>
</html>

Chanyelo_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现贪吃蛇蛇蛇蛇

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;
复制链接

扫一扫

js实现贪吃蛇蛇蛇蛇

“相关推荐”对你有帮助么？