飞机大战
相信很多人之前都玩过吧,所以到底是怎么实现的呢?下面我们一起来看看吧
定义块
<div id="view">
</div>
添加样式
*{
margin: 0;
padding: 0;
}
#view{
width: 320px;
height: 528px;
background: url(img/bg.png);
margin:0 auto;
}
#flyme{
width: 34px;
height: 24px;
background: url(img/me.png);
position: absolute;
}
实现游戏
//1.1创建飞机
var flyEle=document.createElement('div');
var view=document.getElementById('view');
flyEle.id='flyme';
//当创建完一个元素 游离在文档以外 append继承
document.body.appendChild(flyEle);
//1.2让飞机跟随鼠标
//确定事件 鼠标移动事件 事件源在文档上
document.onmousemove=function(e){
//clientX 鼠标的横轴位置
//获取鼠标的位置
var flyX=e.clientX-17;
var flyY=e.clientY-12;
var xCheck=flyX>view.offsetLeft && flyX <view.offsetLeft +view.offsetWidth-34;
var yCheck=flyY>view.offsetTop && flyY <view.offsetTop +view.offsetHeight-24;
if(xCheck && yCheck){
flyEle.style.top=flyY+'px';
flyEle.style.left=flyX+'px';
//传递新的属性
flyEle.flag=true;
}
}
//2.1创建子弹 有很多属性值,同时也有很多子弹
//创建一个对象包含多个子弹
//创建子弹对象
var objB={//子弹属性值
name:'bullet',
num:1,
arr:[],//['id|top|left']
width:6,
height:14
}
createBullet(objB);
//声明方法
function createBullet(obj){
//在一定时间内生成子弹对象
setInterval(function(){
//创建对象
var ele=document.createElement('div');
ele.id=obj.name+obj.num; //bullet1
//1.获取子弹索引
var length=obj.arr.length;//已有的子弹个数
obj.arr[length]=ele.id+'|';
obj.num++;
//指定子弹公共样式
ele.style.width=obj.width+'px';
ele.style.height=obj.height+'px';
ele.style.position='absolute';
ele.style.background='url(img/b.png)';
//flyEle.style.top 是字符串且带单位,所以要转成int
//指定子弹位置
ele.style.top=parseInt(flyEle.style.top)+'px';
ele.style.left=parseInt(flyEle.style.left)+17+'px';
//arr['id1|top|left','id2|top|left']
obj.arr[length]=obj.arr[length]+ele.style.top+'|'+ele.style.left;
document.body.appendChild(ele);
},1000)
}
//实现单位时间内,让全部子弹移动
function bulletMove(){
for(var i=0;i<objB.arr.length;i++){
//遍历得到每个子弹的id、top、left
var newArr=objB.arr[i].split('|');
var eleB=document.getElementById(newArr[0]);
newArr[1]=parseInt(newArr[1])-1;
eleB.style.top=newArr[1]+'px';
//更新状态
objB.arr[i]=newArr[0]+'|'+newArr[1]+'|'+newArr[2];
if(parseInt(eleB.style.top)<0){
//1.从数组中删掉
objB.arr.splice(i,1);
//2.删除元素
document.body.removeChild(eleB);
}
}
}
setInterval(function(){
bulletMove();
moveEn();
//遍历敌机数组
for (var i=0;i<objE.arr.length;i++){
var newArr=objE.arr[i].split('|');
var eleE=document.getElementById(newArr[0]);
var x=parseInt(newArr[2]);
var xr=x+34;
var y=parseInt(newArr[1]);
var yd=y+24;
//遍历子弹数组
for(var j=0;j<objB.arr.length;j++){
var newArr1=objB.arr[j].split('|');
var eleB=document.getElementById(newArr1[0]);
var xb=parseInt(newArr1[2]);
var yb=parseInt(newArr1[1]);
var xCheck=xb>x && xb<xr;
var yCheck=yb>y && yb<yd;
if(xCheck && yCheck){
objE.arr.splice(i,1);
objB.arr.splice(j,1);
document.body.removeChild(eleB);
document.body.removeChild(eleE);
}
}
}
},10);
//创建敌机
var objE={
name:'enemy',
num:1,
arr:[],
width:34,
height:24
}
createEnemy(objE);
function createEnemy(obj){
setInterval(function(){
if(flyEle.flag==true){
var fly=document.createElement('div');
fly.id=obj.name+obj.num;
var length=obj.arr.length;
obj.arr[length]=fly.id+'|';
obj.num++;
//定义公共样式
fly.style.width=obj.width+'px';
fly.style.height=obj.height+'px';
fly.style.position='absolute';
fly.style.background='url(img/foe.png)';
fly.style.top=0;
//定义left值 是一个随机数
var start=Math.random()*286;
fly.style.left=view.offsetLeft+start+'px';
obj.arr[length]=obj.arr[length]+fly.style.top+'|'+fly.style.left;
document.body.appendChild(fly);
}
},1000)
}
//敌机移动
function moveEn(){
if(flyEle.flag){
for(var i=0;i<objE.arr.length;i++){
//切割字符串
var newArr=objE.arr[i].split('|');
var ele=document.getElementById(newArr[0]);
newArr[1]=parseInt(newArr[1])+1;
ele.style.top=newArr[1]+'px';
objE.arr[i]=newArr[0]+'|'+newArr[1]+'|'+newArr[2];
if(newArr[1]>view.offsetHeight){
objE.arr.splice(i,1);
document.body.removeChild(ele);
}
}
}
}