【散分】【自己写了个 JavaScript 小游戏】
在ie6，ie7，火狐3.6 上测试通过！
- HTML code
<!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>wujinjian</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>
[解决办法]
友情up
[解决办法]
收藏收藏...
[解决办法]
友情UP
[解决办法]
强悍！
[解决办法]
厉害。。顶起来！
[解决办法]
厉害厉害，前来蹭分
[解决办法]
楼主厉害呀！！！
[解决办法]
楼主出品，必属精品，帮顶~~
[解决办法]
这是什么？
[解决办法]
楼主厉害，收藏了
[解决办法]
厉害，前来蹭分
[解决办法]
非常厉害！！！
[解决办法]
呵呵，不错！顶顶！！
[解决办法]
强人，一定要顶的？
[解决办法]
顶，牛人哇
[解决办法]
不错啊
[解决办法]
[解决办法]
学习一下 呵呵
[解决办法]
厉害！
[解决办法]
厉害厉害，有点像校内小游戏 “大鱼吃小鱼”但是功能更加强悍，但是方块只能从右边到左边 有点缺憾 呵呵
[解决办法]
很不错啊，顶起
[解决办法]
楼主厉害
[解决办法]
[解决办法]
顶起来
[解决办法]
真厉害
[解决办法]
学习 顶
[解决办法]
good!
[解决办法]
收藏，顶起……
[解决办法]
厉害，学习了。。。
[解决办法]
收藏,强大啊。
[解决办法]
好玩，过去还挺费时间的
[解决办法]
友情UP
[解决办法]
像你这样有才的人实在是太少了，还说什么啊，顶，再顶！
[解决办法]
帮顶！
------解决方案--------------------
UP...
[解决办法]
学习啊
[解决办法]
学习学习
[解决办法]
膜拜 ~~学习~~
[解决办法]
顶 up
[解决办法]
顶 牛叉啊