我有一个太空射击游戏，飞机从屏幕顶部下来，这架飞机叫做enemy.png，但现在我想添加更多的敌人。但我不知道从哪里开始。 我想添加另一个名为enemy1.png的敌人。这个敌人也需要有一个不同的速度然后enemy.png
希望你们能帮忙。
这是敌人的代码
//enemies
var enemy;
var enemyTotal = 5;
var enemies = [enemy1,enemy2];
var enemy_x = 50;
var enemy_y = -45;
var enemy_w = 50;
var enemy_h = 50;
var speed = 3;
//Build enemy array of x/y coordinate, width, height, and speed
for (var i = 0; i < enemyTotal; i++) {
enemies.push([enemy_x, enemy_y, enemy_w, enemy_h, speed]);
enemy_x += enemy_w + 60;
}
//Iterate through array of enemies and draw them on the canvas
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
ctx.drawImage(enemy, enemies[i][0], enemies[i][1]);
}
}
//Iterate through array of enemies and update their position
function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
if (enemies[i][1] < height) {
enemies[i][1] += enemies[i][4];
} else if (enemies[i][1] > height - 1) {
//after the enemies scroll off screen, this value is where they get re-spawned
enemies[i][1] = -45;
}
}
}
//Check for laser collision
function hitTest() {
var remove = false;
for (var i = 0; i < lasers.length; i++) {
for (var j = 0; j < enemies.length; j++) {
//laser's y position is less than or equal to the enemy's y position plus its height -AND-
//laser's x position is greater than or equal to the enemy's x position -AND-
//laser's x position is less than or equal to the enemy's x position plus it's width
if (lasers[i][1] <= (enemies[j][1] + enemies[j][3]) && lasers[i][0] >= enemies[j][0] && lasers[i][0] <= (enemies[j][0] + enemies[j][2])) {
remove = true;
//draw();//hier explosion afspelen
enemies.splice(j, 1); //enemy at this array position no longer gets drawn
enemies.push([(Math.random() * 500) + 50, -45, enemy_w, enemy_h, speed]); //refill a new enemy in a random x position between 50 and 500
}
}
if (remove == true) {
lasers.splice(i, 1); //laser at this array position no longer gets drawn
remove = false;
score += 10;
}
}
}
这是我定义图片的代码
//wereld
var canvas;
var ctx;
var width = 600;
var height = 600;
var starfield;
var starX = 0;
var starY = 0;
var starY2 = -600;
//scoring
var score = 0;
var alive = true;
var lives = 3;
var gameStarted = false;
image = new Image()
image.src = 'explosion.png';
//Clear the canvas, this is required before each canvas frame update
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
}
//Initialize image objects, canvas, and event listeners
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
enemy = new Image();
enemy.src = 'enemy.png';
ship = new Image();
ship.src = 'ship.png';
starfield = new Image();
starfield.src = 'starfield.jpg';
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
canvas.addEventListener('click', gameStart, false);
gameLoop();
}
//Used by an event listener. Removes the overall canvas listener once game has started.
function gameStart() {
gameStarted = true;
canvas.removeEventListener('click', gameStart, false);
}
//Game loop that calls all the functions needed to be updated
function gameLoop() {
clearCanvas();
drawStarfield();
if (alive && gameStarted && lives > 0) {
hitTest();
moveEnemies();
moveLaser();
drawEnemies();
drawShip();
drawLaser();
shipCollision();
}
scoreTotal();
//game = setTimeout(gameLoop, 1000 / 30); //not sure why 'game =' is included...
setTimeout(gameLoop, 1000 / 30); //this works too...
}
//Used to draw several text and shape objects for score, lives, and pre-game information.
function scoreTotal() {
ctx.font = 'bold 18px VT323';
ctx.fillStyle = '#fff';
ctx.fillText('Score: ', 10, 55);
ctx.fillText(score, 70, 55);
ctx.fillText('Lives: ', 10, 30);
ctx.fillText(lives, 68, 30);
if (!alive) {
ctx.fillText('Game Over!', 245, (height / 2));
//Continue button
ctx.fillRect((width / 2) - 65, (height / 2) + 10, 100, 40);
ctx.fillStyle = '#000';
ctx.fillText('Opnieuw?', 252, (height / 2) + 35);
canvas.addEventListener('click', continueButton, false);
}
//Pre-Game Text
if (!gameStarted) {
ctx.font = 'bold 50px VT323';
ctx.fillText('Sander Gouman top down', (width / 2) - 210, (height / 2));
ctx.font = 'bold 20px VT323';
ctx.fillText('Klik om te spelen', (width / 2) - 56, (height / 2) + 30);
ctx.fillText('Beweeg met de pijltjes', (width / 2) - 100, (height / 2) + 60);
ctx.fillText('Gebruik de spatiebalk om te schieten', (width / 2) - 100, (height / 2) + 90);
}
}
//Used by an event listener. Detects if mouse click is within a specific area.
function continueButton(e) {
var cursorPos = getCursorPos(e);
if (cursorPos.x > (width / 2) - 53 && cursorPos.x < (width / 2) + 47 && cursorPos.y > (height / 2) + 10 && cursorPos.y < (height / 2) + 50) {
alive = true;
lives = 3;
reset();
canvas.removeEventListener('click', continueButton, false);
}
}
//Used for detection of mouse click on canvas
function getCursorPos(e) {
var x;
var y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
var cursorPos = new cursorPosition(x, y);
return cursorPos;
}
//Store x and y cursor position
function cursorPosition(x, y) {
this.x = x;
this.y = y;
}
//Check lives
function checkLives() {
lives -= 1;
if (lives > 0) {
reset();
} else if (lives == 0) {
alive = false;
}
}
//Reset enemies and player back to default position
function reset() {
var enemy_reset_x = 50;
ship_x = (width / 2) - 25;
ship_y = height - 75;
ship_w = 50;
ship_h = 57;
for (var i = 0; i < enemies.length; i++) {
enemies[i][0] = enemy_reset_x;
enemies[i][1] = -45;
enemy_reset_x = enemy_reset_x + enemy_w + 60;
}
}
//Draw a continuous, scrolling starfield (using two instances)
function drawStarfield() {
ctx.drawImage(starfield, starX, starY);
ctx.drawImage(starfield, starX, starY2);
if (starY > 600) {
starY = -599;
}
if (starY2 > 600) {
starY2 = -599;
}
starY += 1;
starY2 += 1;
}
//Initialize canvas when page is loaded
window.onload = init;
希望你们能帮忙，这样我就能得到更多的敌人
答案 0 :(得分：0)
一个想法可能是，不考虑将敌人属性存储在全局范围内，而是考虑将属性存储在敌方对象中。
最简单的方法是创建一个像
这样的函数 //enemies could be in global scope or
//inside a closure that contains everything related to the enemies
var enemies = [];
function spawnenemy(x,y,s,i) {
var enemy = {
xcord: x,
ycord: y,
speed: s,
spriteimg: new Image()
};
enemy['spriteimg'].src = i;
enemies.push(enemy);
}
然后将每个敌人对象传递给操纵敌人的游戏功能。
例如，如果你想要在敌人死亡时改变你的形象，就会有这样的功能。
function showDead(enemy) {
//Notice how I am accessing the image property of the enemy...
enemy['spriteImgUrl'].src = "dead.jpg";
//do your thing to refresh your canvas to show the new image
//or register showDead function with a listener that will do it for you
}
并简单地将应该死的敌人传给这个函数，以表明它已被杀死。
希望它能给你一些想法。
答案 1 :(得分：0)
我建议将每个“敌人”视为自己的对象，并且为了能够定义对象，你需要制作自己的敌人类：
function Enemy() {
// stick this at the top of your code somewhere.
// this defines an Enemy "class", which allows
// you to make "new" Enemy instances
}
一旦你拥有了它，你可以制造“新”敌人，并为他们分配你喜欢的任何属性......甚至功能：
var enemy1 = new Enemy();
var enemy2 = new Enemy();
enemy1.x = 50;
enemy2.x = 50;
// ... fill in the rest of the stuff here
enemy1.speed = 3;
enemy2.speed = 5;
enemy1.image = new Image();
enemy1.image.src = 'enemyShip1.png';
enemy2.image = new Image();
enemy2.image.src = 'enemyShip2.png';
enemy1.getKilledByPlayer = function() {
// give the player some score, for example
// and/or remove this enemy from the game
};
enemies.push(enemy1);
enemies.push(enemy2);
这里的关键是，当你去绘制每个敌人时，你会使用你制作的对象（enemy1，enemy2或enemies[i]查找所有内容。他们在一个数组中）：
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
ctx.drawImage(enemies[i].image, enemies[i].x, enemies[i].y);
// here, saying enemies[i].image is grabbing the exact image you want
// from when you made enemy1/enemy2 up above
}
}
并且因为你推入阵列的每个敌人都可以拥有不同的x，y，图像，速度等值......它们看起来就像你想要的一样，取决于你给出的值他们开始。