HTML5贪吃蛇游戏

以保存对javascript的些许理解

/****************/
/*****game.js****/
/****************/
Array.prototype.remove = function (obj) {
    for (var i = 0, l = this.length; i < l; i++) {

        if (this[i] == obj) {
            this.splice(i, 1);
            break;
        }
    }
}

var Game = {
    //循环ID
    timeId: -1,
    //context2d对象
    gamebg: null,
    //游戏背景信息
    gameinfo: {},
    //开始按钮
    btn: null,
    //初始化
    snake: null,
    food: null,
    init: function () {
        //获取游戏背景dom
        var game_dom = document.getElementById('gamebg'),
        This = this;
        //设置游戏背景信息
        this.gameinfo = {
             game_dom.clientWidth,
            height: game_dom.clientHeight,
            left: game_dom.offsetLeft,
            top: game_dom.offsetTop
        };
        //获取context2d对象
        this.gamebg = game_dom.getContext('2d');
        //绑定键盘按下事件
        document.onkeydown = function (e) { This.keyDown(e); };
        //创建小球
        this.snake = new Snake(7, this.gameinfo.width, this.gameinfo.height);
        this.food = new Food(100, 100, 4, 'red');
        //this.createFood();
    },

    keyDown: function (e) {
        var d = this.snake.direction;
        switch (e.keyCode) {
            case 37:
                d = 9;
                break;
            case 38:
                d = 12;
                break;
            case 39:
                d = 3;
                break;
            case 40:
                d = 6;
                break;
            case 32:
                this.pause(document.getElementById('Button2'));
                break;
        }
        if (Math.abs(this.snake.direction - d) != 6) {
            this.snake.oldDirection = this.snake.direction;
            this.snake.direction = d;
        }
        else {
            this.snake.back = 1;
        }
    },

    //btn:开始按钮dom
    start: function (btn) {

        if (this.btn) this.reset();

        this.btn = btn;
        this.btn.disabled = 'disabled';
        var This = this;
        this.init();
        //开始画画
        this.timeId = setInterval(function () {
            This.process();
        }, 80);
    },

    process: function () {
        //清除画面
        this.gamebg.clearRect(0, 0, this.gameinfo.width, this.gameinfo.height);
        this.snake.update(this.food);
        var body = this.snake.Body;
        Canvas.arc(this.gamebg, this.food.X, this.food.Y, this.food.Radius, this.food.Color);
        for (var i = 0; i < body.length; i++) {
            Canvas.arc(this.gamebg, body[i].X, body[i].Y, body[i].Radius, body[i].Color);
        }

        //判断游戏是否结束
        if (this.snake.Body.length == 0) {
            clearInterval(this.timeId);
            var score = document.getElementById("score");
            alert('您的分数是：' + score.innerHTML);
            this.btn.disabled = '';
        }
    },

    //重置游戏数据
    reset: function () {
        this.food = null;
        this.snake = null;
        this.timeId = -1;
        this.gamebg = null;
        this.gameinfo = {};
        var score = document.getElementById("score");
        score.innerHTML = 0;
    },

    pause: function (btn) {
        if (btn.value == 'Pause') {
            clearInterval(this.timeId);
            btn.value = 'Run';
        }
        else if (btn.value == 'Run') {
            btn.value = 'Pause';
            var This = this;
            this.timeId = setInterval(function () {
                This.process();
            }, 80);
        }
    }

}

/****************/
/*****food.js****/
/****************/
var Food = function (x, y, radius, color) {
    this.X = x;
    this.Y = y;
    this.Radius = radius;
    this.Color = color;
    this.fpt = 10000;
    this.lastUpdata = 0;
}

Food.prototype =
{
    update: function () {
        this.X = parseInt(Math.random() * 380 + 8, 10);
        this.Y = parseInt(Math.random() * 380 + 8, 10);
    }

}

/****************/
/*****Canvas.js****/
/****************/
var Canvas = {
    //画圆
    //ctx:context2d对象,x:圆心x坐标,y:圆心y坐标,radius:半径,color:颜色
    arc: function (cxt, x, y, radius, color) {
        cxt.fillStyle = color;
        cxt.beginPath();
        cxt.arc(x, y, radius, 0, Math.PI * 2, true);
        cxt.closePath();
        cxt.fill();
    }

}

/****************/
/*****Bone.js****/
/****************/
var Bone = function (x, y, radius, color) {
    this.X = x;
    this.Y = y;
    this.Radius = radius;
    this.Color = color;

}

