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

简单js面向对象打飞机相关推荐

简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...
对js面向对象的理解
转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...
JS面向对象的程序设计之继承-继承的实现-借用构造函数
JS面向对象的程序设计之继承-继承的实现-借用构造函数前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...
js面向对象模拟京东商城图片放大效果
js面向对象模拟京东商城图片放大效果 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力.本文简单介绍一下使用JavaScript面向对象思想模拟京东商城鼠标悬浮 ...
JS 面向对象编程、原型链、原型继承（个人学习总结）
一.面向对象 1. 面向对象是所有语言都有的一种编程思想,组织代码的一种形式基于对象的语言:JS语言面向对象的语言:c++ java c# 2. 面向对象 3大特征封装:将重用代码封装到函数 ...
从零开始用js手写飞机大战全过程（附源码）
plane game 前言此文章帮助初学者学习制作一个简单小游戏目标利用css,html,js制作出飞机大战的简略版前置准备 1. 绝对定位与相对定位这里除了背景都设置为绝对定位,使飞机和敌 ...
js 面向对象编程实例
当我们在写js代码的时候,总是会想能否和java一样面向对象去编程,让人更易维护以及代码的分离.下面举一例说明: jsp页面如下 <!DOCTYPE html> <html>& ...
什么是js面向对象？有什么特点？
什么是js面向对象? 1.首先,js面向对象是一种思想: 2.其次,遵循万物皆对象的准则:程序中的关键模块都可以视为对象,对象都是由属性和方法组成,属性可以理解为对象的特征,是静态的,方法可以理解为对 ...

简单js面向对象打飞机

`地图Map.js：`

`自身战机Fighter.js：`

`子弹Bullet.js：`

`game.html：`

简单js面向对象打飞机相关推荐

最新文章

热门文章