前端复刻经典小游戏之飞机大战（三）

@[toc]飞机大战

飞机大战小游戏相关说明

需求说明

• 己方飞机与敌方飞机
• 己方发射子弹，摧毁敌方飞机
• 击毁一辆敌方飞机得分
• 己方飞机碰撞敌方飞机游戏结束统计分数

功能说明

主要功能

• 鼠标移动己方飞机
• 己方飞机发射子弹
• 敌方飞机随机生成，运动方向由上到下
• 模式难度选择：敌机的数量、敌机的移动速度等

次要功能

• 敌方不同类型飞机
• 己方不同类型飞机

技术说明

掌握基本的前端技术，熟练使用CSS、JS代码，完成游戏的布局与动态交互作用

所用的Javascript技术介绍

1、setInterval() 是 JavaScript 中的一个内置函数，它用于在指定的间隔时间内重复执行一段代码，实现周期性操作。
2、Math.random()随机数生成
3、innerHTML 是一个用于读取或设置 HTML 元素内容的属性。通过 innerHTML 属性，可以获取或修改指定元素的 HTML 内容。
4、removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
5、parentNode属性，首先需要获取到一个节点对象。可以通过getElementById、getElementsByTagName等方法获取到指定的节点对象。然后，就可以使用parentNode属性来获取该节点的父节点。
6、onmousemove 监听鼠标移动事件

飞机爆炸状态与物体碰撞检测（敌机与子弹，我机与敌机碰撞）

//爆炸函数
function boom(l,t,w,h,i){
   
	var oBoom = new Image();
//	oBoom.src = "img/"+["boom_small","plane_0","boom_big"][i]+".png";
	oBoom.src = "img/boom.png"
	oBoom.className ="boom";
	oBoom.width = w;
	oBoom.height = h;
	oBoom.style.left = l + "px";
	oBoom.style.top = t + 'px';
	oMap.appendChild(oBoom);
	setTimeout(function(){
   
		oBoom.parentNode && oMap.removeChild(oBoom);
	},[1200,2500,1200][i]);
}

//两个物体 碰撞检测
function coll( obj1 , obj2 ){
   
	var T1 = obj1.offsetTop,
		B1 = T1+obj1.clientHeight,
		L1 = obj1.offsetLeft,
		R1 = L1+obj1.clientWidth;

	var T2 = obj2.offsetTop,
		B2 = T2+obj2.clientHeight,
		L2 = obj2.offsetLeft,
		R2 = L2+obj2.clientWidth;