Javascript实现飞机大战小游戏

时间:2022-01-24 14:52:38
源码地址:https://github.com/markLijun/planeWar


最近看到一个用JS写的坦克大战小游戏,觉得好神奇,于是自己尝试着写了一个飞机大战。

敌机类

function Enemy(x, y)
this.x = x;
this.y = y;
this.moveId = null;
this.isLive = true;//当子弹打中敌机或敌机落地时死亡,isLive属性标记敌机是否已死
this.run = function run() {
if (this.y > boxheight || this.isLive == false) {
 
window.clearInterval(this.moveId);//如果飞机已经死亡,停止运动,this.moveId会在生产飞机的时候赋值
 
this.isLive = false;
}
else {
this.y += 2.5;
 
}
}
}

生产敌机的函数

function procuceEnemy() {
var x = Math.ceil(Math.random() * (boxwidth - planewidth));//敌机的横坐标,为画布宽度减去飞机宽度之间的随机值
theEnemy = new Enemy(x, boxy);
allEnemy.push(theEnemy);//allEnemy负责储存所有敌机,将新生产的敌机推入allEnemy栈
var moveId = window.setInterval("allEnemy[" + (allEnemy.length - 1) + "].run()", 60);//这是重点,使新制造的敌机每60ms run一次,并获得新敌机的moveId
allEnemy[(allEnemy.length - 1)].timer = timer;//把获得的moveId送给敌机类中的moveId,这里是对象引用
}



画敌机的函数

function drawEnemy() {
for (var i = 0; i < allEnemy.length; i++) {//遍历所有敌机(包括已死亡的和未死亡的)
if (allEnemy[i].isLive ==true) {//挑选出活着的敌机(即应该出现在画面上的敌机)
ctx.drawImage(enemyImage, allEnemy[i].x, allEnemy[i].y, enemywidth, enemyheight);//将它们画在画布上
}
}
}
为了使飞机的运动更加流畅,可以使用setInterval()函数改变飞机的坐标,按下方向键就会调用这个函数,松开就会取消。