js構造函數(shù)寫貪吃蛇游戲

//自調用函數(shù)----食物的

(function () {

var elements = [];//用來保存每個小方塊食物的

//食物就是一個對象,有寬,有高,有顏色,有橫縱坐標,先定義構造函數(shù),然后創(chuàng)建對象

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";

}

//為原型添加初始化的方法(作用：在頁面上顯示這個食物)

//因為食物要在地圖上顯示,所以,需要地圖的這個參數(shù)(map---就是頁面上的.class=map的這個div)

Food.prototype.init = function (map) {

  //先刪除這個小食物

  //外部無法訪問的函數(shù)

  remove();

  //創(chuàng)建div

  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.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";

  //把div加入到數(shù)組elements中

  elements.push(div);

};

//私有的函數(shù)---刪除食物的

function remove() {

  //elements數(shù)組中有這個食物

  for (var i = 0; i < elements.length; i++) {

    var ele = elements[i];

    //找到這個子元素的父級元素,然后刪除這個子元素

    ele.parentNode.removeChild(ele);

    //再次把elements中的這個子元素也要刪除

    elements.splice(i, 1);

  }

}

//把Food暴露給Window,外部可以使用

window.Food = Food;

}());

//自調用函數(shù)---小蛇

(function () {

var elements = [];//存放小蛇的每個身體部分

//小蛇的構造函數(shù)

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();//===========================================

  //循環(huán)遍歷創(chuàng)建div

  for (var i = 0; i < this.body.length; i++) {

    //數(shù)組中的每個數(shù)組元素都是一個對象

    var obj = this.body[i];

    //創(chuàng)建div

    var div = document.createElement("div");

    //把div加入到map地圖中

    map.appendChild(div);

    //設置div的樣式

    div.style.position = "absolute";

    div.style.width = this.width + "px";

    div.style.height = this.height + "px";

    //橫縱坐標

    div.style.left = obj.x * this.width + "px";

    div.style.top = obj.y * this.height + "px";

    //背景顏色

    div.style.backgroundColor = obj.color;

    //方向暫時不定

    //把div加入到elements數(shù)組中----目的是為了刪除

    elements.push(div);

  }

};

//為原型添加方法---小蛇動起來

Snake.prototype.move = function (food, map) {

  //改變小蛇的身體的坐標位置

  var i = this.body.length - 1;//2

  for (; i > 0; 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;

  //判斷小蛇的頭的坐標和食物的坐標是否相同

  if(headX==food.x&&headY==food.y){

    //獲取小蛇的最后的尾巴

    var last=this.body[this.body.length-1];

    //把最后的蛇尾復制一個,重新的加入到小蛇的body中

    this.body.push({

      x:last.x,

      y:last.y,

      color:last.color

    });

    //把食物刪除,重新初始化食物

    food.init(map);

  }

}

;//刪除小蛇的私有的函數(shù)=============================================================================

function remove() {

  //刪除map中的小蛇的每個div,同時刪除elements數(shù)組中的每個元素,從蛇尾向蛇頭方向刪除div

  var i = elements.length - 1;

  for (; i >= 0; i--) {

    //先從當前的子元素中找到該子元素的父級元素,然后再弄死這個子元素

    var ele = elements[i];

    //從map地圖上刪除這個子元素div

    ele.parentNode.removeChild(ele);

    elements.splice(i, 1);

  }

}

//把Snake暴露給window,外部可以訪問

window.Snake = Snake;

}());

//自調用函數(shù)---游戲對象================================================

(function () {

var that = null;//該變量的目的就是為了保存游戲Game的實例對象-------

//游戲的構造函數(shù)

function Game(map) {

  this.food = new Food();//食物對象

  this.snake = new Snake();//小蛇對象

  this.map = map;//地圖

  that = this;//保存當前的實例對象到that變量中-----------------此時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("游戲結束");

    }

  }.bind(that), 150);

};

//添加原型方法---設置用戶按鍵,改變小蛇移動的方向

Game.prototype.bindKey=function () {

  //獲取用戶的按鍵,改變小蛇的方向

  document.addEventListener("keydown",function (e) {

    //這里的this應該是觸發(fā)keydown的事件的對象---document,

    //所以,這里的this就是document

    //獲取按鍵的值

    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);

};

//把Game暴露給window,外部就可以訪問Game對象了

window.Game = Game;

}());

//初始化游戲對象

var gm = new Game(document.querySelector(".map"));

//初始化游戲---開始游戲

gm.init();

//外部測試代碼

// var fd = new Food();

// fd.init(document.querySelector(".map"));

// //創(chuàng)建小蛇

// var snake = new Snake();

// snake.init(document.querySelector(".map"));//先在地圖上看到小蛇

// setInterval(function () {