偶也写了个贪吃蛇，代码很短，欢迎大家pp


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    function createCell(x, y){      //创建单元格
        var newDiv = document.createElement("div");
        newDiv.style.position = "absolute";
        newDiv.style.width = cellWidth + "px";
        newDiv.style.height = cellWidth + "px";
        newDiv.style.background = "#999933";
        newDiv.style.border = "solid 1px #666633";
        newDiv.style.top = 100 + cellWidth*y + "px";
        newDiv.style.left = document.body.clientWidth/2 - boardWidth/2*cellWidth + x*cellWidth + "px";
        
        document.getElementById("content").appendChild(newDiv);
        
        return newDiv;
    }
    
    function productFood(){     //随机产生食物
        var foodX = Math.round(Math.random()*(boardWidth-1));
        var foodY = Math.round(Math.random()*(boardWidth-1));
        for(var i=0; i<snake.body.length; i++){
            if(snake.body[i].x==foodX && snake.body[i].y==foodY){
                productFood();
                return;
            }
        }
        board[foodX][foodY].style.background = "#333300";
        board[foodX][foodY].isFood = true;
    }
    
    function move(){        //移动——计算下一步的显示区域
        var newX, newY;
        newX = newY = 0;
        switch(snake.way){
            case "right" : newX = snake.body[0].x < boardWidth-1 ? snake.body[0].x+1 : 0;
                           newY = snake.body[0].y;
                           setStyle();
                           break;
                          
            case "left"  : newX = snake.body[0].x > 0 ? snake.body[0].x-1 : boardWidth-1;
                           newY = snake.body[0].y;
                           setStyle();
                           break;
            
            case "up"    : newX = snake.body[0].x;
                           newY = snake.body[0].y > 0 ? snake.body[0].y-1 : boardWidth-1;
                           setStyle();
                           break;
            
            case "down"  : newX = snake.body[0].x;
                           newY = snake.body[0].y < boardWidth-1 ? snake.body[0].y+1 : 0;
                           setStyle();
                           break;
        }
        
        function setStyle(){        //闭包
            for(var i=0; i<snake.body.length; i++){
                if(snake.body[i].x==newX && snake.body[i].y==newY){
                    clearInterval(loop);
                    alert("游戏结束，你吃掉了自己的身体");
                    return;
                }
            }
            
            snake.body.splice(0,0,{x:newX, y:newY});
            board[newX][newY].style.background = "#333300";
            
            if(board[newX][newY].isFood){
                board[newX][newY].isFood = false;
                productFood();
            }
            else{
                var cell = snake.body.pop();
                board[cell.x][cell.y].style.background = "#999933";
            }
        }
    }
    
    function changeBoard(val){  //更改区域设置
        document.body.focus();
        board = null;
        boardWidth = val;
        snake.body = [{x:0, y:0}];
        snake.way = "left";
        clearInterval(loop);
        main();
    }
    
    function changeSpeed(val){      //更改速度设置
        document.body.focus();
        board = null;
        snake.moveSpeed = val;
        snake.body = [{x:0, y:0}];
        snake.way = "left";
        clearInterval(loop);
        main();
    }
    
    var cellWidth = 13;     //单元格宽度高度
    var boardWidth = 20;    //区域宽度高度
    var board;              //区域
    var snake = {           //蛇
        body:[{x:0, y:0}],
        way:"left",
        moveSpeed:500
    };
    var loop;               //循环
    
    function main(){
        //清空body
        if(document.getElementById("content")){
            document.getElementById("content").innerHTML = "";
        }
        else{
            var newDiv = document.createElement("div");
            newDiv.id = "content";
            document.body.appendChild(newDiv);
        }
        
        //画盘
        board = new Array(boardWidth);
        for(var x=0; x<boardWidth; x++){
            board[x] = new Array(boardWidth);
            for(var y=0; y<boardWidth; y++){
                (function(){
                    var _x = x;
                    var _y = y;
                    setTimeout(function(){
                        board[_x][_y] = createCell(_x, _y);
                    }, _y*69);
                })();
            }
        }        //捕获方向键
        document.body.onkeydown = function(){
            switch(event.keyCode){
                case 38 : snake.way = (snake.way=="left" || snake.way=="right") ? "up" : snake.way; break;
                case 40 : snake.way = (snake.way=="left" || snake.way=="right") ? "down" : snake.way; break;
                case 37 : snake.way = (snake.way=="up" || snake.way=="down") ? "left" : snake.way; break;
                case 39 : snake.way = (snake.way=="up" || snake.way=="down") ? "right" : snake.way; break;
            }
        }
        
        //延迟开始，等待加载
        setTimeout(function(){
            productFood();
            loop = setInterval(function(){
                move();
            }, snake.moveSpeed);
        }, boardWidth*100);
    }
    
    window.onload = main;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="select">
        20*20：<input id="Radio1" name="boardOnly" onclick="changeBoard(20)" checked="checked" type="radio" /><br />
        30*30：<input id="Radio2" name="boardOnly" onclick="changeBoard(30)" type="radio" /><br />
        <br /><br />
        拖拉机：<input id="Radio4" name="speedOnly" onclick="changeSpeed(600)" checked="checked" type="radio" /><br />
        汽车：<input id="Radio5" name="speedOnly" onclick="changeSpeed(300)" type="radio" /><br />
        火车：<input id="Radio6" name="speedOnly" onclick="changeSpeed(200)" type="radio" /><br />
        飞机：<input id="Radio7" name="speedOnly" onclick="changeSpeed(90)" type="radio" /><br />
        飞船：<input id="Radio8" name="speedOnly" onclick="changeSpeed(20)" type="radio" /><br />
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    修改了一个小bug 欢迎继续pp
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript">
        function createCell(x, y){      //创建单元格
            var newDiv = document.createElement("div");
            newDiv.style.position = "absolute";
            newDiv.style.width = cellWidth + "px";
            newDiv.style.height = cellWidth + "px";
            newDiv.style.background = "#999933";
            newDiv.style.border = "solid 1px #666633";
            newDiv.style.top = 100 + cellWidth*y + "px";
            newDiv.style.left = document.body.clientWidth/2 - boardWidth/2*cellWidth + x*cellWidth + "px";
            
            document.getElementById("content").appendChild(newDiv);
            
            return newDiv;
        }
        
        function productFood(){     //随机产生食物
            var foodX = Math.round(Math.random()*(boardWidth-1));
            var foodY = Math.round(Math.random()*(boardWidth-1));
            for(var i=0; i<snake.body.length; i++){
                if(snake.body[i].x==foodX && snake.body[i].y==foodY){
                    productFood();
                    return;
                }
            }
            board[foodX][foodY].style.background = "#333300";
            board[foodX][foodY].isFood = true;
        }
        
        function move(){        //移动——计算下一步的显示区域
            var newX, newY;
            newX = newY = 0;
            switch(snake.way){
                case "right" : newX = snake.body[0].x < boardWidth-1 ? snake.body[0].x+1 : 0;
                               newY = snake.body[0].y;
                               setStyle();
                               break;
                              
                case "left"  : newX = snake.body[0].x > 0 ? snake.body[0].x-1 : boardWidth-1;
                               newY = snake.body[0].y;
                               setStyle();
                               break;
                
                case "up"    : newX = snake.body[0].x;
                               newY = snake.body[0].y > 0 ? snake.body[0].y-1 : boardWidth-1;
                               setStyle();
                               break;
                
                case "down"  : newX = snake.body[0].x;
                               newY = snake.body[0].y < boardWidth-1 ? snake.body[0].y+1 : 0;
                               setStyle();
                               break;
            }
            
            function setStyle(){        //闭包
                for(var i=0; i<snake.body.length; i++){
                    if(snake.body[i].x==newX && snake.body[i].y==newY){
                        clearInterval(loop);
                        alert("游戏结束，你吃掉了自己的身体");
                        return;
                    }
                }
                
                snake.body.splice(0,0,{x:newX, y:newY});
                board[newX][newY].style.background = "#333300";
                
                if(board[newX][newY].isFood){
                    board[newX][newY].isFood = false;
                    productFood();
                }
                else{
                    var cell = snake.body.pop();
                    board[cell.x][cell.y].style.background = "#999933";
                }
            }
        }
        
        function changeBoard(val){  //更改区域设置
            document.body.focus();
            board = null;
            boardWidth = val;
            snake.body = [{x:0, y:0}];
            snake.way = "left";
            clearInterval(loop);
            main();
        }
        
        function changeSpeed(val){      //更改速度设置
            document.body.focus();
            board = null;
            snake.moveSpeed = val;
            snake.body = [{x:0, y:0}];
            snake.way = "left";
            clearInterval(loop);
            main();
        }
        
        var cellWidth = 13;     //单元格宽度高度
        var boardWidth = 20;    //区域宽度高度
        var board;              //区域
        var snake = {           //蛇
            body:[{x:0, y:0}],
            way:"left",
            moveSpeed:500
        };
        var loop;               //循环
        
        function main(){
            //清空body
            if(document.getElementById("content")){
                document.getElementById("content").innerHTML = "";
            }
            else{
                var newDiv = document.createElement("div");
                newDiv.id = "content";
                document.body.appendChild(newDiv);
            }
            
            //画盘
            board = new Array(boardWidth);
            for(var x=0; x<boardWidth; x++){
                board[x] = new Array(boardWidth);
                for(var y=0; y<boardWidth; y++){
                    (function(){
                        var _x = x;
                        var _y = y;
                        setTimeout(function(){
                            board[_x][_y] = createCell(_x, _y);
                        }, _x*69);
                    })();
                }
            }        //捕获方向键
            document.body.onkeydown = function(){
                var oldWay = snake.way;
                switch(event.keyCode){
                    case 38 : snake.way = (snake.way=="left" || snake.way=="right") ? "up" : snake.way; break;
                    case 40 : snake.way = (snake.way=="left" || snake.way=="right") ? "down" : snake.way; break;
                    case 37 : snake.way = (snake.way=="up" || snake.way=="down") ? "left" : snake.way; break;
                    case 39 : snake.way = (snake.way=="up" || snake.way=="down") ? "right" : snake.way; break;
                }
                
                if(oldWay != snake.way) move();
            }
            
            //延迟开始，等待加载
            setTimeout(function(){
                productFood();
                loop = setInterval(function(){
                    move();
                }, snake.moveSpeed);
            }, boardWidth*100);
        }
        
        window.onload = main;
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="select">
            20*20：<input id="Radio1" name="boardOnly" onclick="changeBoard(20)" checked="checked" type="radio" /><br />
            30*30：<input id="Radio2" name="boardOnly" onclick="changeBoard(30)" type="radio" /><br />
            <br /><br />
            拖拉机司机：<input id="Radio4" name="speedOnly" onclick="changeSpeed(300)" checked="checked" type="radio" /><br />
            汽车司机：<input id="Radio5" name="speedOnly" onclick="changeSpeed(200)" type="radio" /><br />
            火车司机：<input id="Radio6" name="speedOnly" onclick="changeSpeed(100)" type="radio" /><br />
            飞机司机：<input id="Radio7" name="speedOnly" onclick="changeSpeed(30)" type="radio" /><br />
            飞船司机：<input id="Radio8" name="speedOnly" onclick="changeSpeed(10)" type="radio" /><br />
        </div>
        </form>
    </body>
    </html>
      

  2.   

    30*30，就是900个DIV，速度不慢才怪呢。楼主有时间的话，本着程序员的精益求精精神，应该改成一个DIV。牺牲掉网格（无关大局，只是去掉了一个降低难度的辅助功能），但能大大提高速度，也有益于用户的硬件寿命。
      

  3.   

    代学生的一个练习 欢迎比对<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     <script type="text/javascript">
     <!--
    var unit=15;
    var rows=20;
    var cols=30;
    var stop;
    var gameMap;
    var fangXiang=37;
    //var arr_snake=new Array();
    var arr_snake_x=new Array();
    var arr_snake_y=new Array();
    var snake_length=1;
    for(j=0;j<snake_length;j++){
    arr_snake_x[j]=10;
    arr_snake_y[j]=10+j; }
    var sx=parseInt(Math.random()*cols );
    var sy=parseInt(Math.random()*rows );

    //初始化
    function init()
    {
    createMap();
    createBean();
    createSnake();
    } //建立地图
    function createMap()
    {
    var ogameSanke=document.getElementById("gameSanke");
    ogameSanke.innerHTML="<div class='gameMap' id='gameMap' style='width: "+unit*cols+"px;height:"+unit*rows+"px;' ></div>";
    gameMap=new Array();
    for(y=0;y<rows;y++)
    {
    gameMap[y]=new Array();
    for (x=0;x<cols ;x++ )
    {
    gameMap[y][x]='0';
    }
    }
    } //创建豆
    function createBean()
    {
    bx=parseInt(Math.random()*cols );
    by=parseInt(Math.random()*rows );
    var ogameSanke=document.getElementById("gameMap");
    ogameSanke.innerHTML+="<span class='Bean' style='width: "+unit+"px;height:"+unit+"px;left:"+unit*bx+"px;top:"+unit*by+"px;' >d</span>";
    gameMap[by][bx]='bean'; } //创建蛇
    function createSnake()
    {
    //snake_length++;
    //arr_snake[snake_length-1][0]=sx;
    //arr_snake[snake_length-1][1]=sy;
    //alert(snake_length);
    var ogameSanke=document.getElementById("gameMap");

    for(j=0;j<snake_length;j++){
    ogameSanke.innerHTML+="<div class='Snake'  style='width: "+unit+"px;height:"+unit+"px;left:"+unit*arr_snake_x[j]+"px;top:"+unit*arr_snake_y[j]+"px;' ></div>"; }
    } //
    function keyDown()
    {
    clearTimeout( stop);
    var key=event.keyCode;
    ////防止蛇反向爬
    if( (fangXiang+key)%2 !=0 )
    {
    fangXiang=key;
    }                switch(fangXiang)
                    {
                        case 37: //左
    move(-1,0);
                            break;
                        case 38:
    move(0,-1);
                            break;
                        case 39:
    move(1,0);
                            break;
                        case 40:
    move(0,1);
                            break;
                    }
    return false;
    } //蛇爬
    function move(x,y)
    {
    //sx+=x;
    //sy+=y;
                    var oSanke=document.getElementById("gameMap").getElementsByTagName('div'); for (j=snake_length-1 ;j>0 ;j-- )
    {
    arr_snake_x[j]=arr_snake_x[j-1];
    arr_snake_y[j]=arr_snake_y[j-1];
    }
    arr_snake_x[0]+=x;
    arr_snake_y[0]+=y;
    if(arr_snake_x[0]>=0 && arr_snake_x[0]<=cols && arr_snake_y[0]>=0 && arr_snake_y[0]<=rows){
    //oSanke[0].style.left=(sx)*unit+'px';
    //oSanke[0].style.top=(sy)*unit+'px';
    for ( len=0 ;len<snake_length ;len++ )
    {
    oSanke[len].style.left=(arr_snake_x[len])*unit+'px';
    oSanke[len].style.top=(arr_snake_y[len])*unit+'px';
    } eat(arr_snake_x[0],arr_snake_y[0]);
    stop=setTimeout( 'move('+x+','+y+')' , 500);
    }else{
    over();
    }
    }



    //吃
    function eat(x,y){
    if (gameMap[y][x]=='bean')
    {
                var obean=document.getElementById("gameMap").getElementsByTagName('span');
                obean[0].removeNode(true);
    createBean();
    //createSnake();
    zhangchang()
    }

    }
    //长长
    function zhangchang(){
    arr_snake_x[snake_length]=arr_snake_x[snake_length-1];
    arr_snake_y[snake_length]=arr_snake_y[snake_length-1];
    var ogameSanke=document.getElementById("gameMap");
    ogameSanke.innerHTML+="<div class='Snake'  style='width: "+unit+"px;height:"+unit+"px;left:"+unit*arr_snake_x[snake_length]+"px;top:"+unit*arr_snake_y[snake_length]+"px;' ></div>";

    snake_length++;
    }
    //死
    function over()
    {
    restart=confirm("游戏结束");
    if(restart){
    window.location.reload();
    }
    }
    //执行
    window.onload=init;
    document.onkeydown=keyDown;
     //-->
     </script>
     <style>
    .gameMap{position:absolute; border:5px outset #00f ;background-color:#eee}
    .Bean{position:absolute; background-color:#f00;border:1px outset #fc0; }
    .Snake{position:absolute; background-color:#00f;border:1px outset #66CCFF }
     </style>
     </head> <body>
    <div id="gameSanke"></div>
     </body>
    </html>
      

  4.   

    楼上的很good 但我觉得可以更“对象”一点 更容易理解javascript本身是可以非常灵活的操纵对象的