/****************/
/*****Snake.js****/
/****************/
var Snake = function (length, width, height) {
    this.fpt = 40;
    this.Body = [];
    this.lastUpdata = 0;
    this.speed = 8;
    this.oldDirection = 6;
    this.direction = 6;
    var centerX = parseInt(width / 2, 10);
    var centerY = parseInt(height / 2, 10);

    var bone = new Bone(centerX, centerY, 4, 'blue');
    this.Body.push(bone);

    for (var i = 0; i < length - 1; i++) {
        var bone = new Bone(centerX, centerY - (8 * (i + 1)), 4, 'blue');
        this.Body.push(bone);
    }

    this.cornerX = centerX;
    this.cornerY = centerY;
    this.back = 0;
}

Snake.prototype =
{
    update: function (food) {
        if (this.lastUpdata % this.fpt == 0) {

            if (this.back == 1) {
                this.back = 0;
                var last = this.Body[this.Body.length - 1];
                var secondLast = this.Body[this.Body.length - 2];

                if (last.Y - secondLast.Y > 0) {
                    this.direction = 6;
                }
                else if (last.Y - secondLast.Y < 0) {
                    this.direction = 12;
                }
                else if (last.X - secondLast.X < 0) {
                    this.direction = 9;
                }
                else if (last.X - secondLast.X > 0) {
                    this.direction = 3;
                }
                this.Body.reverse();
            }


            //记录蛇头的原始坐标
            this.cornerX = this.Body[0].X;
            this.cornerY = this.Body[0].Y;

            //定义蛇头的新位置
            switch (this.direction) {
                case 12:
                    this.Body[0].Y -= this.speed;
                    break;
                case 6:
                    this.Body[0].Y += this.speed;
                    break;
                case 3:
                    this.Body[0].X += this.speed;
                    break;
                case 9:
                    this.Body[0].X -= this.speed;
                    break;
                default:
                    break;
            }
            //蛇身的新位置为前一个节点的位置
            for (var i = this.Body.length - 1; i > 1; i--) {
                this.Body[i].X = this.Body[i - 1].X;
                this.Body[i].Y = this.Body[i - 1].Y;
            }

            //定义蛇尾的新位置
            this.Body[1].X = this.cornerX;
            this.Body[1].Y = this.cornerY;

            this.eatFood(food);
            var over = false;
            for (var j = 0; j < this.Body.length; j++) {
                var bone = this.Body[j];
                if (bone.X < 0 || bone.Y < 0 || bone.X > 400 || bone.Y > 400) {
                    over = true;
                    break;
                }
            }

            if (over) {
                this.Body.length = 0;
            }
        }

        //时间累加
        this.lastUpdata += 10;
    },

    eatFood: function (food) {
        var i, l, bone, isTouch = false;
        //遍历蛇身体
        for (i = 0, l = this.Body.length; i < l; i++) {
            var bone = this.Body[i];
            //判断蛇身与食物的圆心距
            if (Math.sqrt(Math.pow(bone.X - food.X, 2) + Math.pow(bone.Y - food.Y, 2)) <= bone.Radius + food.Radius) {
                isTouch = true;
                break;
            }
        }

        //给蛇增加一节
        if (isTouch) {
            var head = this.Body[0];
            var x = head.X;
            var y = head.Y;
            switch (this.direction) {
                case 12:
                    y = y - head.Radius * 2;
                    break;
                case 3:
                    x = x + head.Radius * 2;
                    break;
                case 6:
                    y = y + head.Radius * 2;
                    break;
                case 9:
                    x = x - head.Radius * 2;
                    break;
            }
            var newBone = new Bone(x, y, head.Radius, head.Color);
            this.Body.push(newBone);

            //随机改变食物的位置
            food.X = -100;
            food.Y = -100;
            setTimeout(function () {
                food.update();
            }, 800);
            var score = document.getElementById("score");
            score.innerHTML = parseInt(score.innerHTML) + 1;
            if (this.fpt > 10) {
                this.fpt -= 10;
            }
        }
    }

} 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="game.js" type="text/javascript"></script>
    <script src="Bone.js" type="text/javascript"></script>
    <script src="Canvas.js" type="text/javascript"></script>
    <script src="Snake.js" type="text/javascript"></script>
    <script src="food.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="gamebg" width="400" height="400" style="background: Black;">您的浏览器不支持html5，请使用chrome或者ff</canvas>
    <input id="Button1" type="button" value="Start" onclick="Game.start(this)" />
    <input id="Button2" type="button" value="Pause" onclick="Game.pause(this)" />
    <br />
<div id="score">0</div>
</body>

</html>