地图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>