摘要：貪吃蛇類默識貪吃蛇速度，毫秒地圖軸分為多少單位地圖軸分為多少單位貪吃蛇運動速度貪吃蛇每節身體和食物的寬高地圖軸分為多少單位初始化貪吃蛇屬性蛇移動方向食物和食物的坐標游戲開始創建地圖初始化食物初始化貪吃蛇綁定鍵盤方向更改貪吃蛇方向移動貪吃蛇創

/**

貪吃蛇類

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