飞机大战html js,js飞机大战

html>

Game Of Plan

*{

margin:0px;

padding:0px;

}

window.οnlοad=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.οnmοuseenter=function(){

this.style.background='#FB6A0F';

this.style.color='#000';

}

pp.οnmοuseleave=function(){

this.style.background='#fff';

this.style.color='#000';

}

//点击进入第二个页面

pp.οnclick=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.οnmοuseenter=function(){

pp.style.background='#FE3535';

pp.style.color='#0F0505';

}

pp.οnmοuseleave=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.οnresize=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.οnmοuseοver=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

clearInterval(biu.timer);

biu.parentNode.removeChild(biu);

}

},13);

},100);

},

};

我把目前所有代码都贴上去了，不明白为什么子弹不是从飞机头位置出来的 老是卡在左上角，希望大神干货讲解，谢谢