基础的实现了一下飞机大战中飞机和敌机对战的功能,还有敌机和我方飞机爆炸的位置判断,手机端运行,没有添加onmousemove事件,只添加了touch事件,如有朋友运行时发现bug麻烦通知下,谢谢(图片素材网上下载的)
html代码:
<!DOCTYPE html>
<html>
<head>
<title>飞机大战</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="cover">
<a id="start">开始战斗</a>
<p>开建制作</p>
</div>
<div id="score">
SCORE: <span id="scoreNum">0</span>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>css:
*{
margin: 0;
padding: 0;
}
body{
background-image: url("img/background.png");
background-size: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
#cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(188,188,188,0.5);
z-index: 9999;
}
#cover a{
font-size: 25px;
position: absolute;
top: 40%;
left:50%;
margin-left: -65px;
border-radius: 3px;
background-color: white;
padding: 10px 15px;
box-shadow: 1px 1px 4px grey;
}
#cover a:active{
box-shadow: none;
}
#cover p{
font-size: 10px;
position: absolute;
bottom: 10px;
left:50%;
margin-left: -22px;
}
#score{
width: 100%;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
position: absolute;
top: 20px;
left: 0;
z-index: 1000;
}
#fly{
width:80px;height:80px;
background-image: url("img/myfly/normal2.png");
background-size: 100%;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -30px;
z-index: 900;
}
.myBullet{
position: absolute;
width: 5px;
height: 8px;
background-image: url("img/bullet/bullet1.png");
}
.foeFly{
position: absolute;
width: 50px;
height: 40px;
top:0;
background-image: url("img/smallfly/normal.png");
background-size:100%;
}js:
window.onload=function(){
var cover=document.getElementById("cover");
var start=document.getElementById("start");
var score=document.getElementById("scoreNum");
var sum=0;
function myfly(){
}
myfly.prototype.showfly=function(){
this.box=document.createElement("div");
this.box.id="fly";
document.body.appendChild(this.box);
}
myfly.prototype.runfly=function(data){
var box=this.box;
this.x=box.offsetLeft;
this.y=box.offsetTop;
box.addEventListener("touchmove",function(event){
var touch = event.targetTouches[0];
if(touch.clientX<30){
touch.clientX=30;
}else if(touch.clientX>window.screen.width-30){
touch.clientX=window.screen.width-30;
}else if(touch.clientY>window.screen.height-30){
touch.clientY=window.screen.height-30;
}else if(touch.clientY<30){
touch.clientY=30;
}else{
box.style.left= touch.clientX+"px";
box.style.top= touch.clientY-(box.offsetHeight/2)+"px";
}
this.x=box.offsetLeft;
this.y=box.offsetTop;
}.bind(this));
}
myfly.prototype.overMyFly=function(box){
var box=box;
box.style.backgroundImage="url('img/myfly/over1.png')";
setTimeout(function(){
box.style.backgroundImage="url('img/myfly/over3.png')";
},300)
setTimeout(function(){
box.style.backgroundImage="url('img/myfly/over4.png')";
},600)
setTimeout(function(){
document.body.removeChild(box);
},700)
}
function myBullet(){
this.show=function(data){
this.box=document.createElement("div");
this.box.className="myBullet";
this.box.style.top=data.y+"px";
this.box.style.left=data.x+38+"px";
document.body.appendChild(this.box);
}
this.run=function(){
var box=this.box;
var i=10;
var run=setInterval(function(){
box.style.top=box.offsetTop-i+"px";
if(box.offsetTop<-10){
clearInterval(run);
myBullet.overBullet(box);
}
box.style.left=box.offsetLeft;
box.style.top=box.offsetTop;
this.x=box.offsetLeft;
this.y=box.offsetTop;
}.bind(this),30);
}
this.overBullet=function(box){
document.body.removeChild(box);
}
}
function foeFly(){
this.showFoeFly=function(){
this.box=document.createElement("div");
this.box.className="foeFly";
var suiji=Math.random()*(window.screen.width-40);
this.box.style.left=Math.floor(suiji)+"px";
document.body.appendChild(this.box);
}
this.runFoeFly=function(data,obj){
var box=this.box;
var i=1;
var run=setInterval(function(){
box.style.top=box.offsetTop+i+"px";
if(box.offsetTop>window.screen.height){
clearInterval(run);
foeFly.overFoeFly(box);
}else if(box.offsetLeft+box.offsetWidth >data.x && box.offsetLeft < data.x){
if(box.offsetTop+box.offsetHeight>data.y && box.offsetTop<=obj.y+obj.box.offsetHeight){
sum+=5;
score.innerText=sum;
clearInterval(run);
foeFly.overFoeFly(box);
}
}else if(box.offsetLeft+box.offsetWidth>obj.x && box.offsetLeft<obj.x+obj.box.offsetWidth){
if(box.offsetTop+box.offsetHeight>obj.y+20 && box.offsetTop<=obj.y+obj.box.offsetHeight){
obj.overMyFly(obj.box);
myBullet.show=null;
myBullet.run=null;
clearInterval(runBullet);
clearInterval(runFoeFly);
setTimeout(function(){
cover.style.display="block";
start.innerText="下次加油!";
start.onclick=function(){
plus.runtime.quit();
}
},2000)
}
}
},30)
}
}
foeFly.prototype.overFoeFly=function(box){
var box=box;
box.style.backgroundImage="url('img/smallfly/over11.png')";
setTimeout(function(){
box.style.backgroundImage="url('img/smallfly/over22.png')";
},200)
setTimeout(function(){
box.style.backgroundImage="url('img/smallfly/over33.png')";
},400)
setTimeout(function(){
box.style.backgroundImage="url('img/smallfly/over44.png')";
},600)
setTimeout(function(){
document.body.removeChild(box);
},800)
}
//我的飞机
var myfly=new myfly();
//子弹
var myBullet=new myBullet();
//敌方飞机
var foeFly=new foeFly();
var runBullet;
var runFoeFly;
start.onclick=function(){
cover.style.display="none";
//显示飞机
myfly.showfly();
//飞机运行
myfly.runfly();
runBullet=setInterval(function(){
myBullet.show(myfly);
myBullet.run();
},200)
runFoeFly=setInterval(function(){
foeFly.showFoeFly()
foeFly.runFoeFly(myBullet,myfly);
},1500);
}
}