JS写的贪吃蛇

         昨晚睡前突然想用JS写一个贪吃蛇的程序。下午没什么事，于是就动笔了。不够熟练，花了两小时，更惭愧的是还有点问题，就是从吃第二个食物开始蛇的长度就不会增加了。整条蛇是一个对象数组，测试时发现数组的长度是正确的，只是保存的坐标有误，然未能想到怎么修正。 

        过了一天，晚上重新拿出来看，突然想到了是哪的问题。现将代码分享如下：

 

< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > 贪吃蛇 </ title >
< style >
.tb
... {
    font-size:9px;
}
</ style >
</ head >

< body >
< table border = " 0 "  bgcolor = " #CEE0F9 "  cellpadding = " 0 "  cellspacing = " 1 "  align = " center "  class = " tb " >
<%
    response.Write( " <tr><td></td> " )
     for  i = 10  to  34
        response.Write( " <td height='10px' width='10px' bgcolor='white' align='center'> " & i & " </td> " & chr( 13 ))
    next
     for  i = 10  to  34
        response.Write( " <tr><td height='10px' width='10px' bgcolor='white' align='center'> " & i & " </td> " & chr( 13 ))
         for  j = 10  to  34
            response.Write( " <td height='10px' width='10px' bgcolor='white' id='bg " & i & j & " '></td> " & chr( 13 ))
        next
        response.Write( " </tr> " & chr( 13 ))
    next
%>
< tr >< td align = " center "  colspan = " 25 "  style = " font-size:12px; "  valign = " middle " > 请选择难度: < select  name = " level "  onChange = " setlevel(); " >< option value = " 400 " > 一般 </ option >< option value = " 250 " > 中等 </ option >< option value = " 150 " > 疯狂 </ option ></ select >
    上：W & nbsp;下：S & nbsp;左：A & nbsp;右：D & nbsp; </ td ></ tr >
