<!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值试了好几遍 找不到合适的 子弹一直在左上角 求大神干货讲解
慕的地8582982
慕的地6079101
cljy