【散分】【自己写了个 JavaScript 小游戏】

wujinjian2008n 2010-06-11 11:06:37
加精
在ie6,ie7,火狐3.6 上测试通过!


<!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>
...全文
8583 628 打赏 收藏 转发到动态 举报
写回复
用AI写文章
628 条回复
切换为时间正序
请发表友善的回复…
发表回复
随风飘扬的叶 2010-07-23
  • 打赏
  • 举报
回复
楼主厉害
youyudubai 2010-07-22
  • 打赏
  • 举报
回复
先顶,接分,然后再看
shaozi110 2010-07-17
  • 打赏
  • 举报
回复
特地来膜拜
falconkabu 2010-07-09
  • 打赏
  • 举报
回复
哈哈 收藏 不错
Valefish 2010-07-09
  • 打赏
  • 举报
回复
强大啊
hpfubnws 2010-07-08
  • 打赏
  • 举报
回复
说不清,自己去看:ht-tp://lil.cx/hTU3Ju
  • 打赏
  • 举报
回复
Up.
xwb2766 2010-07-06
  • 打赏
  • 举报
回复
支持楼主
xiuyouxu 2010-07-05
  • 打赏
  • 举报
回复
great
CodeVeteran 2010-07-02
  • 打赏
  • 举报
回复
来看看。。。。
杰必尚 2010-07-02
  • 打赏
  • 举报
回复
[code=Sun-language]
warming

public a news:
This is a very good javascript code! Let's study!
[/code]
BBG_0622 2010-07-01
  • 打赏
  • 举报
回复
很厉害!顶
nolimit2010 2010-06-30
  • 打赏
  • 举报
回复
神奇 一会研究一下
feibao19880514 2010-06-30
  • 打赏
  • 举报
回复
楼主厉害啊 我什么时候也能自己编写一个小游戏的程序呢~~哈哈
caoqingsha 2010-06-30
  • 打赏
  • 举报
回复
好佩服会js的、、、
linxishengjiong 2010-06-29
  • 打赏
  • 举报
回复
不错不错,很有闲情逸致啊
yefeng60 2010-06-29
  • 打赏
  • 举报
回复
很有意思!
LostTong 2010-06-28
  • 打赏
  • 举报
回复
很好很强大
yanyun_gang 2010-06-28
  • 打赏
  • 举报
回复
先收藏了好东西
futurepi 2010-06-27
  • 打赏
  • 举报
回复
全部都是代码 就是实现吗
加载更多回复(597)

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