我想用HTML / javascript做一个简单的galaga类型的游戏,但遇到了障碍。我无法找到一种方法来使多个敌人同时存在,同时仍然能够追逐玩家(拥有多个激光器也会很好)。
我已经尝试过使用数组,然后使用如下所示的for循环:
for (i = 0; i < enemy.length; i += 1) {
enemy[i].x += -1;
enemy[i].update();
}
这是我完整的script.js(我知道它说不要全部粘贴,但我觉得这很有必要)
var player;
var canShoot = true;
var laser;
var isShooting = false;
var enemy;
var score;
var h = false;
var canMove = false;
var isMoving = false;
var gameOver = false;
function startGame() {
gameArea.start();
player = new component(30, 30, "purple", 225, 220);
laser = new component();
enemy = new component(20, 20, "green", Math.floor(Math.random() * 460), 50);
score = new component("15px", "Consolas", "black", 380, 20, "text");
}
var gameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
this.frameNo = 0;
window.addEventListener('keydown', function (e) {
gameArea.keys = (gameArea.keys || []);
gameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
gameArea.keys[e.keyCode] = false;
})
},
clear : function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((gameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.gamearea = gameArea;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.formerX;
this.formerY;
this.score = 0;
this.isAlive = true;
this.dx;
this.dy;
this.update = function() {
ctx = gameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
}
else if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (laser.y <= 0) {
canShoot = true;
isShooting = false;
h = false;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
this.crashWithX = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var otherleft = otherobj.formerX;
var otherright = otherobj.formerX + (otherobj.width);
var crash = true;
if ((myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
this.moveTowards = function(otherobj) {
var isLeft;
if (this.x - otherobj.x > 0) {
isLeft = true;
} else {
isLeft = false;
}
return isLeft;
}
}
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
function updateGameArea() {
var endScreen = new component("50px", "Consolas", "black", 75, 110, "text");
endScreen.text = "";
gameArea.clear();
gameArea.frameNo += 1;
console.log(enemy.y);
player.speedX = 0;
laser.speedY = -5;
enemy.speedX = 0;
enemy.speedY = 0;
var interval = getRndInteger(100, 200);
if (everyinterval(interval)) {
player.formerX = player.x
canMove = true;
}
if (Boolean(canMove)) {
if (enemy.x > player.formerX) {
enemy.speedX = -10;
} else if (enemy.x < player.formerX) {
enemy.speedX = 10;
}
if (enemy.crashWithX(player)) {
enemy.speedX = 0;
enemy.speedY = 10;
isMoving = true;
}
if (enemy.crashWith(player)) {
endScreen.text = "GAME OVER!"
gameArea.stop();
}
}
if (Boolean(enemy.isAlive)) {
enemy.newPos();
enemy.update();
}
if (enemy.y > 480) {
enemy.y = -20;
} else if (enemy.y == 50 && Boolean(isMoving)) {
canMove = false;
isMoving = false;
}
if (gameArea.keys && gameArea.keys[37] && player.x > 0) {player.speedX = -5}
if (gameArea.keys && gameArea.keys[39] && player.x < 480 - player.width) {player.speedX = 5}
if (gameArea.keys && gameArea.keys[32] && Boolean(canShoot)) {laser.x = player.x + 12.5; laser = new component(5, 10, "red", laser.x, 220 - 10); canShoot = false; isShooting = true;}
if (player.x < 0) {player.x = 0;}
if (player.x >= 480 - player.width) {player.x = 480 - player.width;}
if (Boolean(isShooting)) {
laser.newPos();
laser.update();
}
if (laser.crashWith(enemy) && Boolean(isShooting)) {
isShooting = false;
h = true;
player.score += 10;
enemy.x = Math.floor(Math.random() * 460);
enemy.y = 50;
}
if (Boolean(h)) {
laser.newPos();
}
score.text = "SCORE: " + player.score;
score.update();
player.newPos();
player.update();
endScreen.update();
}
因此,这段代码可以正常工作,但是我觉得没有多个敌人并不会很有趣。预先感谢!