javascript贪吃蛇

CSS:

    <style>
        body{background: #000;}
        div.wrap{margin-top: 100px;}
        table{border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;margin: 0 auto;}
        table td{width: 25px;height: 25px;border-top: 1px solid #ccc;border-left: 1px solid #ccc;background: #000;}
        p{color:#fff;text-align: center;width: 180px;margin: 20px auto;cursor: pointer;}
    </style>

HTML:

    <div class="wrap" id="wrap"></div>
    <div><p id="start">开始</p></div>
    <script src="index.js"></script>
    <script>
        window.onload = function(){
            snake.init();
        }
    </script>

JS:

    var snake = {
    "wrap" : document.getElementById("wrap"),
    "oSta" : document.getElementById("start"),
    "size" : 15,
    "body" : new Array(),
    "food" : new Array(),
    "direction" : null,
    "row" : 0,
    "col" : 0,
    "istart" : true,
    "timer" : null,
    "init" : function(){
        this.grid();
        this.createSnake();
        this.createFood();
        this.start();
        this.oper();
    },
    //生成格子
    "grid" : function(){
        var result = '<table cellpadding="0" cellspacing="0">';
        for (var i = 0; i < this.size; i++) {
            result += '<tr>';
            for (var j = 0; j < this.size; j++) {
                result += '<td id="x'+j+'y'+i+'" type="map"></td>';
            }
            result += '</tr>';
        }
        result += '</table>';
        this.wrap.innerHTML = result;
    },
    // 生成snake
    "createSnake" : function(){
        var x =     Math.floor(Math.random()*(this.size-2));
        var y = Math.floor(Math.random()*this.size);
        this.body[0] = new Array(x,y);
        var head = document.getElementById("x"+x+"y"+y);
        head.style.background = "#3FBB5A";
        head.setAttribute("type","snake");
        for (var i = 1; i < 3; i++) {
            this.body[i] = new Array(++x,y);
            head = document.getElementById("x"+x+"y"+y);
            head.style.background = "#3FBB5A";
            head.setAttribute("type","snake");
        }
    },
    // 生成食物
    "createFood" : function(){
        var x = Math.floor(Math.random()*this.size);
        var y = Math.floor(Math.random()*this.size);
        while(document.getElementById("x"+x+"y"+y).getAttribute("type") != "map"){
            x = Math.floor(Math.random()*this.size);
            y = Math.floor(Math.random()*this.size);
        }
        this.food[0] = new Array(x,y);
        var foods = document.getElementById("x"+x+"y"+y);
        foods.style.background = "#f00";
        foods.setAttribute("type","food");
    },
    // 点击开始
    "start" : function(){
        var This = this;
        This.oSta.onclick = function(){
            if(This.istart){
                This.istart = false;
                This.row = -1;
                This.col = 0;
                This.direction = "left";
                if(This.body[0][0] == 0){
                    This.row = 1;
                    This.col = 0;
                    This.direction = "right";
                    This.body.reverse();
                }
                This.timer = setInterval(function(){
                    This.move();
                },200);
            }else{
                clearInterval(This.timer);
            }
            this.innerHTML = "可用空格控制暂停继续";
        }
    },
    // 上下左右操作
    "oper" : function(){
        var This = this;
        document.onkeydown=function(event){
            var ev = event || window.event;
            if(ev.keyCode == 37){ // ←
                if(This.direction == "right")
                    return;
                This.row = -1;
                This.col = 0;
                This.direction = "left";
            }else if(ev.keyCode == 38){ // ↑
                if(This.direction == "down")
                    return;
                This.row = 0;
                This.col = -1;
                This.direction = "up";
            }else if(ev.keyCode == 39){ // →
                if(This.direction == "left")
                    return;
                This.row = 1;
                This.col = 0;
                This.direction = "right";
            }else if(ev.keyCode == 40){ // ↓
                if(This.direction == "up")
                    return;
                This.row = 0;
                This.col = 1;
                This.direction = "down";
            }else if(ev.keyCode == 32){ // 暂停
                if(This.timer){
                    clearInterval(This.timer);
                    This.timer = 0;
                }else{
                    This.timer = setInterval(function(){
                        This.move();
                    },200);
                }
            }
        }
    },
    // 运动
    "move" : function(){
        var x = this.body[0][0] + this.row;
        var y = this.body[0][1] + this.col;
        if(document.getElementById("x"+x+"y"+y)){
            node = document.getElementById("x"+x+"y"+y);
        }else{
            this.die();
            return;
        }
        var type = node.getAttribute("type");
        this.body.unshift(new Array(x,y));
        if(type == "map"){
            node.style.background = "#3FBB5A";
            node.setAttribute("type","snake");
            var pop = this.body.pop();
            var last = document.getElementById("x"+pop[0]+"y"+pop[1]);
            last.style.background = "#000";
            last.setAttribute("type","map");
        }else if(type == "food"){
            node.style.background = "#3FBB5A";
            node.setAttribute("type","snake");
            this.createFood();
        }else{
            this.die();
        }
    },
    // 死亡
    "die" : function(){
        clearInterval(this.timer);
        alert("GAME OVER！最终关数:"+(this.body.length-3));
        window.location.reload();
    }
}

效果:
例子链接：http://pan.baidu.com/s/1i5BDRO5