通过面向对象的思想进行编写，主要使用了继承的方法，在编程中要考虑创建的每一个对象都需要包含那些属性。代码完整有需要的，直接复制粘贴就可以运行了。
html页面，代码如下：
<body>
<div id="content">
<div id="start">
<input type="button" value="开始游戏" id="begin">
</div>
<div id="main">
<div id="score">
<label>分数：</label>
<label id="label">0</label>
</div>
<div id="end">
<p class="planeText">飞机大战分数</p>
<p id="planeScore">0</p>
<div><input type="button" value="继续" id="reload"></div>
</div>
</div>
</div>
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
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--;
//血量为0
if(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<enemyArr.length;i++){
if(enemyArr[i].deltime==0){
//消失延迟
enemyArr[i].displayTime++;
//击中后敌机不再前进
enemyArr[i].imgNode.style.top=enemyArr[i].imgNode.offsetTop-enemyArr[i].Speed+"px";
//敌机爆炸图延时时间到，清除敌机
if(enemyArr[i].displayTime==20){
engine.mainArea.removeChild(enemyArr[i].imgNode);
enemyArr.splice(i, 1);
}
}
}
}, 20)
}
//引擎类的实例
var engine = new Engine();
//创建飞机类
function Plane(x, y, imgSrc) {
this.posX = x;
this.posY = y;
this.imgSrc = imgSrc;
}
//飞机显示位置
Plane.prototype.show = function() {
this.imgNode = document.createElement("img");
this.imgNode.src = this.imgSrc;
this.imgNode.style.left = this.posX + "px";
this.imgNode.style.top = this.posY + "px";
engine.mainArea.appendChild(this.imgNode);
}
//飞机移动函数
Plane.prototype.move = function() {
throw new Error("请重写该方法");
}
//寄生式继承
function inherit(subType, superType) {
subType.prototype = Object.create(superType.prototype);
subType.prototype.constructor = subType;
}
//我方飞机类
function MyPlane(x, y, imgSrc) {
Plane.call(this, x, y, imgSrc);
}
//调用寄生式继承
inherit(MyPlane, Plane);
MyPlane.prototype.move = function() {
engine.mainArea.onmousemove = (e) => {
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";
}
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
