/**node
貪吃蛇類app
@author 默識dom
@param {int} speed 貪吃蛇速度,毫秒this
@param {int} x 地圖x軸分爲多少單位prototype
@param {int} y 地圖y軸分爲多少單位code
@returns {Snake} none
*/遊戲
function Snake(speed, x, y) {事件
//貪吃蛇運動速度 this.speed = speed; //貪吃蛇每節身體和食物的寬高 this.width = window.innerWidth / x; this.height = window.innerHeight / y; //地圖xy軸分爲多少單位 this.x = x; this.y = y; //初始化貪吃蛇屬性 this.sBody = [ [0, 1, 'green'], [1, 1, 'green'], [2, 1, 'green'], [3, 1, 'red'] ]; //蛇移動方向 this.sDirection = 'right'; //食物和食物的座標 this.food = null; this.foodX = 0; this.foodY = 0;
}
/**it
遊戲開始io
@returns {undefined} none
*/
Snake.prototype.start = function () {
this.createMap();//建立地圖 this.createFood();//初始化食物 this.createSnake();//初始化貪吃蛇 this.bind();//綁定鍵盤方向更改貪吃蛇方向 //移動貪吃蛇 setInterval(function () { snake.moveSnake(); }, this.speed);
};
/**
建立貪吃蛇地圖
@returns {undefined}none
*/
Snake.prototype.createMap = function () {
document.body.style.backgroundColor = 'black';
};
/**
建立貪吃蛇食物
@returns {undefined}none
*/
Snake.prototype.createFood = function () {
//建立食物 var food = document.createElement('div'); this.food = food; this.foodX = Math.floor(Math.random() * this.x); this.foodY = Math.floor(Math.random() * this.y); //食物的樣式 with (food.style) { position = "absolute"; width = this.width + 'px'; height = this.height + "px"; backgroundColor = 'green'; left = this.foodX * this.width + "px";//食物隨機X軸座標 top = this.foodY * this.height + "px";//食物隨機Y軸座標 } //食物添加到地圖上 document.body.appendChild(food);
};
/**
建立貪吃蛇
@returns {undefined}none
*/
Snake.prototype.createSnake = function () {
//繪製蛇 for (var i = 0; i < this.sBody.length; i++) { this.sBody[i][3] = this.sBody[i][3] || document.createElement("div"); //設置蛇的樣式 with (this.sBody[i][3].style) { position = "absolute"; width = this.width + 'px'; height = this.height + "px"; left = this.sBody[i][0] * this.width + "px"; top = this.sBody[i][1] * this.height + "px"; backgroundColor = this.sBody[i][2]; } //放入地圖中 document.body.appendChild(this.sBody[i][3]); }
};
/**
綁定方向事件更改貪吃蛇運動方向
@returns {undefined}none
*/
Snake.prototype.bind = function () {
var tmp = this; document.onkeyup = function (e) { var e = window.event || e; switch (e.keyCode) { case 37: tmp.sDirection = 'left'; break; case 38: tmp.sDirection = 'up'; break; case 39: tmp.sDirection = 'right'; break; case 40: tmp.sDirection = 'down'; break; } }
};
/**
貪吃蛇行動
@returns {undefined}none
*/
Snake.prototype.moveSnake = function () {
//捨身跟隨前一節運動,即改變座標,注意蛇身先走,要不蛇頭緊隨的一段身體會跟蛇頭重疊 for (var i = 0; i < this.sBody.length - 1; i++) { this.sBody[i][0] = this.sBody[i + 1][0]; this.sBody[i][1] = this.sBody[i + 1][1]; } //蛇運動根據方向改變xy軸座標 switch (this.sDirection) { case 'up': this.sBody[this.sBody.length - 1][1]--; break; case 'right': this.sBody[this.sBody.length - 1][0]++; break; case 'down': this.sBody[this.sBody.length - 1][1]++; break; case 'left': this.sBody[this.sBody.length - 1][0]--; break } //貪吃蛇吃食物 if (this.sBody[this.sBody.length - 1][0] === this.foodX && this.sBody[this.sBody.length - 1][1] === this.foodY ) { //建立一節身體 var node = [this.sBody[0][0], this.sBody[0][1], 'green']; //身體生長 this.sBody.unshift(node); //食物位置重置 this.foodX = Math.floor(Math.random() * this.x); this.foodY = Math.floor(Math.random() * this.y); with (this.food.style) { left = this.foodX * this.width + "px";//食物隨機X軸座標 top = this.foodY * this.height + "px";//食物隨機Y軸座標 } } //判斷遊蛇是否碰到邊界 if (this.sBody[this.sBody.length - 1][0] < 0 || this.sBody[this.sBody.length - 1][0] >= this.x || this.sBody[this.sBody.length - 1][1] < 0 || this.sBody[this.sBody.length - 1][1] >= this.y ) { this.gameover(); return; } //顯示新貪吃蛇位置 this.createSnake();
};
/**
遊戲結束
@returns {undefined} none
*/
Snake.prototype.gameover = function () {
alert("GAME OVER!"); location.reload();
};var snake = new Snake(100, 60, 40);snake.start();