贪吃蛇面向对象完整版

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    </body>
  </html>
  <script>
    var t=null;

    //地图系统
    function Map(){
      this.width="800px";
      this.height="600px";
      this.background="#ccc";
      this.position="relative";
      this._map=null;
    }
    Map.prototype.init=function(){
      this._map=document.createElement("div");
      document.body.appendChild(this._map);
      this._map.style.width=this.width;
      this._map.style.height=this.height;
      this._map.style.background=this.background;
      this._map.style.position=this.position;

    }
    var map=new Map;
    map.init()

    //食物系统
    function Food(){
      this.width="20px";
      this.height="20px";
      this.background="green";
      this._food=null;
      this.position="absolute"
    }
    Food.prototype.init=function(){
      this._food=document.createElement("div");
      map._map.appendChild(this._food);
      this._food.style.width=this.width;
      this._food.style.height=this.height;
      this._food.style.background=this.background;
      this._food.style.position=this.position;
      this.x=Math.floor(Math.random()*40);
      this.y=Math.floor(Math.random()*30);
      this._food.style.left=this.x*20+"px";
      this._food.style.top=this.y*20+"px";
    }
    var food=new Food;
    food.init()

    制造小蛇;
    function Snake(){
      this.width="20px";
      this.height="20px";
      this.position="absolute"
      this.body=[
        {x:1,y:2,color:"red",son:null},
        {x:2,y:2,color:"red",son:null},
        {x:3,y:2,color:"blue",son:null}
      ]
      this.fangxiang="right";
      this.setsnake=function(code){
        switch(code){
          case 37:
          if(this.fangxiang==="right"){
          return;
          }

          this.fangxiang="left";

          break;
          case 38:
          if(this.fangxiang==="down"){
          return;
          }


          this.fangxiang="up";

          break;
          case 39:
          if(this.fangxiang==="left"){
          return;
          }


          this.fangxiang="right";

          break;
          case 40:
          if(this.fangxiang==="up"){
          return;
          }


        this.fangxiang="down";

        break;
        }
      }
    }
    Snake.prototype.init=function(){
      for(var i=0;i<this.body.length;i++){
        if(this.body[i].son==null){
          this.body[i].son=document.createElement("div");
          map._map.appendChild(this.body[i].son)
          this.body[i].son.style.width=this.width;
          this.body[i].son.style.height=this.height;
          this.body[i].son.style.position=this.position;
          this.body[i].son.style.background=this.body[i].color
        }
      this.body[i].son.style.left=this.body[i].x*20+"px"
      this.body[i].son.style.top=this.body[i].y*20+"px"

      }

    }
    Snake.prototype.move=function(){

      var length=this.body.length-1;
      for(var i=0;i<length;i++){
        this.body[i].x=this.body[i+1].x;
        this.body[i].y=this.body[i+1].y;
      }

    switch(this.fangxiang){
    case "right":
      this.body[length].x=this.body[length].x+1;
    break;
    case "left":
      this.body[length].x=this.body[length].x-1;
    break;
    case "up":
      this.body[length].y=this.body[length].y-1;
    break;
    case "down":
      this.body[length].y=this.body[length].y+1;
    }
    this.init()

    //实现小蛇的一些功能
    if(this.body[length].x<0||this.body[length].x>39||this.body[length].y<0||this.body[length].y>29){

      clearInterval(t)
      alert("瞎子吗?越界了")
      for(var j=0;j<this.body.length;j++){
        if(this.body[j].son!=null){
        map._map.removeChild(this.body[j].son)
        }
      }
    }
    if(this.body[length].x==food.x&&this.body[length].y==food.y){
      map._map.removeChild(food._food);
      food.init()
      this.body.unshift({x:null,y:null,color:"red",son:null});
    }
    //由于出现了bug,现阶段没办法解决,所以舍弃贪吃蛇自己吃自己的功能
    // for(var u=0;u<this.body.length;u++){
      // if(this.body[u]==this.body[length]){
      // return false;
      // }
    // else if(this.body[length].x==this.body[u].x&&this.body[length].y==this.body[u].y){
      // clearInterval(t)
      // alert("你是猪吗")
      // }
    // }
    }
    var snake=new Snake;
    snake.init()
    t=setInterval(function(){
    snake.move()
    },100)
    document.onkeydown=function(ev){
      var ev=ev||window.event;
      setTimeout(function(){
        snake.setsnake(ev.keyCode)
      },100)
    }


  </script>

猜你喜欢

转载自www.cnblogs.com/shangjun6/p/10375172.html
0条评论
添加一条新回复