循环使用Javascript将图像数组用作敌人

我有一个html文件，它在其中设置了从xml文件解析的图像数组。

var states = xmlDoc.getElementsByTagName("random_state");
for(var i=0; i<states.length;i++)
{
    var xx = states[i].getElementsByTagName("random_image");
    for(var j=0; j<xx.length;j++)
    {
        randomurl = xx[j].childNodes[j].nodeValue
        }
    }

在我的game.js文件中，我有这个

I.sprite  = Sprite(randomurl);

它设定了敌人的形象。randomurl是html文件中的全局变量

我的问题是，它没有在屏幕上显示图像阵列，而是只显示阵列中的最后一个图像。我尝试了多种方法来做到这一点，每次都失败了。我正在尝试使用整个阵列的图像显示为敌人。

xml代码只返回4个图像，这是存储在数据库中的图像数组。代码太全面，无法添加。但我已经测试过我的图像是否正确返回，因为我可以让它们出现在div中。我的问题是，它们将以敌人的形式出现，因此只有阵列中的最后一个图像显示为精灵，尽管我需要所有返回的图像来填充这个精灵？

XML代码

$obj2 = StatesCollection::GetRandomStateImages($_GET['state_abbreviation']);
foreach($obj2 as $row2)             
{
    $random_url="./images/" . $row2['state_image']; 
    $response .= '<random_state><random_image>' . htmlentities($random_url, ENT_QUOTES) . '</random_image></random_state>';
}

它从数据库中的方法返回图像。

以及game.js的功能，它可以保存敌人的

 function Enemy(I) {
          I = I || {};
          I.active = true;
          I.age = Math.floor(Math.random() * 128);
          I.color = "#A2B";
          I.x = width / 4 + Math.random() * width / 2;
          I.y = 0;
          I.xVelocity = 0
          I.yVelocity = 2;
          I.width = 32;
          I.height = 32;
          I.inBounds = function() {
            return I.x >= 0 && I.x <= width &&
              I.y >= 0 && I.y <= height;
          };
            I.sprite  = Sprite(randomurl);
          I.draw = function() {
            this.sprite.draw(canvas, this.x, this.y);
          };
          I.update = function() {
            I.x += I.xVelocity;
            I.y += I.yVelocity;
            I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
            I.age++;
            I.active = I.active && I.inBounds();
          };
          I.explode = function() {
            Sound.play("explosion");
            this.active = false;
            // Extra Credit: Add an explosion graphic
          };
          return I;
        };

控制精灵的精灵类

(function() {
  function LoaderProxy() {
    return {
      draw: $.noop,
      fill: $.noop,
      frame: $.noop,
      update: $.noop,
      width: null,
      height: null
    };
  }
  function Sprite(image, sourceX, sourceY, width, height) {
    sourceX = sourceX || 0;
    sourceY = sourceY || 0;
    width = width || image.width;
    height = height || image.height;
    return {
      draw: function(canvas, x, y) {
        canvas.drawImage(
          image,
          sourceX,
          sourceY,
          width,
          height,
          x,
          y,
          width,
          height
        );
      },
      fill: function(canvas, x, y, width, height, repeat) {
        repeat = repeat || "repeat";
        var pattern = canvas.createPattern(image, repeat);
        canvas.fillColor(pattern);
        canvas.fillRect(x, y, width, height);
      },
      width: width,
      height: height
    };
  };
  Sprite.load = function(url, loadedCallback) {
    var img = new Image();
    var proxy = LoaderProxy();
    img.onload = function() {
      var tile = Sprite(this);
      $.extend(proxy, tile);
      if(loadedCallback) {
        loadedCallback(proxy);
      }
    };
    img.src = url;
    return proxy;
  };
  window.Sprite = function(name, callback) {
    return Sprite.load(name, callback);
  };
  window.Sprite.EMPTY = LoaderProxy();
  window.Sprite.load = Sprite.load;
}());