也发个简单的小游戏,贪吃蛇.解决思路 _Web开发

也发个简单的小游戏,贪吃蛇...
HTML code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇 by freewind</title>
<style type="text/css">
html, body{    margin:0px; padding:0px; font-size:12px; font-family:"Courier New";}
#snake{ width:550px; height:400px; margin:50px auto; overflow:hidden;}
#game{ float:left; width:402px; height:302px; border:1px solid #004578;}
#game table{ width:401px; height:301px; border-collapse:collapse; }
#game table td{    width:9px; height:9px; line-height:9px; font-size:2px; overflow:hidden; border:1px solid #fff;}
#game .bg{ background:#0a0;}
#game .food{ background:#c00;}
#info{ float:right; width:128px; line-height:35px;}
#info input{ margin-top:10px; margin-bottom:10px;}
</style>
<script type="text/javascript">
var $ = function(id){
    return typeof id == "string" ? document.getElementById(id) : id;
}
var Snake = {
    init : function(){        
        var self = this;
        $("start").onclick = function(){
            self.start();
            this.blur();
        };
        $("pause").onclick = function(){
            self.pause();
            this.blur();
        };
        document.onkeydown = function(event){ 
            self.control(event) 
        };
        this.maxRow = 30;
        this.maxCol = 40;
    },    
    initHtml : function(){
        $("game").innerHTML = "<table cellpadding='0' cellspacing='0' border='0'>" + new Array(31).join("<tr>"+new Array(41).join("<td>&nbsp;</td>")+"</tr>") + "</table>";
        this.table = $("game").getElementsByTagName("table")[0];
        $("score").innerHTML = 0;
        $("pause").value = "暂停";
    },
    start : function(){
        var self = this;
        this.initHtml();
        this.food = [];
        this.dir = 39;
        this.data = [[15,21],[15,20],[15,19],[15,18]];
        this.status = 1;
        this.speed = 200;
        this.score = 0;
        
        this.stop();
        this.timerID = setInterval(function(){self.timer();}, this.speed);
        this.next();
        this.draw();
    },
    pause : function(){
        var self = this;
        if(this.status == 1){
            this.stop();
            this.status = 2;
            $("pause").value = "继续";
        }else if(this.status == 2){
            this.timerID = setInterval(function(){self.timer();}, this.speed);
            this.status = 1;
            $("pause").value = "暂停";
        }
    },
    stop : function(){
        clearInterval(this.timerID);
    },
    setCss : function(row, col, css){
        this.table.rows[row].cells[col].className = css;
    },
    getCss : function(row, col){
        return this.table.rows[row].cells[col].className;
    },
    timer : function(){
        var d = this.data, self = this;
        var first = [d[0][0], d[0][1]];
        switch(this.dir){
            case 37: //left
                first[1] = first[1] - 1 < 0 ? this.maxCol-1 : first[1] - 1; break;
            case 39: //right
                first[1] = first[1] + 1 >= this.maxCol ? 0 : first[1] + 1;  break;
            case 38: //up
                first[0] = first[0] - 1 < 0 ? this.maxRow-1 : first[0] - 1; break;
            case 40: //down
                first[0] = first[0] + 1 >= this.maxRow ? 0 : first[0] + 1;  break;
        }
        var css = this.getCss(first[0], first[1]);
        if(css == "bg"){
            this.gameOver();
            return;
        }
        if(css == "food"){
            this.next();
            this.score += 100;
            this.speed = this.speed > 50 ? this.speed - 10 : 50;
            clearInterval(this.timerID);
            this.timerID = setInterval(function(){self.timer();}, this.speed);
            $("score").innerHTML = this.score;
        }else{
            var last = d.pop();
            this.setCss(last[0], last[1], "");            
        }
        this.setCss(first[0], first[1], "bg");
        d.unshift(first);
    },
    control : function(event){
        var keyCode = event ? event.keyCode : window.event.keyCode;
        if(this.status == 1 && keyCode >= 37 && keyCode <= 40){
            if(Math.abs(keyCode - this.dir) == 2){
                this.data = this.data.reverse();
            }
            this.dir = keyCode;
        }
    },
    next : function(){
        var d = this.data;
        while(true){
            var row = parseInt(Math.random() * this.maxRow),
                col = parseInt(Math.random() * this.maxCol),
                isFound = false;
            for(var i = 0; i < d.length; i++){
                if(d[i][0] == row && d[i][1] == col){
                    isFound = true;
                    break;
                }
            }
            if(!isFound){
                break;
            }
        }
        this.food = [row, col];
        this.setCss(row, col, "food");
    },
    draw : function(){
        for(var i = 0, d = this.data; i < d.length; i++){
            this.setCss(d[i][0], d[i][1], "bg");;
        }
    },
    gameOver : function(){
        this.stop();
        this.status = 0;
        alert("game over");
    },
    dispose : function(){
        this.stop();
        document.onkeydown = $("start").onclick = $("pause").onclick = null;
    }
};
window.onload = function(){
    Snake.init();
};
window.onunload = function(){
    Snake.dispose();
};
</script>
</head>
<body>
        <div id="snake">
        <div id="game"></div>
        <div id="info">
            <div>分数:<span id="score">0</span></div>
            <div><input type="button" value="开始" id="start" /></div>
            <div><input type="button" value="暂停" id="pause" /></div>
        </div>
    </div>
</body>
</html>