js通过面向对象方法编写微信飞机大战

通过面向对象的思想进行编写，主要使用了继承的方法，在编程中要考虑创建的每一个对象都需要包含那些属性。代码完整有需要的，直接复制粘贴就可以运行了。

html页面，代码如下：

		

			

				
			
			

				

					分数：
					0
				
				

					
飞机大战分数
					
0
					

				
			
		
	
	

js页面代码：

/*
 * 1.创建游戏引擎类
 * 		a.获取所需的id；
 * 		b.实现开始按钮的点击事件
 * 		c.使游戏背景图自动移动
 * 
 * 2.飞机和子弹类
 * 		a.创建飞机类     我方飞机类 和敌方飞机类
 * 			生成我方飞机的实例  生成敌方飞机的实例（三种）
 * 		b.创建子弹类
 * 3.碰撞
 * 
 *子弹和敌方飞机碰撞（掉血）
 * 我方飞机和敌方飞机碰撞（游戏结束） 
 * 
 */

//封装获取id的函数

function getById(id) {
	return document.getElementById(id);
}

//游戏引擎类
function Engine() {

	this.contentArea = getById("content");
	this.startArea = getById("start");
	this.beginBtn = getById("begin");
	this.mainArea = getById("main");
	this.score = getById("score");
	this.label = getById("label");
	this.endArea = getById("end");
	this.planeScore = getById("planeScore");
	this.reloadBtn = getById("reload");

	this.innit = function() {
		this.beginBtn.onclick = () => {
			this.startArea.style.display = "none";
			this.mainArea.style.display = "block";
			this.score.style.display = "block";

			this.start();
		}
	}

	this.innit();
}
//背景图自动向下移动
Engine.prototype.start = function() {
	var count = 0;

	var enemyArr = []; //存放创建的敌方飞机实例
	var mark1 = 0; //、每计时20次生成一个敌方飞机
	var mark2 = 0; //、通过mark2的值得不同，产生不同类别的敌方飞机
	var bulletArr = []; //存放创建的子弹实例
	
	var timer = setInterval(() => {
		count++;
		this.mainArea.style.backgroundPositionY = count + "px";

		//创建敌方飞机实例
		mark1++;
		if(mark1 % 20 == 0) {
			mark2++;
			if(mark2 % 5 == 0) { //生成中飞机
				var enemyM = new EnemyPlane(Math.random() * 274, -60, "image/enemy3_fly_1.png", 2, 200, 2, "image/中飞机爆炸.gif",2);
				enemyArr.push(enemyM);
				enemyM.show();
			}
			if(mark2 % 20 == 0) { //生成大飞机
				var enemyL = new EnemyPlane(Math.random() * 210, -164, "image/enemy2_fly_1.png", 1, 500, 3, "image/大飞机爆炸.gif",2);
				enemyArr.push(enemyL);
				enemyL.show();
			}
			//创建小飞机	
			var enemyS = new EnemyPlane(Math.random() * 286, -24, "image/enemy1_fly_1.png", 3, 100, 1, "image/小飞机爆炸.gif",2);
			enemyS.show();
			enemyArr.push(enemyS);
		}
		
		//敌方飞机遍历
		for(var i = 0; i < enemyArr.length; i++) {
			enemyArr[i].move();
			//超过边界，移除
			if(enemyArr[i].imgNode.offsetTop >= 568 - enemyArr[i].imgNode.offsetHeight) {
				engine.mainArea.removeChild(enemyArr[i].imgNode);
				enemyArr.splice(i, 1);
			}
		}

		//创建子弹实例
		if(mark1 % 5 == 0) {
			var bullet = new Bullet(myplane.imgNode.offsetLeft + 30, myplane.imgNode.offsetTop - 10, "image/bullet1.png");
			bulletArr.push(bullet);
			bullet.show();
		}

		//子弹遍历
		for(var i = 0; i < bulletArr.length; i++) {
			bulletArr[i].move();
			//超过边界，移除
			if(bulletArr[i].imgNode.offsetTop <= 0) {
				engine.mainArea.removeChild(bulletArr[i].imgNode);
				bulletArr.splice(i, 1);
			}
		}

		
		for(var i = 0; i < bulletArr.length; i++) {
			for(var j = 0; j < enemyArr.length; j++) {
				//本方飞机与敌机碰撞判断
				//排除血量为0的敌机
				if(enemyArr[j].Health){
					if(myplane.imgNode.offsetLeft+myplane.imgNode.offsetWidth>=enemyArr[j].imgNode.offsetLeft && enemyArr[j].imgNode.offsetLeft + enemyArr[j].imgNode.offsetWidth >= myplane.imgNode.offsetLeft){
						if(myplane.imgNode.offsetTop<=enemyArr[j].imgNode.offsetTop+enemyArr[j].imgNode.offsetHeight && myplane.imgNode.offsetTop + myplane.imgNode.offsetHeight >= enemyArr[j].imgNode.offsetTop){
							
							myplane.imgNode.src="image/本方飞机爆炸.gif";
							//清除定时器（不再产生子弹，敌机）
							clearInterval(timer);
							//最终分数界面显示
							engine.endArea.style.display="block";
							engine.planeScore.innerHTML=engine.label.innerHTML;
							//console.log(engine.label.innerHTML)
							//清除鼠标移动事件，使本机不再随鼠标移动
							engine.mainArea.onmousemove=null;
							//继续事件
							engine.reloadBtn.onclick=function(){
								location.reload();
								
							}
						}
						
					}
				}
					
				//敌方飞机与子弹的碰撞检测
				if(bulletArr[i].imgNode.offsetLeft + bulletArr[i].imgNode.offsetWidth >= enemyArr[j].imgNode.offsetLeft && enemyArr[j].imgNode.offsetLeft + enemyArr[j].imgNode.offsetWidth >= bulletArr[i].imgNode.offsetLeft) {
					if(bulletArr[i].imgNode.offsetTop <= enemyArr[j].imgNode.offsetTop + enemyArr[j].imgNode.offsetHeight && bulletArr[i].imgNode.offsetTop + bulletArr[i].imgNode.offsetHeight >= enemyArr[j].imgNode.offsetTop) {
						
						
						//移除子弹
						engine.mainArea.removeChild(bulletArr[i].imgNode);
						bulletArr.splice(i, 1);
						//敌机降血
						enemyArr[j].Health--;
						//血量为0
						if(enemyArr[j].Health==0){
							//记录分数
							engine.label.innerHTML=parseInt(engine.label.innerHTML) +enemyArr[j].Score;
							//敌机爆炸
							enemyArr[j].imgNode.src=enemyArr[j].boomImgSrc;
							//标记该敌机应该消失
							enemyArr[j].deltime=0;			
						}
						
						break;
					}
				}
			}
		}
		//延迟一会敌机消失
		for(var i=0;i {
		var evt = e || event;
		var _left = evt.pageX - engine.contentArea.offsetLeft - this.imgNode.offsetWidth / 2;
		var _top = evt.pageY - engine.contentArea.offsetTop - this.imgNode.offsetHeight / 2;
		var x = engine.contentArea.offsetWidth - this.imgNode.offsetWidth;
		var y = engine.contentArea.offsetHeight - this.imgNode.offsetHeight;

		//控制边界
		_left = _left <= 0 ? 0 : _left >= x ? x : _left;
		_top = _top <= 0 ? 0 : _top >= y ? y : _top;

		this.imgNode.style.left = _left + "px";
		this.imgNode.style.top = _top + "px";
	}
}
//创建我方飞机实例
var myplane = new MyPlane(127, 488, "image/我的飞机.gif");
myplane.show();
myplane.move();

//创建敌方飞机类
function EnemyPlane(x, y, imgSrc, speed, score, health, boomSrc,deltime) {
	Plane.call(this, x, y, imgSrc);
	this.Speed = speed;
	this.Score = score;
	this.Health = health;
	this.boomImgSrc = boomSrc;
	this.deltime=deltime;
	this.displayTime=0;

}
//调用寄生式继承
inherit(EnemyPlane, Plane);

EnemyPlane.prototype.move = function() {

	this.imgNode.style.top = this.imgNode.offsetTop + this.Speed + "px";

}

//创建子弹类
function Bullet(x, y, imgSrc) {
	Plane.call(this, x, y, imgSrc);
}
//调用寄生式继承
inherit(Bullet, Plane);

Bullet.prototype.move = function() {

	this.imgNode.style.top = this.imgNode.offsetTop - 10 + "px";
}