//食物就是一个对象,宽高横纵坐标,先定义构造函数，然后创建对象
(function (){
  var elements=[];//用来保存每个小方块食物
  function Food(x,y,width,height,color){
    //横纵坐标
    this.x=x||0;
    this.y=y||0;
    this.width=width||20;
    this.height=height||20;
    //背景颜色
    this.color=color||"green";
  }
  //为原型添加初始化的方法(作用:在页面上取显示这个食物)
  //因为食物要在地图上显示，所以，需要地图这个参数
  Food.prototype.init=function(map){
    //先删除这个食物
    //外部无法访问的函数
    remove()
    var div=document.createElement("div");
    //把这个div加到map中
    map.appendChild(div);
    //设置div的样式
    div.style.width=this.width+"px";
    div.style.height=this.height+"px";
    div.style.backgroundColor=this.color;
    // div.style.left=this.x+"px";

    //先脱离文档流
    div.style.position="absolute";
    //随机横纵坐标
    this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
    this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
    div.style.left=this.x+"px";
    div.style.top=this.y+"px";
    // Food.prototype.init=function(map){

    // }
    //把div加入到数组elements中
    elements.push(div);
  }

  function remove(){
    //elements数组中有这个食物
    for(var i=0;i

//蛇
(function(){
  var elements=[];//存放小蛇的每个身体部分
  //蛇的构造函数
  function Snake(width,height,direction){
    //小蛇的每个部分的宽
    this.width=width||20;
    this.height=height||20;
    //身体
    this.body=[
      {x:3,y:2,color:"red"},
      {x:2,y:2,color:"orange"},
      {x:1,y:2,color:"orange"}
    ];

    this.direction=direction||"right";
  }
//蛇的初始化
  Snake.prototype.init=function(map){
    remove()
    //循环遍历创建div
    for(var i=0;i0;i--){
      this.body[i].x=this.body[i-1].x;
      this.body[i].y=this.body[i-1].y;
    }
    //判断方向---改变小蛇的头的坐标位置
    switch (this.direction){
      case "right":
        this.body[0].x+=1;
        break;
      case "left":
        this.body[0].x-=1;
        break;
      case "top":
        this.body[0].y-=1;
        break;
      case "bottom":
        this.body[0].y+=1;
        break;
    }

    //判断有没有吃到食物
    //小蛇的头的坐标和食物位置
    var headX=this.body[0].x*this.width;
    var headY=this.body[0].y*this.height;
    //食物的横纵坐标
    var foodX=food.x;
    var foodY=food.y;
    if(headX==foodX&&headY==foodY){
      //获取蛇的最后尾巴
      var last=this.body[this.body.length-1];
      //把最后的蛇尾复制一份
      this.body.push({
        x:last.x,
        y:last.y,
        color:last.color
      })
      //重新初始化食物
      food.init(map);
    }



  }

  //删除小蛇的私有函数
  function remove(){
    //获取数组
    var i=elements.length-1;
    for(;i>=0;i--){
      //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素
      var ele=elements[i];
      //从map地图上删除这个子元素div
      ele.parentNode.removeChild(ele);
      elements.splice(i,1);
    }
  }
  window.Snake=Snake;
}());

//蛇
(function(){
  var elements=[];//存放小蛇的每个身体部分
  //蛇的构造函数
  function Snake(width,height,direction){
    //小蛇的每个部分的宽
    this.width=width||20;
    this.height=height||20;
    //身体
    this.body=[
      {x:3,y:2,color:"red"},
      {x:2,y:2,color:"orange"},
      {x:1,y:2,color:"orange"}
    ];

    this.direction=direction||"right";
  }
//蛇的初始化
  Snake.prototype.init=function(map){
    remove()
    //循环遍历创建div
    for(var i=0;i0;i--){
      this.body[i].x=this.body[i-1].x;
      this.body[i].y=this.body[i-1].y;
    }
    //判断方向---改变小蛇的头的坐标位置
    switch (this.direction){
      case "right":
        this.body[0].x+=1;
        break;
      case "left":
        this.body[0].x-=1;
        break;
      case "top":
        this.body[0].y-=1;
        break;
      case "bottom":
        this.body[0].y+=1;
        break;
    }

    //判断有没有吃到食物
    //小蛇的头的坐标和食物位置
    var headX=this.body[0].x*this.width;
    var headY=this.body[0].y*this.height;
    //食物的横纵坐标
    var foodX=food.x;
    var foodY=food.y;
    if(headX==foodX&&headY==foodY){
      //获取蛇的最后尾巴
      var last=this.body[this.body.length-1];
      //把最后的蛇尾复制一份
      this.body.push({
        x:last.x,
        y:last.y,
        color:last.color
      })
      //重新初始化食物
      food.init(map);
    }



  }

  //删除小蛇的私有函数
  function remove(){
    //获取数组
    var i=elements.length-1;
    for(;i>=0;i--){
      //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素
      var ele=elements[i];
      //从map地图上删除这个子元素div
      ele.parentNode.removeChild(ele);
      elements.splice(i,1);
    }
  }
  window.Snake=Snake;
}());

//游戏
(function(){
   var that=null;
  //游戏的构造函数
  function Game(map){
    this.food=new Food();
    this.snake=new Snake();
    this.map=map;//地图
    that=this;
  }
  Game.prototype.init=function(){
    //初始化游戏
    //食物初始化
    this.food.init(this.map);
    this.snake.init(this.map);

    this.runSnake(this.food,this.map)
    this.bindKey();
  }

  Game.prototype.runSnake=function(food,map){
    //自动的去移动
    var timeId=setInterval(function(){
      //此时的this是window
      //蛇的移动
      this.snake.move(food,map);
      //初始化蛇
      this.snake.init(map);
      //横坐标最大值
      var maxX=map.offsetWidth/this.snake.width;
      //获取纵坐标的最大值
      var maxY=map.offsetHeight/this.snake.height;
      //蛇头的坐标
      var headX=this.snake.body[0].x;
      var headY=this.snake.body[0].y;
      //判断横坐标
      if(headX<0||headX>=maxX){
        clearInterval(timeId)
        alert("游戏结束")
      }
      //判断纵坐标
      if(headY<0||headY>maxY){
        clearInterval(timeId)
        alert("游戏结束")
      }
      console.log(headX)
    }.bind(that),150)
  }

  Game.prototype.bindKey=function(){
    //获取用户的按键，改变小蛇的方向
    document.addEventListener("keydown",function(e){
      //获取案件的值
      switch(e.keyCode){
        case 37:
          this.snake.direction="left";
          break;
        case 38:
          this.snake.direction="top";
          break;
        case 39:
          this.snake.direction="right";
          break;
        case 40:
          this.snake.direction="bottom";
          break;
      }
    }.bind(that),false)
  }


  window.Game=Game;

}());

//初始化游戏对象
var gm=new Game(document.querySelector(".map"));
gm.init()