简单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>