/**

• 贪吃蛇类

• @author 默识

• @param {int} speed 贪吃蛇速率，毫秒

• @param {int} x 舆图x轴分为若干单元

• @param {int} y 舆图y轴分为若干单元

• @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;

}
/**

• 游戏最先

• @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();