<!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="飛機大戰(zhàn)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="復(fù)仇者飛機";
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);
},
//關(guān)于飛機
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>我把目前所有代碼都貼上去了，不明白為什么子彈不是從飛機頭位置出來的 老是卡在左上角，希望大神干貨講解，謝謝
js飛機大戰(zhàn)
哎呀呀哎呦呦
2017-10-27 15:38:51