判断类型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 onload="formPosition(),createYu()" onresize="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"
onmousemove="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>
文章结束给大家分享下程序员的一些笑话语录： Bphone之你们聊，我先走了！移动说：我在phone前加o，我叫o缝；苹果说：我在phone前i，我是i缝；微软说：我在phone前加w，我叫w缝；三星说：你们聊，我先走了！
将来王建宙写回忆录的时候，一定要有一句“常小兵为中国移动的发展做出了不可磨灭的贡献”。
