javascript - Gameloop 没有持续运行以使我的敌人移动

Question

我正在制作一个带有敌人类的游戏，它可以容纳一堆敌人，我只需要调用enemy_spawn.enemy1(number_of_enemies). 我的敌人正在打印，但只有 1 个出现，而且它根本没有移动（目前它只是应该水平移动）。

export default class Enemies {
  constructor() {
    this.enemy1_list = [];
  }
  enemy1(number_of_enemies) {
    var i;
    var j;
    for (i = 0; i < number_of_enemies; i++) {
      var ex = getRndInteger(100, 200);
      var ey = getRndInteger(60, 110);
      this.enemy1_list[i] = [ex, ey];
    }
    for (j = 0; j < number_of_enemies; j++) {
      // var ex, var ey = enemy1_list[j];
      var pos = this.enemy1_list[j];

      img.onload = () => {
        ctx.drawImage(img, pos[0], pos[1]);
        pos[0]++;
      };
    }
  }
}

我的主要 JavaScript 代码

import Enemies from "/src/enemies.js";

let canvas = document.getElementById("gamescreen");
let ctx = canvas.getContext("2d");

const GAME_WIDTH = 1000;
const GAME_HEIGHT = 600;

ctx.fillStyle = "lightblue";
ctx.fillRect(800, 0, 200, 600);

//dollar image here
const img = new Image();
img.src = "/img/extras/dollar.png";
img.onload = () => {
  ctx.drawImage(img, 792, 0);
};

//lives image here
const img2 = new Image();
img2.src = "/img/extras/lives.png";
var widthimg2 = 40;
var heightimg2 = 40;
img2.onload = () => {
  ctx.drawImage(img2, 805, 70, widthimg2, heightimg2);
};

let enemy1_spawn = new Enemies();

function gameloop() {
  enemy1_spawn.enemy1(3);

  requestAnimationFrame(gameloop);
}

gameloop();

这张照片可能有助于想象我想要实现的目标

标签： javascriptarraysfor-loopcanvas

Answer 1

for (j = 0; j < number_of_enemies; i++)

应该是

for (j = 0; j < number_of_enemies; j++)

增加 j 而不是 i