<div class="map"></div>
<script src="food.js"></script>
<script src="Snake.js"></script>
<script src="Game.js"></script>
food.js
/**
* Created by Administrator on 2017-09-27.
*/
//自調用函數----食物的
(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";
}
//爲原型添加初始化的方法(作用：在頁面上顯示這個食物)
//因爲食物要在地圖上顯示,所以,需要地圖的這個參數(map---就是頁面上的.class=map的這個div)
Food.prototype.init = function (map) {
//先刪除這個小食物
//外部無法訪問的函數
remove();
//創建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加入到數組elements中
elements.push(div);
};
//私有的函數---刪除食物的
function remove() {
//elements數組中有這個食物
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;
}());
Snake.js
/**
* Created by Administrator on 2017-09-27.
*/
//自調用函數---小蛇
(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; i < this.body.length; i++) {
//數組中的每個數組元素都是一個對象
var obj = this.body[i];
//創建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數組中----目的是爲了刪除
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);
}
}
;//刪除小蛇的私有的函數=============================================================================
function remove() {
//刪除map中的小蛇的每個div,同時刪除elements數組中的每個元素,從蛇尾向蛇頭方向刪除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;
}());
Game.js
/**
* Created by Administrator on 2017-09-27.
*/
//自調用函數---遊戲對象================================================
(function () {
var that = null;//該變量的目的就是爲了保存遊戲Game的實例對象-------
//遊戲的構造函數
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), 300);
};
//添加原型方法---設置用戶按鍵,改變小蛇移動的方向
Game.prototype.bindKey=function () {
//獲取用戶的按鍵,改變小蛇的方向
document.addEventListener("keydown",function (e) {
//這裏的this應該是觸發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;
}());
思路：
//模擬貪吃蛇遊戲,做的項目
/*
*
* 地圖: 寬，高，背景顏色，因爲小蛇和食物都是相對於地圖顯示的,這裏小蛇和食物都是地圖的子元素,隨機位置顯示,脫離文檔流的,地圖也需要脫離文檔流--css需要設置:寬,高,背景顏色,脫標
*
* 食物---div元素
* elements--->存儲div的數組(將來刪除的食物div時候,先從map中刪除div,再從數組中移除div)
* 食物:寬,高,背景顏色,橫座標,縱座標
* 一個食物就是一個對象,這個對象有相應的屬性,這個對象需要在地圖上顯示
* 最終要創建食物的對象,先 有構造函數,並且把相應的值作爲參數傳入到構造函數中
* 食物要想顯示在地圖上,食物的初始化就是一個行爲
* 1.食物的構造函數--->創建食物對象
* 2.食物的顯示的方法-->通過對象調用方法,顯示食物,設置相應的樣式
* 2.1.1 因爲食物要被小蛇吃掉,吃掉後應該再次出現食物,原來的食物就刪除了
* 2.1.2 每一次初始化食物的時候先刪除原來的食物,然後重新的初始化食物
* 2.1.3 通過一個私有的函數(外面不能調用的函數)刪除地圖上的食物,同時最開始的時候食物也相應的保存到一個數組中,再從這個數組中把食物刪除
* 最後的時候,把食物的構造函數給window下的屬性,這樣做,外部就可以直接使用這個食物的構造函數了
*
* 小蛇
* 小蛇就是一個對象
* 屬性: 每個身體都有寬，高，方向
* 屬性:身體分三個部分,每個部分都是一個對象,每個部分都有橫縱座標,背景顏色
* 小蛇要想顯示在地圖上,先刪除之前的小蛇,然後再初始化小蛇(小蛇要移動)--方法
*
* 小蛇要移動---方法
* 思路:把小蛇的頭的座標給小蛇第一部分的身體,第一部分的身體的座標給下一個部分身體
* 小蛇的頭,需要單獨的設置:方向
* */
