//模擬貪吃蛇遊戲,做的專案/**
* 地圖: 寬，高，背景顏色，因為小蛇和食物都是相對於地圖顯示的,這裡小蛇和食物都是地圖的子元素,隨機位置顯示,脫離文件流的,地圖也需要脫離文件流--css需要設定:寬,高,背景顏色,脫標
** 食物---div元素
* elements--->儲存div的陣列(將來刪除的食物div時候,先從map中刪除div,再從陣列中移除div)
* 食物:寬,高,背景顏色,橫座標,縱座標
* 乙個食物就是乙個物件,這個物件有相應的屬性,這個物件需要在地圖上顯示
* 最終要建立食物的物件,先 有建構函式,並且把相應的值作為引數傳入到建構函式中
* 食物要想顯示在地圖上,食物的初始化就是乙個行為
* 1.食物的建構函式--->建立食物物件
* 2.食物的顯示的方法-->通過物件呼叫方法,顯示食物,設定相應的樣式
* 2.1.1 因為食物要被小蛇吃掉,吃掉後應該再次出現食物,原來的食物就刪除了
* 2.1.2 每一次初始化食物的時候先刪除原來的食物,然後重新的初始化食物
* 2.1.3 通過乙個私有的函式(外面不能呼叫的函式)刪除地圖上的食物,同時最開始的時候食物也相應的儲存到乙個陣列中,再從這個陣列中把食物刪除
* 最後的時候,把食物的建構函式給window下的屬性,這樣做,外部就可以直接使用這個食物的建構函式了
** 小蛇
* 小蛇就是乙個物件
* 屬性: 每個身體都有寬，高，方向
* 屬性:身體分三個部分,每個部分都是乙個物件,每個部分都有橫縱座標,背景顏色
* 小蛇要想顯示在地圖上,先刪除之前的小蛇,然後再初始化小蛇(小蛇要移動)--方法
** 小蛇要移動---方法
* 思路:把小蛇的頭的座標給小蛇第一部分的身體,第一部分的身體的座標給下乙個部分身體
* 小蛇的頭,需要單獨的設定:方向
*1、主頁面
（1）food.js
//自呼叫函式----食物
(function ()
//為原型新增初始化的方法（作用：在頁面上顯示這個食物）
//因為食物要在地圖上顯示，所以，需要地圖的這個引數（map--就是頁面上的.class=map的這個div）
food.prototype.init = function (map) ;
//私有的函式---刪除食物的
function remove()
}//*******把food暴露給window，外部可以使用
window.food = food;
}());
//自呼叫函式----遊戲物件
(function ()
game.prototype.init = function () ,150);
//呼叫自動移動小蛇的方法
this.runsnake(this.food, this.map, this.snake);
此時沒有傳參，所以下面用的是this.snake 而不是snake
this.bindkey(this.snake);
};//新增原型方法---設定小蛇可以自動的跑起來
game.prototype.runsnake = function (food, map, snake)
if (heady < 0 || heady >= maxy)
}.bind(that), 150);
};//新增原型方法--設定使用者按鍵，改變小蛇移動的方向
// game.prototype.bindkey = function ()
// }.bind(that), false)
// };
game.prototype.bindkey = function (snake)
}.bind(that), false)
};window.game = game;
}());
(3)snake.js
//自呼叫函式--小蛇
(function () ,//蛇頭
,//身體
//身體];}
snake.prototype.init = function (map)
};//為原型新增方法，小蛇動起來
snake.prototype.move = function (food, map)
// 判斷方向--改變小蛇的頭的座標位置
switch (this.direction)
var headx = this.body[0].x * this.width;
var heady = this.body[0].y * this.height;
console.log(headx + "===" + food.x);
if (headx == food.x && heady == food.y) );
food.init(map);}//
//};
//刪除小蛇的私有的函式
function remove()
}window.snake = snake;
}());
JS小遊戲貪吃蛇 詳細注釋
執行 框 貪吃蛇綠色食物 灰色毒品 藍色滑板 紅色剎車 最高分 0 tips ie element.innertext ff element.textcontent setattribute cellpadding 0 在ie中無效，正確寫法cellpadding 一不小心就犯錯了 ff中，使用繫結...
js 實現貪吃蛇專案
近來在學習js高階，便學習著做個網頁版貪吃蛇專案。map tools.js function window.tools tools food.js function game.prototype.start function function runsnake if heady 0 heady ma...
js貪吃蛇（建構函式）
給大家分享一下這幾天我研究的乙個貪吃蛇，挺簡單的，但是實現起來其實有點繞的，我給大家附上完整 一起分析學習一下，主要用的是建構函式。思想 1 設計蛇 屬性有寬 高 方向 狀態 有多少節 方法 顯示，跑 2 設計食物 屬性寬 高 3 顯示蛇 根據狀態向地圖裡加元素 4 蛇跑起來 下一節到前一節的位置，...