js通过面向对象方法编写微信飞机大战

通过面向对象的思想进行编写，主要使用了继承的方法，在编程中要考虑创建的每一个对象都需要包含那些属性。代码完整有需要的，直接复制粘贴就可以运行了。

html页面，代码如下：

分数：0
飞机大战分数
0

js页面代码：

/** 1.创建游戏引擎类* 		a.获取所需的id；* 		b.实现开始按钮的点击事件* 		c.使游戏背景图自动移动* * 2.飞机和子弹类* 		a.创建飞机类     我方飞机类 和敌方飞机类* 			生成我方飞机的实例  生成敌方飞机的实例（三种）* 		b.创建子弹类* 3.碰撞* *子弹和敌方飞机碰撞（掉血）* 我方飞机和敌方飞机碰撞（游戏结束） * *///封装获取id的函数function getById(id) {return document.getElementById(id);
}//游戏引擎类
function Engine() {this.contentArea = getById("content");this.startArea = getById("start");this.beginBtn = getById("begin");this.mainArea = getById("main");this.score = getById("score");this.label = getById("label");this.endArea = getById("end");this.planeScore = getById("planeScore");this.reloadBtn = getById("reload");this.innit = function() {this.beginBtn.onclick = () => {this.startArea.style.display = "none";this.mainArea.style.display = "block";this.score.style.display = "block";this.start();}}this.innit();
}
//背景图自动向下移动
Engine.prototype.start = function() {var count = 0;var enemyArr = []; //存放创建的敌方飞机实例var mark1 = 0; //、每计时20次生成一个敌方飞机var mark2 = 0; //、通过mark2的值得不同，产生不同类别的敌方飞机var bulletArr = []; //存放创建的子弹实例var timer = setInterval(() => {count++;this.mainArea.style.backgroundPositionY = count + "px";//创建敌方飞机实例mark1++;if(mark1 % 20 == 0) {mark2++;if(mark2 % 5 == 0) { //生成中飞机var enemyM = new EnemyPlane(Math.random() * 274, -60, "image/enemy3_fly_1.png", 2, 200, 2, "image/中飞机爆炸.gif",2);enemyArr.push(enemyM);enemyM.show();}if(mark2 % 20 == 0) { //生成大飞机var enemyL = new EnemyPlane(Math.random() * 210, -164, "image/enemy2_fly_1.png", 1, 500, 3, "image/大飞机爆炸.gif",2);enemyArr.push(enemyL);enemyL.show();}//创建小飞机	var enemyS = new EnemyPlane(Math.random() * 286, -24, "image/enemy1_fly_1.png", 3, 100, 1, "image/小飞机爆炸.gif",2);enemyS.show();enemyArr.push(enemyS);}//敌方飞机遍历for(var i = 0; i < enemyArr.length; i++) {enemyArr[i].move();//超过边界，移除if(enemyArr[i].imgNode.offsetTop >= 568 - enemyArr[i].imgNode.offsetHeight) {engine.mainArea.removeChild(enemyArr[i].imgNode);enemyArr.splice(i, 1);}}//创建子弹实例if(mark1 % 5 == 0) {var bullet = new Bullet(myplane.imgNode.offsetLeft + 30, myplane.imgNode.offsetTop - 10, "image/bullet1.png");bulletArr.push(bullet);bullet.show();}//子弹遍历for(var i = 0; i < bulletArr.length; i++) {bulletArr[i].move();//超过边界，移除if(bulletArr[i].imgNode.offsetTop <= 0) {engine.mainArea.removeChild(bulletArr[i].imgNode);bulletArr.splice(i, 1);}}for(var i = 0; i < bulletArr.length; i++) {for(var j = 0; j < enemyArr.length; j++) {//本方飞机与敌机碰撞判断//排除血量为0的敌机if(enemyArr[j].Health){if(myplane.imgNode.offsetLeft+myplane.imgNode.offsetWidth>=enemyArr[j].imgNode.offsetLeft && enemyArr[j].imgNode.offsetLeft + enemyArr[j].imgNode.offsetWidth >= myplane.imgNode.offsetLeft){if(myplane.imgNode.offsetTop<=enemyArr[j].imgNode.offsetTop+enemyArr[j].imgNode.offsetHeight && myplane.imgNode.offsetTop + myplane.imgNode.offsetHeight >= enemyArr[j].imgNode.offsetTop){myplane.imgNode.src="image/本方飞机爆炸.gif";//清除定时器（不再产生子弹，敌机）clearInterval(timer);//最终分数界面显示engine.endArea.style.display="block";engine.planeScore.innerHTML=engine.label.innerHTML;//console.log(engine.label.innerHTML)//清除鼠标移动事件，使本机不再随鼠标移动engine.mainArea.onmousemove=null;//继续事件engine.reloadBtn.onclick=function(){location.reload();}}}}//敌方飞机与子弹的碰撞检测if(bulletArr[i].imgNode.offsetLeft + bulletArr[i].imgNode.offsetWidth >= enemyArr[j].imgNode.offsetLeft && enemyArr[j].imgNode.offsetLeft + enemyArr[j].imgNode.offsetWidth >= bulletArr[i].imgNode.offsetLeft) {if(bulletArr[i].imgNode.offsetTop <= enemyArr[j].imgNode.offsetTop + enemyArr[j].imgNode.offsetHeight && bulletArr[i].imgNode.offsetTop + bulletArr[i].imgNode.offsetHeight >= enemyArr[j].imgNode.offsetTop) {//移除子弹engine.mainArea.removeChild(bulletArr[i].imgNode);bulletArr.splice(i, 1);//敌机降血enemyArr[j].Health--;//血量为0if(enemyArr[j].Health==0){//记录分数engine.label.innerHTML=parseInt(engine.label.innerHTML) +enemyArr[j].Score;//敌机爆炸enemyArr[j].imgNode.src=enemyArr[j].boomImgSrc;//标记该敌机应该消失enemyArr[j].deltime=0;			}break;}}}}//延迟一会敌机消失for(var i=0;i {var evt = e || event;var _left = evt.pageX - engine.contentArea.offsetLeft - this.imgNode.offsetWidth / 2;var _top = evt.pageY - engine.contentArea.offsetTop - this.imgNode.offsetHeight / 2;var x = engine.contentArea.offsetWidth - this.imgNode.offsetWidth;var y = engine.contentArea.offsetHeight - this.imgNode.offsetHeight;//控制边界_left = _left <= 0 ? 0 : _left >= x ? x : _left;_top = _top <= 0 ? 0 : _top >= y ? y : _top;this.imgNode.style.left = _left + "px";this.imgNode.style.top = _top + "px";}
}
//创建我方飞机实例
var myplane = new MyPlane(127, 488, "image/我的飞机.gif");
myplane.show();
myplane.move();//创建敌方飞机类
function EnemyPlane(x, y, imgSrc, speed, score, health, boomSrc,deltime) {Plane.call(this, x, y, imgSrc);this.Speed = speed;this.Score = score;this.Health = health;this.boomImgSrc = boomSrc;this.deltime=deltime;this.displayTime=0;}
//调用寄生式继承
inherit(EnemyPlane, Plane);EnemyPlane.prototype.move = function() {this.imgNode.style.top = this.imgNode.offsetTop + this.Speed + "px";}//创建子弹类
function Bullet(x, y, imgSrc) {Plane.call(this, x, y, imgSrc);
}
//调用寄生式继承
inherit(Bullet, Plane);Bullet.prototype.move = function() {this.imgNode.style.top = this.imgNode.offsetTop - 10 + "px";
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！