完全面向过程的脚本代码(原创)
<!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>
贪吃蛇
</title>
<style type="text/css">
.ConnerDiv
{
width:600px;
height:500px;
background-color:LightBlue;
border:inset 1px Blue;
vertical-align:middle;
}
.FoodDiv
{
width:20px;
height:20px;
position:absolute;
background-color:Black;
}
</style>
</head>
<body οnkeydοwn="keyDown(event)" style="margin-left:100px; margin-top:40px;">
<form name="form1" method="post" action="MoveSnake.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRScAPV38TjLN/BaakeS8v9X2hlVg==" />
</div>
<div style=" width:100%" align="center">
<div id="ConnverDiv" class="ConnerDiv" >
<div id="FoodDiv" class="FoodDiv">
</div>
</div>
<input type="button" id="btnStart" value="开始" οnclick="SpaceOrBtn();" />
</div>
</form>
</body>
<script language="javascript">
var btnStart=document.getElementById("btnStart");//开始按纽
var SnakeBody=new Array();//用于保存蛇的每一节
var ConnverDiv=document.getElementById("ConnverDiv");
var FoodDiv=document.getElementById("FoodDiv");
var lastBody;//最后一个
var fristBody;//第一个
var secondBody;//第二个
var direction="right";//移动方向
var Speed=200;//速度
var IsStart=false;//游戏是否开始
var IsStop=true;//是否暂停
var LastMovePosition="";//上次移动方向
var EatCount=0;//吃到食物个数
var timer;//定时器
//开始游戏
function Satrtgame(Speed)
{
SetFoodPosition();
IsStart=true;
IsStop=false;
ConnverDiv.appendChild(CreateBody());
ConnverDiv.appendChild(CreateBody());
ConnverDiv.appendChild(CreateBody());
ConnverDiv.appendChild(CreateBody());
ConnverDiv.appendChild(CreateBody());
lastBody=SnakeBody[SnakeBody.length-1];
lastBody.style.backgroundColor="Red";
StartMove();
}
//设置食物位置
function SetFoodPosition()
{
var X=parseInt(Math.random()*30)*20;
var Y=parseInt(Math.random()*25)*20;
FoodDiv.style.left=(245+X)+"px";
FoodDiv.style.top=(40+Y)+"px";
}
//启动蛇
function StartMove()
{
timer=setTimeout("StartMove()",200);
var last=SnakeBody[SnakeBody.length-1];
//把最后一个元素移到第一个
for(var i=SnakeBody.length-1;i>0;i--)
{
SnakeBody=SnakeBody;
SnakeBody.style.backgroundColor="#400040";
SnakeBody.style.border="white solid 1px";
}
SnakeBody[0]=last;
fristBody= SnakeBody[0];
secondBody=SnakeBody[1];
//记录第二节位置
var _left=secondBody.style.left.replace("px","")-0;
var _top=secondBody.style.top.replace("px","")-0;
switch(direction)
{
case "right":
//判断是否出界、或碰上自己
if(_left+20+20>860||IsMeetSelfBody(_left,_top))
{
secondBody.style.backgroundColor="Red";
clearTimeout(timer);
IsStart=false;
alert("结束");
}
else
{
LastMovePosition="right";//记录当前生效的移动方向
fristBody.style.left=_left+20+"px";
fristBody.style.top=_top+"px";
fristBody.style.backgroundColor="Red";
}
break;
case "left":
//判断是否出界、或碰上自己
if(_left-20-20<220||IsMeetSelfBody(_left,_top))
{
secondBody.style.backgroundColor="Red";
clearTimeout(timer);
IsStart=false;
alert("结束");
}
else
{
LastMovePosition="left";//记录当前生效的移动方向
fristBody.style.left=_left-20+"px";
fristBody.style.top=_top+"px";
fristBody.style.backgroundColor="Red";
}
break;
case "up":
//判断是否出界、或碰上自己
if(_top-20-20<20||IsMeetSelfBody(_left,_top))
{
secondBody.style.backgroundColor="Red";
clearTimeout(timer);
IsStart=false;
alert("结束");
}
else
{
LastMovePosition="up";//记录当前生效的移动方向
fristBody.style.left=_left+"px";
fristBody.style.top=_top-20+"px";
fristBody.style.backgroundColor="Red";
}
break;
case "down":
//判断是否出界、或碰上自己
if(_top+20+20>540||IsMeetSelfBody(_left,_top))
{
secondBody.style.backgroundColor="Red";
clearTimeout(timer);
IsStart=false;
alert("结束");
}
else
{
LastMovePosition="down";//记录当前生效的移动方向
fristBody.style.left=_left+"px";
fristBody.style.top=_top+20+"px";
fristBody.style.backgroundColor="Red";
}
break;
}
IsMeetFoodDiv();
// IsTouchConnerDiv();
}
//是否吃到实物
function IsMeetFoodDiv()
{
//蛇头位置
var Snakeleft=fristBody.style.left.replace("px","")-0;
var Snaketop=fristBody.style.top.replace("px","")-0;
//食物位置
var Foodleft= FoodDiv.style.left.replace("px","")-0;
var Foodtop=FoodDiv.style.top.replace("px","")-0;
if(Snakeleft==Foodleft&&Snaketop==Foodtop)
{
EatCount++; //计数
SetFoodPosition();//重新设定实物位置
ConnverDiv.appendChild(CreateBody());//蛇身加长
if(EatCount==2)
{
window.status="Speed="+Speed;
Speed=Speed-50;
clearTimeout(timer);
StartMove(Speed);
EatCount=0;
}
}
}
//是否碰上自己的身体(返回:碰上ture、否则false)
function IsMeetSelfBody(_left,_top)
{
switch(direction)
{
case "right":
_left=_left+20;
break;
case "left":
_left=_left-20;
break;
case "up":
_top=_top-20;
break;
case "down":
_top=_top+20;
break;
}
//蛇头位置
var Snakeleft=_left;
var Snaketop=_top;
//当前判断的身体位置
var Foodleft;
var Foodtop;
for(var i=3;i<SnakeBody.length;i++)//只需从第四个开始判断
{
Foodleft= SnakeBody.style.left.replace("px","")-0;
Foodtop=SnakeBody.style.top.replace("px","")-0;
if(Snakeleft==Foodleft&&Snaketop==Foodtop)
{
return true;
}
}
return false;
}
//创建蛇身节点
function CreateBody()
{
var Body=document.createElement("div");
Body.style.position="absolute";
Body.style.top="240px";
Body.style.left="245px";
Body.style.width="20px";
Body.style.height="20px";
Body.style.backgroundColor="#400040";
if(lastBody!=null)
{
Body.style.top=lastBody.style.top;
Body.style.left=lastBody.style.left;
}
SnakeBody[SnakeBody.length]=Body;
return Body
}
//获取方向,空格键
function keyDown(e)
{
if(e.keyCode==37) //向左
{
if(LastMovePosition!=="right") //不能相反于上次实际移动的方向
direction="left";
}
else if(e.keyCode==38) //向上
{
if(LastMovePosition!=="down") //不能相反于上次实际移动的方向
direction="up";
}
else if(e.keyCode==39) //向右
{
if(LastMovePosition!=="left") //不能相反于上次实际移动的方向
direction="right";
}
else if(e.keyCode==40) //向下
{
if(LastMovePosition!=="up") //不能相反于上次实际移动的方向
direction="down";
}
else if(e.keyCode==32)
{
SpaceOrBtn();
}
}
//响应按纽事件或键盘空格事件
function SpaceOrBtn()
{
if(IsStart)//游戏已经开始,空格暂停/继续
{
if(!IsStop)//暂停
{
btnStart.value="继续";
IsStop=true;
clearTimeout(timer);//清除定时器
}
else//继续
{
btnStart.value="暂停";
IsStop=false;
StartMove();
}
}
else//开始/重新开始
{
if(SnakeBody.length>0)//重新开始游戏
{
for(var i=0;i<SnakeBody.length;i++)
{
ConnverDiv.removeChild(SnakeBody);
}
SnakeBody.splice(0,SnakeBody.length);
lastBody=null;
direction="right";
Satrtgame();
}
else//开始游戏
{
Satrtgame();
}
btnStart.value="暂停";
}
}
</script>
</html>