JS写怀旧小游戏系列（七）吃方块
2013-04-27 09:35
309 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 判断类型JS写怀旧小游戏系列（七）吃方块
- JS写怀旧小游戏系列（八）九宫格数独
- JS写怀旧小游戏系列（九）中国象棋
- JS写怀旧小游戏系列（十）打砖块
- JS写怀旧小游戏系列（一）俄罗斯方块
- JS写怀旧小游戏系列（二）连连看
- JS写怀旧小游戏系列（四）贪吃蛇
- 评论拷贝JS写怀旧小游戏系列（六）躲人游戏
- JS写怀旧小游戏系列（三）五子棋
- JS写怀旧小游戏系列（五）扫雷
- 随机网格JS写怀旧小游戏系列（四）贪吃蛇
- JS写怀旧小游戏系列（六）躲人游戏
- 生成格JS写怀旧小游戏系列（五）扫雷
- js、jQuery实现2048小游戏
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- 原创跑酷小游戏《Cube Duck Run》 - - 方块鸭快跑
- Vue.js系列之vue-router(上) （转载自向朔1992）
- js 实现俄罗斯方块（二）
- JS移动的方块
- 从零开始学习Node.js系列教程之设置HTTP头的方法示例