/**
* 貪吃蛇
*
* 1.地圖
* 1.1 在html中建立一個div class為map
* 1.2 在style中 寫樣式 寬 高 背景顏色 相對定位
* 1.3 獲取map元素
*
* 2.食物
* 2.1 新建一個空陣列 用來儲存食物
* 2.2 建立一個食物建構函式 用來建立食物物件
* 2.2.1 設定食物建構函式的寬的屬性和預設值
* 2.2.2 設定食物建構函式的高的屬性和預設值
* 2.2.3 設定食物建構函式的背景顏色的屬性和預設值
* 2.2.4 設定食物建構函式的橫縱座標的預設值
* 2.3 建立一個食物的初始化方法 用來刪除舊食物 新建新食物
* 2.3.1 刪除舊食物
* 2.3.2 建立新食物元素
* 2.3.3 給新食物元素新增定位
* 2.3.4 給新食物元素新增寬高
* 2.3.5 給新食物新增背景顏色
* 2.3.6 給新食物新增橫縱座標(x和y)
* 2.3.7 把新食物放到地圖上
* 2.3.8 把新食物放到陣列中
* 2.4 建立一個食物的刪除方法
* 2.4.1 迴圈遍歷2.1 新建的空陣列
* 2.4.1.1 找到新建的空陣列中的每一項
* 2.4.1.2 找到某一項的父節點 刪除地圖上的自己
* 2.4.1.3 去空陣列中刪除自己
* 2.5 把食物的建構函式暴露出去
*
* 3.小蛇
* 3.1 新建一個空陣列 用來儲存小蛇
* 3.2 建立一個小蛇建構函式 用來建立小蛇物件
* 3.2.1 設定小蛇建構函式的屬性 寬 和寬的預設值
* 3.2.2 設定小蛇建構函式的屬性 高 和高的預設值
* 3.2.3 設定小蛇建構函式的屬性 身體(body) 和身體的預設值(x, y , color)
* 3.2.4 設定小蛇的建構函式的屬性 方向(direction) 和方向的預設值
* 3.3 建立一個小蛇的初始化方法 用來刪除舊小蛇 新建新小蛇
* 3.3.1 刪除舊小蛇
* 3.3.2 迴圈遍歷body
* 3.3.2.1 建立新小蛇元素
* 3.3.2.2 給新小蛇元素新增絕對定位
* 3.3.2.3 給新小蛇元素新增寬
* 3.3.2.4 給新小蛇元素新增高
* 3.3.2.5 給新小蛇元素新增背景顏色
* 3.3.2.6 給新小蛇元素新增橫座標
* 3.3.2.7 給新小蛇元素新增縱座標
* 3.3.2.8 把新小蛇新增到地圖中
* 3.3.2.9 把新小蛇新增到3.1 的空陣列中
* 3.4 建立一個小蛇的移動方法
* 3.4.1 遍歷小蛇的身體(body屬性)
* 3.4.2 給小蛇的每節改變座標
* 3.4.3 判斷小蛇的頭和食物的座標是否一致
* 3.4.3.1 獲取小蛇的頭的座標
* 3.4.3.2 判斷小蛇的頭的座標和食物額座標是否一致 如果一致
* 3.4.3.2.1 獲取小蛇的尾巴
* 3.4.3.2.1.1 把尾巴新增到身體的最後 push
* 3.4.3.2.2 刪除舊食物 新建新食物(食物的init方法)
* 3.5 建立一個小蛇的刪除方法
* 3.5.1 迴圈遍歷陣列(倒著遍歷) 倒序遍歷
* 3.5.1.1 找到陣列中的每一項
* 3.5.1.2 找到某一項的父節點刪除自己 在地圖上
* 3.5.1.3 在陣列中刪除自己
* 3.6 把小蛇的建構函式暴露出去
*
* 4.遊戲
* 4.1 建立一個 變數 用來儲存遊戲例項
* 4.2 建立一個遊戲建構函式 用來建立遊戲物件
* 4.2.1 把食物的例項化物件 給遊戲建構函式的food屬性
* 4.2.2 把小蛇的例項化物件 給遊戲建構函式的snake屬性
* 4.2.3 把地圖給遊戲建構函式的map屬性
* 4.3.4 把this儲存到that變數中
* 4.3 建立一個遊戲初始化方法 用來呼叫
* 4.3.1 呼叫食物的初始化方法(初始化食物)
* 4.3.2 呼叫小蛇的初始化方法(初始化小蛇)
* 4.3.3 呼叫小蛇跑起來的方法
* 4.3.4 呼叫按鍵繫結的方法
* 4.4 建立一個小蛇跑起來的方法
* 4.4.0 清理定時器
* 4.4.1 新增一個定時器 (別忘了改變this的指向 如果不改變 是window 如果改變時game)
* 4.4.1.1 呼叫小蛇的移動方法
* 4.4.1.2 呼叫小蛇的初始化方法
* 4.4.1.3 獲取地圖的最大邊界(橫座標 縱座標)
* 4.4.1.4 獲取小蛇頭的橫縱座標
* 4.4.1.5 判斷小蛇的蛇頭座標是否小於0 或 小蛇的蛇頭座標大於等於地圖的最大邊界
* 4.4.1.5.1 如果是這樣的 那麼就停止定時器 彈框 遊戲結束
* 4.4.1.6 判斷小蛇的蛇頭座標是否小於0 或 小蛇的蛇頭座標大於等於地圖的最大邊界
* 4.4.1.6.1 如果是這樣的 那麼就停止定時器 彈框 遊戲結束
* 4.5 建立一個小蛇按鍵繫結的方法
* 4.5.1 直接就給document新增keydonw事件 (別忘了改變this的指向 如果不改變是document 改變時game)
* 4.5.2 switch語句 去重新給小蛇的方向設定屬性值
* 4.6 把遊戲的建構函式暴露出去
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.map {
position: relative;
width: 800px;
height: 600px;
background-color:
}
</style>
</head>
<body>
<div class="map"></div>
<script>
var map = document.querySelector('.map');
(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) {
this.remove();
var cib = document.createElement('div');
cib.style.position = "absolute";
cib.style.width = this.width + "px";
cib.style.height = this.height + "px";
cib.style.backgroundColor = this.color;
this.x = Math.floor(Math.random() * (map.offsetWidth) / this.width) * this.width;
this.y = Math.floor(Math.random() * (map.offsetHeight) / this.height) * this.height;
cib.style.top = this.y + "px";
cib.style.left = this.x + "px";
map.appendChild(cib);
elements.push(cib);
}
Food.prototype.remove = function () {
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i, 1);
}
}
window.Food = Food;
}());
(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) {
this.remove();
for (var i = 0; i <this.body.length; i++) {
var div = document.createElement('div');
div.style.position = "absolute";
div.style.borderRadius = "50%";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.body[i].color;
div.style.left = this.body[i].x * this.width + "px";
div.style.top = this.body[i].y * this.height + "px";
map.appendChild(div);
elements.push(div);
}
}
Snake.prototype.move = function (map, food) {
for (var i = this.body.length - 1; 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 "top":
this.body[0].y -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "bottom":
this.body[0].y += 1;
break;
case "left":
this.body[0].x -= 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];
this.body.push({
x: last.x,
y: last.y,
color: last.color
});
food.init(map);
}
}
Snake.prototype.remove = function () {
for (var i = elements.length-1; i >= 0; i--) {
var ele = elements[i];
ele.parentElement.removeChild(ele);
elements.splice(i, 1);
}
}
window.Snake = Snake;
}());
//game
(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.snake.init(this.map);
this.food.init(this.map);
this.runSnake(this.map,this.food);
this.bindKey();
}
//runSnake方法
Game.prototype.runSnake = function(map,food){
var timer = null;
clearInterval(timer);
timer = setInterval(function(){
this.snake.move(map,food);
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;
console.log(HeadX,HeadY,maxX,maxY);
if(HeadX < 0 || HeadX >= maxX){
clearInterval(timer);
alert("game over");
}
if(HeadY < 0 || HeadY >= maxY){
clearInterval(timer);
alert("game over");
}
}.bind(that),150);
//bindKey方法
Game.prototype.bindKey = function(e){
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 game = new Game(map);
game.init();
</script>
</body>
</html>
複製程式碼