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

Question

我有一个 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;
}());

Answer 1

好的，所以我想我终于明白你想要一组 URL，并且每次创建敌人时都要遍历它们并使用不同的 URL。为了做到这一点，我建议保留一个全局的 url 数组而不是一个。我会称之为enemyUrls。你可以这样填充它：

var states = xmlDoc.getElementsByTagName("random_state"), 
    imgUrlNode, i;
enemyUrls = [];

for(i = 0; i < states.length;i++) {
    imgUrlNode = states[i].getElementsByTagName("random_image")[0];

    if (imgUrlNode) {
        enemyUrls.push(imgUrlNode.nodeValue);
    }
}

再添加一个名为currentImg的全局变量并将其初始化为0：

var currentImg = 0;

然后当你创建你的敌人时，这样做：

I.sprite  = Sprite(enemyUrls[currentImg]);
currentImg = (currentImg + 1) % enemyUrls.length;