简单js面向对象打飞机

地图Map.js：

var Map = {
	width: 320,
	height: 568,
	startImg: "images/start_bg.png",
	bgImg: "images/bg.png",
	startElement: null,
	gameElement: null,
	scoresElement: null,
	init: function(){
		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: function(role){
		this.gameElement.appendChild(role);
	},
	removeRole: function(role){
		this.gameElement.removeChild(role);
	}
}

自身战机Fighter.js：

var Fighter = {
	width: 66,
	height: 80,
	img: "images/self.gif",
	element: null,
	x: 120,
	y: 350,
	init: function(){
		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"
		})
	}
}

子弹Bullet.js：

function Bullet(){
	this.width = 6;
	this.height = 14;
	this.img = "images/bullet.png";
	this.element = null;
	this.x = Fighter.x + Fighter.width/2 - this.width/2;
	this.y = Fighter.y - this.height;
	this.speed = -5;
	this.isAlive = true;
}
Bullet.prototype = {
	init: function(){
		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);
	},
	move: function(){
		this.y += this.speed;
		css(this.element, {top: this.y + "px"});
		if(this.y < 0){
			Map.removeRole(this.element);
			this.isAlive = false;
		}
	}
}

玩游戏的过程方法Game.js：

var Game = {
	bullets: [], enemies: [],
	startGame: function(){
		Map.init();//初始化地图
		this.addEvent();
	},
	play: function(){
		var count = 0;
		setInterval(function(){
			count++;
			if(count % 10 === 0){
				var bullet = new Bullet();
				Game.bullets.push(bullet);
				bullet.init();
			}
			for(var i = Game.bullets.length - 1; i >= 0; i--){
				Game.bullets[i].move();
				if(!Game.bullets[i].isAlive)
					Game.bullets.splice(i, 1);
			}

			if(count % 80 === 0){
				var smallEnemy = new Enemy({width: 34, height: 24, img: "images/small_fly.png", speed: 2, hp: 1, scores:5});
				Game.enemies.push(smallEnemy);
				smallEnemy.init();
			}
			if(count % 333 === 0){
				var midEnemy = new Enemy({width: 46, height: 60, img: "images/mid_fly.png", speed: 1, hp: 6, scores:20});
				Game.enemies.push(midEnemy);
				midEnemy.init();
			}
			if(count % 777 === 0){
				var bigEnemy = new Enemy({width: 110, height: 164, img: "images/big_fly.png", speed: 1, hp: 18, scores:50});
				Game.enemies.push(bigEnemy);
				bigEnemy.init();
			}
			for(var i = Game.enemies.length - 1; i >= 0; i--){
				Game.enemies[i].move();
				if(!Game.enemies[i].isAlive)
					Game.enemies.splice(i, 1);
			}

			var scores = Number(Map.scoresElement.innerHTML.slice(3));
			for(var i = Game.enemies.length - 1; i >= 0; i--){//子弹碰撞、战机敌机碰撞后
				for(var j = Game.bullets.length - 1; j >= 0; j--){
					if(Game.collision(Game.enemies[i], Game.bullets[j]) && count % 10 === 0){
						Map.removeRole(Game.bullets[j].element);
						Game.bullets.splice(j, 1);
						Game.enemies[i].hp--;
						if(Game.enemies[i].hp <= 0){
							Map.scoresElement.innerHTML = "分数：" + (scores + Game.enemies[i].scores);
							Map.removeRole(Game.enemies[i].element);
							Game.enemies.splice(i, 1);
							break;
						}
					}
					if(Game.collision(Game.enemies[i], Fighter)){
						var result = "游戏结束！\n" + scores + "分";
						alert(result);
						location.reload();
						break;
					}
				}
			}
		},1000/60)
	},
	addEvent: function(){
		Map.startElement.onclick = function(){
			fadeOut(this, 500);//点击开始隐藏开始界面
			Fighter.init();//初始化自身战机
			Map.addRole(Fighter.element);//添加自身战机
			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;
		};
	},
	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);
	}
}

敌机Enemy.js：

function Enemy({width, height, img, speed, hp, scores}){//解构复制
	this.width = width;
	this.height = height;
	this.img = img;
	this.speed = speed;
	this.hp = hp;
	this.scores = scores;
	this.element = null;
	this.x = randomNum(0, Map.width - this.width);
	this.y = -this.height;
	this.isAlive = true;
}
Enemy.prototype = new Bullet();//继承Bullet原型
Enemy.prototype.move = function(){
	this.y += this.speed;
	css(this.element, {top: this.y + "px"});
	if(this.y > Map.height){
		Map.removeRole(this.element);
		this.isAlive = false;
	}
}

game.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="btn" type="button" value="start game">
<script src="js/tool.js"></script>
<script src="js/Map.js"></script>
<script src="js/Fighter.js"></script>
<script src="js/Bullet.js"></script>
<script src="js/Enemy.js"></script>
<script src="js/Game.js"></script>
<script type="text/javascript">
	$("#btn").onclick = function(){
		Game.startGame();
		this.style.display = "none";
	}
</script>
</body>
</html>