JS写怀旧小游戏系列（七）吃方块-优快云博客

<!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>dush</title>
 <script type="text/javascript">
 var xyNum=20; //敌方数量
 var arrXY=new Array(); //用数组记录敌方
 var myObjII; //我自己外面的div
 var myObjI; //我自己
 var mapobj; //地图对象

 //控制窗体位置
 function formPosition()
 {
 var w=getMapObj().style.width.replace("px","")-0;
 var clientw=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";
 }
 
 function getMapObj()
 {
 if(mapobj==null)
 mapobj=document.getElementById("mapid");
 return mapobj;
 }
 
 //创建敌方
 function createYu()
 {
 for(var i=0;i<xyNum;i++)
 {
 var xyObj=document.createElement("div");
 arrXY[i]=xyObj;
 
 var sx=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="white solid 1px";
 xyObj.style.filter="alpha(opacity=80)";
 xyObj.style.opacity=0.8;
 xyObj.style.backgroundColor=sx[2];
 
 getMapObj().appendChild(xyObj);
 }
 
 createMyYu();
 moveYu();
 }

 //随机敌人类型
 function randomZL()
 {
 var zl=getRandom(10);

 var w=""; //敌人的宽
 var h=""; //高
 var color=""; //颜色
 var tp=""; //类型

 if(zl>=1 && zl<=3)
 {
 w="20px";
 h="20px";
 color="cyan";
 tp="1"; //敌人类型，1最小，依次类推
 }
 else if(zl==4 || zl==5)
 {
 w="40px";
 h="40px";
 color="yellow";
 tp="2";
 }
 else if(zl==6 || zl==7)
 {
 w="60px";
 h="60px";
 color="gray";
 tp="3";
 }
 else if(zl==8)
 {
 w="80px";
 h="80px";
 color="black";
 tp="4";
 }
 else 
 {
 w="20px";
 h="20px";
 color="red";
 tp="5"; //tp=5 为补生命值
 }

 return w+"*"+h+"*"+color+"*"+tp;
 }

 //创建我自己
 function createMyYu()
 { 
 //创建我自己外面的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="white solid 1px";
 
 getMapObj().appendChild(myObjI);
 }
 
 //获取某个值下的随机数
 function getRandom(maxval)
 {
 var sj=parseInt(Math.random()*maxval);
 if(sj==0)
 sj=1;

 return sj;
 }

 //敌人移动
 function moveYu()
 {
 for(var i=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; 
 else if(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;
 else if(arrXY[i].tp=="2")
 _szz=15;
 else if(arrXY[i].tp=="3")
 _szz=20;
 else if(arrXY[i].tp=="4")
 _szz=25;

 var nowszz=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]);
 }
 else if(arrXY[i].tp-0==5)//吃到生命值
 {
 var nowsmz=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;
 else if(arrXY[i].tp=="2")
 _smz=20;
 else if(arrXY[i].tp=="3")
 _smz=50;
 else if(arrXY[i].tp=="4")
 _smz=100;

 var nowsmz=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);
 }

 //敌人从地图中消失时重置
 function resetMove(yuobj)
 {
 var sx=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";
 }
 
 function getMapWidth()
 {
 return getMapObj().style.width.replace("px","")-0;
 }
 function getMapHeight()
 {
 return getMapObj().style.height.replace("px","")-0;
 }
 function getMapTop()
 {
 return getMapObj().style.top.replace("px","")-0;
 }
 function getMapLeft()
 {
 return getMapObj().style.left.replace("px","")-0;
 }

 function getObjWaH(obj,wah)
 {
 return obj.style[wah].replace("px","")-0;
 }

 //跟随鼠标移动的div(我自己)
 function mouseMove(e)
 {
 var myObjIleft=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";

 var myObjIIleft=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";
 
 var myObjItop=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";

 var myObjIItop=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";
 }
 
 //判断敌我双方是否碰撞在一起，原理：利用两个圆的圆心距离之和是否小于两个圆的半径之和
 function isChongDie(obj1,obj2)
 {
 var obj1left=getObjWaH(obj1,"left")+getObjWaH(obj1,"width")/2;
 var obj2left=getObjWaH(obj2,"left")+getObjWaH(obj2,"width")/2;

 var obj1top=getObjWaH(obj1,"top")+getObjWaH(obj1,"width")/2;
 var obj2top=getObjWaH(obj2,"top")+getObjWaH(obj2,"width")/2;

 var jl=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)
 return true;//重叠
 else
 return false;
 }

 </script>
 </head>
<body οnlοad="formPosition(),createYu()" οnresize="formPosition()" style="font-size:10pt">
 <div id="fbid" style="position:absolute;left:0px;top:10px;width:795px;height:45px;background-color:rgb(223,223,223);padding-left:5px;border:black solid 1px">
 <table>
 <tr>
 <td>生命值：</td>
 <td><div id="smz" style="width:500px;height:15px;background-color:red;color:white;font-weight:bold" align="center">500</div></td>
 </tr>
 <tr>
 <td>生长值：</td>
 <td><div id="szz" style="width:10px;height:15px;background-color:blue;color:white;font-weight:bold" align="center">0</div></td>
 </tr>
 </table>
 </div>
 <div id="mapid" style="position:absolute;left:0px;top:60px;width:800px;height:400px;background-color:rgb(223,223,223);overflow:hidden;border:black solid 1px" 

οnmοusemοve="mouseMove(event)">
 </div>
 <div id="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:black solid 

1px;color:red;line-height:20px">
 *游戏规则：移动鼠标吃方块，你只能吃跟你同样大小或比你小的方块，当你的生长值到达500时，你自己的方块会变大一级，<br>
 当生命值变成0时，Game Over！游戏中的红色小方块就是给你补生命值的。
 </div>
 </body>
</html>