Goodspeed

导航

贪食蛇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>

posted on 2004-11-23 16:24  Goodspeed  阅读(1352)  评论(0)  编辑  收藏  举报