飞机大战的实现

飞机大战

相信很多人之前都玩过吧，所以到底是怎么实现的呢？下面我们一起来看看吧

定义块

<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);
					}
				}
			}
		}