< tr >< td colspan = " 25 "  align = " center " >< input type = " button "  value = " 开始 "  onClick = " javascript:play(); "  name = " playnow " ></ td ></ tr >
</ table >
< div id = " test "  style = " font-size:12px; " ></ div >
</ body >
< script language = " javascript " >
     var  Time = 350 ,sco = 100 ,FlagTemp = "" ;

     function  snakecell(fx,fy)     // 定义蛇的结点
     ... {
        var snakecell = new Object();
        snakecell.cellx = fx;    //结点的横坐标
        snakecell.celly = fy;    //结点的纵坐标
        return snakecell;
    }
     var  score  =   0 ;     // 得分
     var  Snake  =   new  Array();
     var  MoveFlag  =   "" ;     // 定义行走方向，为空表示不行走

     function  createpoint()         // 随机生成小于25大于9的整数
     ... {
        var suc=false;
        while(!suc)
        ...{
            var number = Math.floor(Math.random()*35);
            if(number>9)
                suc=true;
        }
        return number;
    }
    
     function  checkfood(foodx,foody)     // 检测食物是否与snake的位置重叠并且坐标有效
     ... {
        if(foodx<10||foodx>34||foody<10||foody>34)    //如果超出边界
            return false;    
        else
        ...{
            for(var i=0;i<Snake.length;i++)
            ...{
                if(foodx==Snake[i].cellx&&foody==Snake[i].celly)    //如果坐标值与某个元素的坐标值一致
                    return false;
            }
            return true;
        }
    }
        
     function  createfood()     // 随机生成食物，以蓝色显示
     ... {
        var i=-1;
        var j=-1;
        while(!checkfood(i,j))
        ...{
            i=createpoint();
            j=createpoint();
        }
        document.getElementById("bg"+i+j).style.backgroundColor="blue";    
    }
    
     function  createsnakehead()         // 创建蛇
     ... {
        Snake[0]=snakecell();
        Snake[0].cellx=createpoint();
        Snake[0].celly=createpoint();
        showsnake();
    }
    
     function  ManageSnake()     // 控制这条蛇
     ... {
        if(MoveFlag=="")    //如果标志为空表示暂停
            return;
        if(MoveFlag=="up")        //向上移
        ...{
            if(Snake[0].cellx==10)
                MoveSnake(34,Snake[0].celly%35);
            else            
                MoveSnake((Snake[0].cellx-1)%35,Snake[0].celly%35);
        }
        if(MoveFlag=="down")
        ...{
            if(Snake[0].cellx==34)
                MoveSnake(10,Snake[0].celly%35);            
            else
                MoveSnake((Snake[0].cellx+1)%35,Snake[0].celly%35);
        }
        if(MoveFlag=="left")
        ...{
            if(Snake[0].celly==10)
                MoveSnake((Snake[0].cellx)%35,34);    
            else                
                MoveSnake((Snake[0].cellx)%35,(Snake[0].celly-1)%35);        
        }
        if(MoveFlag=="right")
        ...{
            if(Snake[0].celly==34)
                MoveSnake((Snake[0].cellx)%35,10);                
            else
                MoveSnake((Snake[0].cellx)%35,(Snake[0].celly+1)%35);        
        }
        showsnake();                    
    }
    
     function  MoveSnake(hx,hy)         // 移动这条蛇
     ... {
            var headx=hx;
            var heady=hy;
//            alert(headx+"  "+heady);
            var endx=Snake[Snake.length-1].cellx;
            var endy=Snake[Snake.length-1].celly;
            if(document.getElementById("bg"+headx+heady).style.backgroundColor=="blue")        //如果是食物
            ...{
                for(var step=Snake.length-1;step>0;step--)    //从第二个蛇结点起把前一结点的x，y坐标赋给自身
                ...{
                    Snake[step].cellx=Snake[step-1].cellx;
                    Snake[step].celly=Snake[step-1].celly;
                }            
                        
                Snake[0].cellx=headx;    //将蛇头位置探前一步
                Snake[0].celly=heady;        
                
                Snake[Snake.length]=snakecell(endx,endy);    //增加一个蛇结点，位于尾部
                
                createfood();        //创建一个食物
                score=score+sco;    //加单位分数
            }
            else
            ...{
                if(document.getElementById("bg"+headx+heady).style.backgroundColor=="red")        //如果是蛇的某一部位
                ...{
                    MoveFlag="";    //停止前进
                    document.all.level.disabled="";
//                    document.all.playnow.value="重来";
                    alert("你的得分是"+score);
                    return;
                }                
                else                                        
                ...{
                    for(var step=Snake.length-1;step>0;step--)    //从最后一个蛇结点起把前一结点的x，y坐标赋给自身
                    ...{
                        Snake[step].cellx=Snake[step-1].cellx;
                        Snake[step].celly=Snake[step-1].celly;
                    }            
                            
                    Snake[0].cellx=headx;    //将蛇头位置探前一步
                    Snake[0].celly=heady;                
                }
            }
            document.getElementById("bg"+endx+endy).style.backgroundColor="white";    //恢复蛇尾处颜色                
    }
    
     function  showsnake()     // 显示这条蛇
     ... {
        for(i=0;i<Snake.length;i++)
            document.getElementById("bg"+Snake[i].cellx+Snake[i].celly).style.backgroundColor="red";
    }
     function  document.onkeydown()         // 捕获按的哪个键
     ... {
        if( event.keyCode=='87' )    //按下W键
            MoveFlag="up";
        if( event.keyCode=='65' )    //按下A键
            MoveFlag="left";
        if( event.keyCode=='83' )    //按下S键
            MoveFlag="down";
        if( event.keyCode=='68' )    //按下D键
            MoveFlag="right";
        if(event.keyCode=='27')        //按下ESC
        ...{
            MoveFlag="";
            document.all.playnow.value="开始";
        }
    }
    
     function  setlevel()
     ... {
        Time=document.all.level.options[document.all.level.selectedIndex].value;
        sco==450-Time;
    }
    
     function  play()
     ... {
        document.all.level.disabled="disabled";
        if(document.all.playnow.value=="暂停")...{
            FlagTemp=MoveFlag;
            MoveFlag="";
            document.all.playnow.value="开始";
        }
        else...{
            MoveFlag=FlagTemp;
            document.all.playnow.value="暂停";
        }
        if(document.all.playnow.value=="重来")
            window.refresh;
        setInterval("ManageSnake()",Time);   //开始
    }
    createfood();     // 初始化一个食物
    createsnakehead();         // 初始化一个蛇头
</ script >
</ html >

           使用时请保存为.asp文件。