您的位置：首页 > Web前端 > JavaScript

贪食蛇JS源码

2004-11-23 16:24 405 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航