贪食蛇JS源码

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > Snake </ title >
< style type = " text/css " >
body
{
    background - color:White;
    font - size:12px;
}
#main
{
    position:absolute;
    width:410px;
    height:310px;
    border - style:inset;
    border - color:#0000cc;
    border - width:5px;
}
#monitor
{
    position:absolute;
    top:330px;
}
.snake
{
    width:20px;
    height:20px;
    overflow:hidden;
    background - color:blue;
    position:absolute;
}
.food
{
    width:20px;
    height:20px;
    overflow:hidden;
    background - color:red;
    position:absolute;
}
</ style >
< script type = " text/jscript " >
var  AllDiv, AllSpan
var  Sx, Sy;  // Snake的头
var  Gox, Goy;  // 移动方向
var  IsStart  =   false ;  // 是否开始
var  Fx, Fy;  // 食物的地址
var  TimeHandle;
var  IsOver  =   false ;
var  Sec  =   0 ;  // 记时

function  page_load()
{
    CreateSnake( 0 , 0 );
    CreateSnake( 0 , 20 );
    CreateSnake( 20 , 20 );
    AllDiv  =  main.all.tags('DIV');
    CreatFood();    
    AllSpan  =  main.all.tags('SPAN');
}

function  CreateSnake(x,y)
{
    main.innerHTML  +=   " <div class=\ " snake\ "  style=\ " top: " +y+ " ; left: " +x+ " \ " ></div> " ;
    Sx  =  x;
    Sy  =  y;
    dSx.innerText  =  Sx;
    dSy.innerText  =  Sy;
}

function  CreatFood()
{
     if  (AllSpan  !=   null )
    {
        AllSpan[ 0 ].removeNode( true );
    }
    
     do
    {
        Fx = Math.round(Math.random() * 19 ) * 20 ;
        Fy = Math.round(Math.random() * 14 ) * 20 ;
        
        dFx.innerText  =  Fx;
        dFy.innerText  =  Fy;
    }
     while (CheckBody(Fx,Fy))
    main.innerHTML  +=   " <span class=\ " food\ "  style=\ " top: " +Fy+ " ; left: " +Fx+ " \ " ></span> " ;
}

function  Move()
{
     var  NSx  =  Sx + Gox;
     var  NSy  =  Sy + Goy;  // 下个格子
    
     // 是否GameOver
    IsOver  =  IsGameOver(NSx,NSy);
    
     if  (IsOver)
    {       
         return ;
    }
    
     if  (NSx  ==  Fx  &&  NSy  ==  Fy)
    {
        CreatFood();
    } else {
        AllDiv[ 0 ].removeNode( true );  // 移动
    }
     
    CreateSnake(NSx,NSy);
}

function  IsGameOver(x,y)
{
     if  (x  <   0   ||  x  >=   400   ||  y  >=   300   ||  y  <   0 )
    {
         return   true ;
    }
    
     return  CheckBody(x,y)
   
}

// 键盘控制
function  KeyDown(){
     if  (IsOver)  return ;
    Key = event.keyCode
     switch (Key){
     case   37 :Dir( - 1 , 0 ); break // 左
     case   39 :Dir( 1 , 0 ); break // 右
     case   38 :Dir( 0 , - 1 ); break // 上
     case   40 :Dir( 0 , 1 ); break } // 下
     return   false
}

function  Dir(x,y)
{
     if  (Gox  ==   - x * 20   &&  Goy  ==   - y * 20 )  return
    
    Gox  =  x * 20 ;
    Goy  =  y * 20 ;    
    
     if  (IsStart  ==   false )
    {
        IsStart  =   true ;
        PlayGame();
    }
    dGox.innerText  =  Gox;
    dGoy.innerText  =  Goy;
}

// 开始游戏,并不停移动
function  PlayGame()
{
    Sec ++ ;
     if  (IsOver)
    {
        clearTimeout(TimeHandle);
    } else {    
        Move();
        TimeHandle  =  setTimeout('PlayGame()', 50 )
    }
     var  d  =   new  Date( 0 , 0 , 0 , 0 , 0 , 0 , 0 );
    d.setTime(d.getTime() + Sec * 50 );
    
    dSec.innerText  =  Sec;
    dTime.innerText  =  d.toLocaleTimeString();
}

// 检测食物
function  CheckBody(x,y)
{
     for  ( var  i  =   0 ; i <  AllDiv.length;i ++ )
    {
         if  (AllDiv[i].style.left  ==  x + " px "   &&  AllDiv[i].style.top  ==  y + " px " )
        {
             return   true ;
        }
    }
     return   false ;
}

</ script >
</ head >
< body onload = " page_load() "  onkeydown = " KeyDown() " >
< div id = " main " >
</ div >
< div id = " monitor " >
     < input type = " button "  value = " test "  onclick = " clearTimeout(TimeHandle) "   />
    
     < fieldset >
     < legend > 参数 </ legend >
     < ul >
         < li > Sx: < span id = " dSx " ></ span ></ li >
         < li > Sy: < span id = " dSy " ></ span ></ li >
         < li > Fx: < span id = " dFx " ></ span ></ li >
         < li > Fy: < span id = " dFy " ></ span ></ li >
         < li > Gox: < span id = " dGox " ></ span ></ li >
         < li > Goy: < span id = " dGoy " ></ span ></ li >
         < li > Sec: < span id = " dSec " ></ span ></ li >
         < li > Time: < span id = " dTime " ></ span ></ li >
     </ ul >     
     </ fieldset >
</ div >
</ body >
</ html >