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