一个基于原生js的贪吃蛇游戏

最新推荐文章于 2022-07-19 10:56:37 发布
chisi3580
最新推荐文章于 2022-07-19 10:56:37 发布
阅读量76
点赞数
原文链接：https://my.oschina.net/u/3937325/blog/1922556
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      #beiJ {
          width: 500px;
          height: 500px;
          background-color:lightgreen;
          position:relative;
      }
        #btn {
            width: 100px;
            height: 100px;
            background-color: purple;
            position:absolute;
            top:0;
            left:600px;
            font-size:18px;
            color:#000;
        }
    </style>
</head>
<body>
    <div id="beiJ"></div>
    <input type="button" id="btn" value="游戏开始"/>
</body>
<script>
    var beiJ=document.getElementById("beiJ");   //背景对象
    var keyWord; //存放按键按下的keyCode
    var btn=document.getElementById("btn");
    document.onkeydown=function(e){
        keyWord= e.keyCode;
    };
    /*==========================================================
    * 通过原型对象产生随机数
    * */
    (function(win){
        function Random(){};
        Random.prototype.getRandom=function(max,min){
            return Math.floor(Math.random()*(max-min)+min);
        };
        win.random=new Random();
    })(window);
   /*============================================================
   * food对象自定义函数
   * */
    function Food(width,height,color){
        this.width=width||20;
        this.height=height||20;
        this.color=color;
    };
    Food.prototype={
    /*============================================================
    * 创建food的div元素并显示在背景中
    * */
        init:function(map){
            var element=document.createElement("div");
            element.style.width=this.width+"px";
            element.style.height=this.height+"px";
            element.style.backgroundColor=this.color;
            element.style.position="absolute";
            element.style.left=random.getRandom(0,map.offsetWidth/this.width)*this.width+"px";
            element.style.top=random.getRandom(0,map.offsetHeight/this.height)*this.height+"px";
            map.insertBefore(element,map.children[0]);
        },
    /*
    *Food对象销毁
    * */
        destroy:function(map){
            map.removeChild(map.children[0]);
        }
    }

    /*============================================================
    * Snake对象自定义函数
    * */
    function Snake(food,color){
        this.len=3;
        this.width=food.width;  //每个小块的宽
        this.height=food.height;    //每个小块的高
        this.x=[];  //存放Snake对象中每个小块的横坐标
        this.y=[];  //存放Snake对象中每个小块的纵坐标
        this.color=color;   //存放Snake对象的颜色
        this.arr=[];    //存放Snake对象的移动方向
        for(var i=0;i<this.len;i++){
            this.arr[i]=1;
            this.x[i]=this.len-1-i;
            this.y[i]=0;
        }
    }

   
    Snake.prototype={
    /*============================================================
    * 创建Snake对象的div元素并显示在背景中
    * */
        init:function(map,food){
            for(var i=0;i<this.len;i++){
                var snake=document.createElement("div");
                snake.style.position="absolute";
                snake.style.width=this.width+"px";
                snake.style.height=this.height+"px";
                snake.style.left=this.x[i]*food.width+"px";
                snake.style.top=this.y[i]*food.height+"px";
                snake.style.backgroundColor=this.color;
                map.appendChild(snake);
            }
        },
    /*===============================================================
    基于Snake对象创建的div元素销毁自定义函数*/
        destroy:function(map){
            var mplen=map.children.length-1;
            for(var i=0;i<mplen;i++){
            map.removeChild(map.children[1]);
            }
        },
    /*==============================================================
    * 当按键按下时Snake对象运动自定义函数
    * type   运动方向
         1      右
         2      左
         3      上
         4      下
    * */
        onkeydownMove:function(map,food){
            for(var i=0;i<this.len;i++){
                switch(this.arr[this.arr.length-1-i]){
                    case(1):
                        this.x[i]++;
                        break;
                    case(2):
                        this.x[i]--;
                        break;
                    case(3):
                        this.y[i]--;
                        break;
                    case(4):
                        this.y[i]++;
                    default :{};
                }
            }
            this.init(beiJ,food);
        },
    /*
    *判断Snake对象运动Win or Losed的自定义函数
    * */
        judge:function(map){
            if(map.children[1].offsetLeft<0 || map.children[1].offsetLeft>=map.offsetWidth
            || map.children[1].offsetTop<0 || map.children[1].offsetTop>=map.offsetHeight
            ){
                console.log( map.children[1].offsetTop,map.offsetHeight);
                return true;
            }
                return false;
        },
    /*======================================================
    * Snake对象定时器自动移动函数
    * */
        move:function(map,food){
            if(this.itd){
                window.clearInterval(this.itd);
            }
            var that=this;
            this.itd=window.setInterval(function(){
                that.destroy(map);
                that.uplrMove();
                that.onkeydownMove(map,food);
                if(map.children[1].offsetLeft==map.children[0].offsetLeft
                &&map.children[1].offsetTop==map.children[0].offsetTop){
                    that.eat(map,food);
                    food.destroy(map);
                    console.log(food);
                    var b=new Food(20,20,"black");
                    b.init(beiJ);
                }
                if(that.judge(map)){
                    clearInterval(that.itd);
                    alert("你输了!");
                }
                if(that.len==100){
                    clearInterval(that.itd);
                    alert("你赢了!");
                }
            },200);
        },
    /*=======================================================
    * 当键盘up,down,left,right按下时改变Snake对象运动方向
    * */
        uplrMove:function(){
            switch (keyWord){
                case (39):
                    this.arr.push(1);
                    break;
                case (37):
                    this.arr.push(2);
                    break;
                case (38):
                    this.arr.push(3);
                    break;
                case (40):
                    this.arr.push(4);
                    break;
                default :
                    this.arr.push(this.arr[this.arr.length-1]);
            }
        },
    /*
    *Snake对象的eat方法
    * */
        eat:function(map,food){
            var direction=this.arr[this.arr.length-this.len];
            this.len++;
            var len=this.len;
            this.x[len-1]=this.x[len-2];
            this.y[len-1]=this.y[len-2];
            switch(direction){
                case(1):
                    this.x[len-1]--;
                    break;
                case(2):
                    this.x[len-1]++;
                    break;
                case(3):
                    this.y[len-1]++;
                    break;
                case(4):
                    this.y[len-1]--;
                    break;
                default:{}
            }
            this.init(map,food);
        }
    }
   
    /*=========================================================
    *Game对象
    * */
    function Game(){
        var a=new Food(20,20,"black");
        a.init(beiJ);
        var b=new Snake(a,"pink");
        b.init(beiJ,a);
        b.move(beiJ,a);
    }

    btn.onclick=function(){
        new Game();
    };

</script>
</html>
转载于:https://my.oschina.net/u/3937325/blog/1922556