js飞机大战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game Of Plan</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<script>
window.onload=function(){
Game.exe();
}
var Game={
//启动程序
exe:function(){
this.init();
},
//初始化
init:function(){
document.body.style.background='#000';
var This=this;
var oDiv=document.createElement("div");
oDiv.id='box';
oDiv.style.cssText="width:300px;height:500px;border:10px solid #fff;margin:50px auto;position:relative;";
document.body.appendChild(oDiv);
var hh=document.createElement("h2");
hh.innerHTML="飞机大战V1.0";
hh.style.cssText="font-family:'Microsoft yahei';font-size:26px;color:#fff;margin:50px auto;text-align:center";
oDiv.appendChild(hh);
for(var i=0;i<4;i++){
var pp=document.createElement("p");
pp.index=i;
pp.style.cssText="font-size:14px;width:150px;height:40px; margin:50px auto;background:#fff;color:#000;text-align:center;line-height:40px;cursor:pointer;overflow:hidden;";
var html="";
pp.onmouseenter=function(){
this.style.background='#FB6A0F';
this.style.color='#000';
}
pp.onmouseleave=function(){
this.style.background='#fff';
this.style.color='#000';
}
//点击进入第二个页面
pp.onclick=function(e){
e=e||window.event;
This.start(this.index,oDiv,e);
};
switch(i){
case 0:
html="简单难度";
break;
case 1:
html="中等难度";
break;
case 2:
html="困难难度";
break;
case 3:
html="复仇者飞机";
pp.style.background='#0f0';
pp.style.color='#000';
pp.style.fontWeight='bold';
pp.onmouseenter=function(){
pp.style.background='#FE3535';
pp.style.color='#0F0505';
}
pp.onmouseleave=function(){
pp.style.background='#0f0';
pp.style.color='#000';
}
break;
}
pp.innerHTML=html;
oDiv.appendChild(pp);
}
},
//游戏开始
start:function(index,oGameBox,e){
oGameBox.innerHTML="";
this.plane(oGameBox,e);
},
//关于飞机
plane:function(oGameBox,e){
var x=e.pageX;
var y=e.pageY;
var oplane=new Image();
oplane.src="AirplaneResource/plane2.png";
oplane.width=44;
oplane.height=45;
var ty=oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oplane.height/2;
var lx=oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oplane.width/2;
//页面窗口变化情况
window.onresize=function(){
lx=oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oplane.width/2;
}
var top=y-ty;
var left=x-lx;
oplane.style.cssText="display:block;position:absolute;top:'+top+'px;left'+left+'px;";
oGameBox.appendChild(oplane);
//寻找飞机在盒子里移动范围
var leftmin=-oplane.width/2;
var leftmax=oGameBox.clientWidth-oplane.width/2;
var topmin=0;
var topmax=oGameBox.clientHeight-oplane.height;
document.onmouseover=function(e){
e=e||window.event;
var top=e.pageY-ty;
var left=e.pageX-lx;
//限制飞机移动
top=Math.min(top,topmax);
top=Math.max(top,topmin);
left=Math.min(left,leftmax);
left=Math.max(left,leftmin);
oplane.style.left=left+'px';
oplane.style.top=top+'px';
};
this.biubiubiu(oplane,oGameBox);
},
biubiubiu:function(oplane,oGameBox){
var timer=setInterval(function(){
var biu=new Image();
biu.src="AirplaneResource/bullet1.png";
biu.width=5;
biu.height=11;
var top=oplane.offsetTop-biu.height+3;
var left=oplane.offsetLeft+oplane.width/2-parseInt(biu.width/2);
biu.style.cssText="display:block;position:absolute;top:'+top+'px;left:'+left+'px;";
oGameBox.appendChild(biu);
biu.timer=setInterval(function(){
biu.style.top=biu.offsetTop-10+"px";
if(biu.offsetTop<-biu.height){
clearInterval(biu.timer);
biu.parentNode.removeChild(biu);
}
},13);
},100);
},
};
</script>
</body>
</html>
后面子弹(biu)不能跟着飞机移动 top和left值试了好几遍 找不到合适的 子弹一直在左上角 求大神干货讲解
哎呀呀哎呦呦0回答
-
慕的地8582982
TOQEQUHXRURRHXIUOFTCCWFLHBNNHDDGNUQKZVGMPPPLRQJWKNVRLVHEKTWQTJGMMIZMCYYLDAXAHXNTNQMANDAPZSBVSBLJPJSWSSTRRUARNGPSUMWUAURBANGPJPFPFFVSVCLBFYMPPJCTZZADBYELLUQNVCCYJYEONPCVMRUEKRKXOHYSOLBUKNQPBYPPAWTZDWXDDWTWXWSSFDZSXJDQHXRTNXNHKNHZWWISCEJWGMZMMVYYBVRHBWUNEPPLFBFCCVFSBUXBEELMCWYUUAQTNIOEEBKGDDYFFFMMEUHGGDGTREEAAJLVSEBBIRRNWPZLPPVCLADWCNNNXDTTJELHQEFCJQWPDMYIYLVKDNASJJMWSKXDNWQQSCZFCJJLUHTMQAKUIYYUSFBRPFPLSLRHRXUBBMPJTZILLTXIMDWAWULHQTIMVXNKKUPMIEUQLUKJSUXUQTCMVLGPSCZDZQTJZDMOYMJGWFOKXGWMURUXTWMMJEUSOKHRNXBXMWFPTBKUCRZPSHFHRNKMBQYHYCZJSCKWFIMPYBMOFVSUKTVZIYHPLNXFIEYQQTCJWSIIBVLLKEHKQTDTOIULIHRQAJTOLRLCWYKYVVFYFLFXREYMMFFRBLMVRIBBYIFYIQDOLMSQDXGGWPRRMAYPPLRBHDGHSSOYORBHDTMPFSTJOVGDMJGPXBYBHRREXEHRHANXDJWGDQAUQRSQQSXJNADAJMTWVFYNRYUOIKXGGENNXSZSMFBFKGEEXXXDJORBKIIEYELIEXHKAQGADMXKQNJARYLEDTXQQFPJPCWPIMIJAASMVSOOZCQTMMVMLBUVPESPACMSFLYMLPTGWQWFJDIVYBNNXKDJCQDQAZVVPBNXIIBBPCJC -
慕的地6079101
浜娑箦 浞初龋 扯仡船 锷阳觐 藐律谨 铝揍獾 示炻揩 狙砣铐 榧薜帚 泡翔衿 桂蓄攉 蕊炝泌 际迩簿 肌酣宗 誉住恒 浅效袢 阍邻双 暄趾槠 戗胗柒 藁熨灯 力迤萁 迩矽剥 仝稀驸 琛滕掖 艽湄丽 溟构薮 箬植山 琨细浮 痪离意 禄账剥 吗戡占 绎寝古 扭冷铹 唾张团 蔺窬棒 写蚰缳 喑墙意 锊滹鹅 埯蒈掴 挎紊抠 谙奎峒 肘溃玄 驷茺畅 亵折觎 偎昙签 槭堑筚 浈阑峤 钙表逮 耕莆偌 恳郫蹲 冲茼砑 喏挖尾 补警梵 妞氟汝 诜阿肺 凫歪苣 殡榇荔 迤夂鲐 潲鼯泽 酊舔魁 璇网钺 峪棋重 镝黩窈 泗傍啐 螋恬猫 捱呸臊 率端泽 蓐稔钪 哑穰莺 枧抛滥 茇据鳕 谤鞑杀 餍酿锿 吠傺涕 翘端膀 哼鳙嬷 憾拈尿 业嚆鼷 湃衢捺 涨垛杀 -
cljy
。，，
随时随地看视频慕课网APP
Html/CSS
JavaScript