【散分】【自己写了个 JavaScript 小游戏】
16lz
2021-01-22
在ie6，ie7，火狐3.6上测试通过！
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>wujinjian</title>
<scripttype="text/javascript">
varxyNum=20;//敌方数量
vararrXY=newArray();//用数组记录敌方
varmyObjII;//我自己外面的div
varmyObjI;//我自己
varmapobj;//地图对象
//控制窗体位置
functionformPosition()
{
varw=getMapObj().style.width.replace("px","")-0;
varclientw=document.body.clientWidth;
getMapObj().style.left=(clientw-w)/2+"px";
document.getElementById("fbid").style.left=(clientw-w)/2+"px";
document.getElementById("gzid").style.left=(clientw-w)/2+"px";
}
functiongetMapObj()
{
if(mapobj==null)
mapobj=document.getElementById("mapid");
returnmapobj;
}
//创建敌方
functioncreateYu()
{
for(vari=0;i<xyNum;i++)
{
varxyObj=document.createElement("div");
arrXY[i]=xyObj;
varsx=randomZL().split("*");
xyObj.qdy=0;//当敌人比我强大时，敌人向我靠近
xyObj.tp=sx[3];//敌人类型
xyObj.sdx=getRandom(10);//敌人向左移动的速度
xyObj.sdy=0;//敌人向上移动的速度
xyObj.style.position="absolute";
xyObj.style.left=getMapWidth()+"px";
xyObj.style.top=getRandom(getMapHeight())+"px";
xyObj.style.width=sx[0];
xyObj.style.height=sx[1];
xyObj.style.border="whitesolid1px";
xyObj.style.filter="alpha(opacity=80)";
xyObj.style.opacity=0.8;
xyObj.style.backgroundColor=sx[2];
getMapObj().appendChild(xyObj);
}
createMyYu();
moveYu();
}
//随机敌人类型
functionrandomZL()
{
varzl=getRandom(10);
varw="";//敌人的宽
varh="";//高
varcolor="";//颜色
vartp="";//类型
if(zl>=1&&zl<=3)
{
w="20px";
h="20px";
color="cyan";
tp="1";//敌人类型，1最小，依次类推
}
elseif(zl==4||zl==5)
{
w="40px";
h="40px";
color="yellow";
tp="2";
}
elseif(zl==6||zl==7)
{
w="60px";
h="60px";
color="gray";
tp="3";
}
elseif(zl==8)
{
w="80px";
h="80px";
color="black";
tp="4";
}
else
{
w="20px";
h="20px";
color="red";
tp="5";//tp=5为补生命值
}
returnw+"*"+h+"*"+color+"*"+tp;
}
//创建我自己
functioncreateMyYu()
{
//创建我自己外面的div,用于判断敌人是否在我附近
myObjII=document.createElement("div");
myObjII.style.position="absolute";
myObjII.style.left="0px";
myObjII.style.top="0px";
myObjII.style.width="120px";
myObjII.style.height="120px";
myObjII.style.backgroundColor="";//
getMapObj().appendChild(myObjII);
//创建我自己跟随鼠标移动的div
myObjI=document.createElement("div");
myObjI.style.position="absolute";
myObjI.style.left="0px";
myObjI.style.top="0px";
myObjI.style.width="20px";
myObjI.style.height="20px";
myObjI.tp="1";
myObjI.style.backgroundColor="blue";
myObjI.style.border="whitesolid1px";
getMapObj().appendChild(myObjI);
}
//获取某个值下的随机数
functiongetRandom(maxval)
{
varsj=parseInt(Math.random()*maxval);
if(sj==0)
sj=1;
returnsj;
}
//敌人移动
functionmoveYu()
{
for(vari=0;i<arrXY.length;i++)
{
//敌人向左移动
arrXY[i].style.left=getObjWaH(arrXY[i],"left")-arrXY[i].sdx+"px";
//敌人向上移动
if(getObjWaH(arrXY[i],"top")<=getMapHeight()/2)
arrXY[i].style.top=getObjWaH(arrXY[i],"top")-arrXY[i].sdy+"px";
else
arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].sdy+"px";
//当敌人比我强大时，敌人向我靠近
arrXY[i].style.top=getObjWaH(arrXY[i],"top")+arrXY[i].qdy+"px";
//敌人从地图中消失
if(getObjWaH(arrXY[i],"left")<0||getObjWaH(arrXY[i],"top")<0||getObjWaH(arrXY[i],"top")>getMapHeight())
{
resetMove(arrXY[i]);
}
//判断敌人是否在我附近
if(isChongDie(myObjII,arrXY[i]))
{
if(myObjI.tp-0>=arrXY[i].tp-0)//比对方强大时，敌人逃跑
arrXY[i].sdy=10;
elseif(arrXY[i].tp-0!=5)//比对方弱小时，敌人向我靠近
{
if(getObjWaH(myObjI,"top")<getObjWaH(arrXY[i],"top"))
{
if(arrXY[i].qdy==0)
arrXY[i].qdy=-10;//向上靠近
}
else
{
if(arrXY[i].qdy==0)
arrXY[i].qdy=10;//向下靠近
}
}
}
else//不在我附近时，还原值
arrXY[i].qdy=0;
//判断是否吃掉对方，或被对方吃掉
if(isChongDie(myObjI,arrXY[i]))
{
//吃掉对方
if(myObjI.tp-0>=arrXY[i].tp-0)
{
var_szz=0;
if(arrXY[i].tp=="1")
_szz=10;
elseif(arrXY[i].tp=="2")
_szz=15;
elseif(arrXY[i].tp=="3")
_szz=20;
elseif(arrXY[i].tp=="4")
_szz=25;
varnowszz=getObjWaH(document.getElementById("szz"),"width")+_szz;
if(nowszz>=500)//长大一级
{
if(myObjI.tp-0<5)
{
myObjI.tp=myObjI.tp-0+1;
myObjI.style.width=getObjWaH(myObjI,"width")+20+"px"
myObjI.style.height=getObjWaH(myObjI,"height")+20+"px"
document.getElementById("szz").style.width="10px";
}
else
{
alert("哈哈...顺我者昌逆我者亡！");
window.location.href=window.location.href;
}
}
else
{
document.getElementById("szz").style.width=nowszz+"px";
document.getElementById("szz").innerHTML=nowszz;
}
resetMove(arrXY[i]);
}
elseif(arrXY[i].tp-0==5)//吃到生命值
{
varnowsmz=getObjWaH(document.getElementById("smz"),"width")+50;
if(nowsmz>=500)
document.getElementById("smz").style.width="500px";
else
document.getElementById("smz").style.width=nowsmz+"px";
document.getElementById("smz").innerHTML=document.getElementById("smz").style.width.replace("px","");
resetMove(arrXY[i]);
}
else//被对方吃掉
{
var_smz=0;
if(arrXY[i].tp=="1")
_smz=10;
elseif(arrXY[i].tp=="2")
_smz=20;
elseif(arrXY[i].tp=="3")
_smz=50;
elseif(arrXY[i].tp=="4")
_smz=100;
varnowsmz=getObjWaH(document.getElementById("smz"),"width")-_smz;
if(nowsmz<=0)//
{
document.getElementById("smz").style.width="0px";
document.getElementById("smz").innerHTML="0";
alert("over");
window.location.href=window.location.href;
}
else
{
document.getElementById("smz").style.width=nowsmz+"px";
document.getElementById("smz").innerHTML=nowsmz;
}
}
}
}
setTimeout(moveYu,50);
}
//敌人从地图中消失时重置
functionresetMove(yuobj)
{
varsx=randomZL().split("*");
yuobj.tp=sx[3];
yuobj.sdx=getRandom(10);
yuobj.sdy=0;
yuobj.style.width=sx[0];
yuobj.style.height=sx[1];
yuobj.style.backgroundColor=sx[2];
yuobj.style.left=getMapWidth()+"px";
yuobj.style.top=getRandom(getMapHeight())+"px";
}
functiongetMapWidth()
{
returngetMapObj().style.width.replace("px","")-0;
}
functiongetMapHeight()
{
returngetMapObj().style.height.replace("px","")-0;
}
functiongetMapTop()
{
returngetMapObj().style.top.replace("px","")-0;
}
functiongetMapLeft()
{
returngetMapObj().style.left.replace("px","")-0;
}
functiongetObjWaH(obj,wah)
{
returnobj.style[wah].replace("px","")-0;
}
//跟随鼠标移动的div(我自己)
functionmouseMove(e)
{
varmyObjIleft=e.clientX-getMapLeft()-getObjWaH(myObjI,"width")/2;
if(myObjIleft<0)
myObjIleft=0;
if(myObjIleft>getMapWidth()-getObjWaH(myObjI,"width"))
myObjIleft=getMapWidth()-getObjWaH(myObjI,"width");
myObjI.style.left=myObjIleft+"px";
varmyObjIIleft=e.clientX-getMapLeft()-getObjWaH(myObjII,"width")/2;
if(myObjIIleft<0)
myObjIIleft=0;
if(myObjIIleft>getMapWidth()-getObjWaH(myObjII,"width"))
myObjIIleft=getMapWidth()-getObjWaH(myObjII,"width");
myObjII.style.left=myObjIIleft+"px";
varmyObjItop=e.clientY-getMapTop()-getObjWaH(myObjI,"height")/2;
if(myObjItop<0)
myObjItop=0;
if(myObjItop>getMapHeight()-getObjWaH(myObjI,"height"))
myObjItop=getMapHeight()-getObjWaH(myObjI,"height");
myObjI.style.top=myObjItop+"px";
varmyObjIItop=e.clientY-getMapTop()-getObjWaH(myObjII,"height")/2;
if(myObjIItop<0)
myObjIItop=0;
if(myObjIItop>getMapHeight()-getObjWaH(myObjII,"height"))
myObjIItop=getMapHeight()-getObjWaH(myObjII,"height");
myObjII.style.top=myObjIItop+"px";
}
//判断敌我双方是否碰撞在一起，原理：利用两个圆的圆心距离之和是否小于两个圆的半径之和
functionisChongDie(obj1,obj2)
{
varobj1left=getObjWaH(obj1,"left")+getObjWaH(obj1,"width")/2;
varobj2left=getObjWaH(obj2,"left")+getObjWaH(obj2,"width")/2;
varobj1top=getObjWaH(obj1,"top")+getObjWaH(obj1,"width")/2;
varobj2top=getObjWaH(obj2,"top")+getObjWaH(obj2,"width")/2;
varjl=Math.sqrt(Math.abs(obj1left-obj2left)*Math.abs(obj1left-obj2left)+Math.abs(obj1top-obj2top)*Math.abs(obj1top-obj2top));
if(jl<=getObjWaH(obj1,"width")/2+getObjWaH(obj2,"width")/2)
returntrue;//重叠
else
returnfalse;
}
</script>
</head>
628 个解决方案
#1
<bodyonload="formPosition(),createYu()"onresize="formPosition()"style="font-size:10pt">
<divid="fbid"style="position:absolute;left:0px;top:10px;width:795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;border:blacksolid1px">
<table>
<tr>
<td>生命值：</td>
<td><divid="smz"style="width:500px;height:15px;background-color:red;color:white;font-weight:bold"align="center">500</div></td>
</tr>
<tr>
<td>生长值：</td>
<td><divid="szz"style="width:10px;height:15px;background-color:blue;color:white;font-weight:bold"align="center">0</div></td>
</tr>
</table>
</div>
<divid="mapid"style="position:absolute;left:0px;top:60px;width:800px;height:400px;background-color:rgb(223,223,223);overflow:hidden;border:blacksolid1px"onmousemove="mouseMove(event)">
</div>
<divid="gzid"style="position:absolute;left:0px;top:465px;width:795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;padding-top:5px;border:blacksolid1px;color:red;line-height:20px">
*游戏规则：移动鼠标吃方块，你只能吃跟你同样大小或比你小的方块，当你的生长值到达500时，你自己的方块会变大一级，<br>
当生命值变成0时，GameOver！游戏中的红色小方块就是给你补生命值的。
</div>
</body>
</html>
更多相关文章
- Activity和Fragment的生命周期
- Java线程的生命周期和状态控制
- Android Service的生命周期图解
- Android 监听各个Acitivity的生命周期
- Android笔记（9）---Fragment的生命周期以及在Activity之间的传值
- java与ASP.NET网络应用程序在生命期开始时的比较。