面向对象飞机大战（结合ES6、继承 、设计模式）

地图Map.js

// 懒汉式单例模式创建地图对象
var Map = (function(){
	class Map{
		constructor(){
			this.width = 320;
			this.height = 568;
			this.startImg = "images/start_bg.png";
			this.bgImg = "images/bg.png";
			this.startElement = null;
			this.gameElement = null;
			this.scoresElement = null;
		}
		init(){
			var container = document.createElement("div");
			css(container, {
				width: this.width + "px",
				height: this.height + "px",
				position: "relative",
				margin: "20px auto",
				overflow: "hidden"
			})
			this.gameElement = document.createElement("div");
			css(this.gameElement, {
				width: this.width + "px",
				height: this.height + "px",
				background: "url("+ this.bgImg +")",
				position: "absolute",
			})
			container.appendChild(this.gameElement);
			this.startElement = document.createElement("div");
			css(this.startElement, {
				width: this.width + "px",
				height: this.height + "px",
				background: "url("+ this.startImg +")",
				position: "absolute"
			})
			this.scoresElement = document.createElement("div");
			this.scoresElement.innerHTML = "分数：0";
			css(this.scoresElement, {
				width: "100px",
				height: "30px",
				border: "1px solid #ccc",
				position: "absolute"
			})
			container.appendChild(this.scoresElement);
			container.appendChild(this.startElement);
			$("body")[0].appendChild(container);
		}
		addRole(role){
			this.gameElement.appendChild(role);
		}
		removeRole(role){
			this.gameElement.removeChild(role);
		}
	}

	var mapInstance = null;
	return {
		getInstance : function(){
			if(mapInstance === null)
				return mapInstance = new Map();
		}
	}.getInstance();
	// return new Map();
})();

地图内所有角色对象的父类Role.js

// 地图内所有角色对象的父类
class Role{
	constructor({width, height, img, x, y}){
		this.width = width;
		this.height = height;
		this.img = img;
		this.element = null
		this.x = x;
		this.y = y;
	}
	init(){
		this.element = document.createElement("img");
		this.element.src = this.img;
		css(this.element, {
			width: this.width + "px",
			height: this.height + "px",
			position: "absolute",
			top: this.y + "px",
			left: this.x + "px"
		})
		Map.addRole(this.element);
	}
}

自身战机Fighter.js

// 饿汉单例模式继承Role构造函数创建战机
var Fighter = (function(){
	class Fighter extends Role{
		constructor(){
			super({width: 66,
					height: 80,
					img: "images/self.gif",
					x: 120,
					y: 350,
				 });
		}
	}
	return new Fighter();
})();

子弹Bullet.js

// 创建Bullet类
class Bullet extends Role{
	constructor(){
		super({width: 6,
			height: 14,
			img: "images/bullet.png",
			x: Fighter.x + Fighter.width/2 - 6/2,
			y: Fighter.y - 14
		});
		this.speed = -5;
		this.isAlive = true;
	}
	move(){
		this.y += this.speed;
		css(this.element, {top: this.y + "px"});
		if(this.y < 0){
			Map.removeRole(this.element);
			this.isAlive = false;
		}
	};
}

敌机Enemy.js

// 工厂模式创建敌机
class Enemy extends Role{
	constructor({width, height, img, speed, hp, scores}){
		super({width, height, img});
		this.y = -this.height;
		this.x = randomNum(0, Map.width - this.width);
		this.hp = hp;
		this.speed = speed;
		this.scores = scores;
		this.isAlive = true;
	}
	move(){
		this.y += this.speed;
		css(this.element, {top: this.y + "px"});
		if(this.y > Map.height){
			Map.removeRole(this.element);
			this.isAlive = false;
		}
	}
}

var enemyFactory = {
	createEnemy: function(type){
		var obj;
		if(type === "small")
			obj = new Enemy({width: 34, height: 24, img: "images/small_fly.png", speed: 2, hp: 1, scores:5});
		if(type === "middle")
			obj = new Enemy({width: 46, height: 60, img: "images/mid_fly.png", speed: 1, hp: 6, scores:20});
		if(type === "big")
			obj = new Enemy({width: 110, height: 164, img: "images/big_fly.png", speed: 1, hp: 18, scores:50});
		obj.init();
		return obj;
	}
}

游戏平台Game.js

// 单例模式游戏平台
var Game = {
	bullets: [], enemies: [],
	startGame: function(){
		Map.init();//初始化地图
		this.addEvent();
	},
	play: function(){
		var count = 0;
		this.timer = setInterval(()=>{
			count++;
			this.create(count);
			this.move();
			var scores = Number(Map.scoresElement.innerHTML.slice(3));
			for(var i = this.enemies.length - 1; i >= 0; i--){//子弹碰撞、战机敌机碰撞后
				for(var j = this.bullets.length - 1; j >= 0; j--){
					if(this.collision(this.enemies[i], this.bullets[j]) && count % 10 === 0){
						Map.removeRole(this.bullets[j].element);
						this.bullets.splice(j, 1);
						this.enemies[i].hp--;
						if(this.enemies[i].hp <= 0){
							Map.scoresElement.innerHTML = "分数：" + (scores + this.enemies[i].scores);
							Map.removeRole(this.enemies[i].element);
							this.enemies.splice(i, 1);
							break;
						}
					}
					if(this.collision(this.enemies[i], Fighter)){
						var result = "游戏结束！\n" + scores + "分";
						clearInterval(this.timer);
						Map.gameElement.onmousemove = null;
						alert(result);
						location.reload();
						break;
					}
				}
			}
		},1000/60)
	},
	addEvent: function(){
		Map.startElement.onclick = function(){
			fadeOut(this, 500);//点击开始隐藏开始界面
			Fighter.init();//初始化自身战机
			Game.play();
		};
		Map.gameElement.onmousemove = function(e){
			e = e || event;
			var y = e.clientY - Fighter.element.offsetHeight/2,
				x = e.clientX - Fighter.element.offsetWidth/2;
			offset(Fighter.element, {
				top: y,
				left: x
			});
			Fighter.x = Fighter.element.offsetLeft;
			Fighter.y = Fighter.element.offsetTop;
		};
	},
	create: function(count){/*创建子弹和敌机并添加至数组保存*/
		if(count % 10 === 0){
			var bullet = new Bullet();
			this.bullets.push(bullet);
			bullet.init();
		}

		if(count % 50 === 0)
			this.enemies.push(enemyFactory.createEnemy("small"));
		if(count % 222 === 0)
			this.enemies.push(enemyFactory.createEnemy("middle"));
		if(count % 666 === 0)
			this.enemies.push(enemyFactory.createEnemy("big"));
	},
	move: function(){/*每个子弹与敌机的移动*/
		for(var i = this.bullets.length - 1; i >= 0; i--){
			this.bullets[i].move();
			if(!this.bullets[i].isAlive)
				this.bullets.splice(i, 1);
		}
		for(var i = this.enemies.length - 1; i >= 0; i--){
			this.enemies[i].move();
			if(!this.enemies[i].isAlive)
				this.enemies.splice(i, 1);
		}
	},
	collision: function(role1, role2){
		return !(role1.x > role2.x + role2.width
				|| role2.x > role1.x + role1.width
				|| role1.y > role2.y + role2.height
				|| role2.y > role1.y + role1.height);
	}
}

game.html