為什么我的控制台顯示“無法設置未定義的屬性'src'”？

Question

因此，我嘗試使用Canvas創建游戲，但其中一個動畫存在問題。 它說它不能將src屬性設置為“ undefined”。 我不明白為什么它沒有定義，所以我需要這方面的幫助。 這是我的整個代碼：

var c = document.getElementById("game");
var ctx = c.getContext("2d");

  //variables
  pX = 0;
  pY = 0;
  frame = 0;
  frames = []

  //load image sprites
  var player = new Image();
  var aster = new Image();
  var enemy = new Image();
  var max = new Image();
  var animatedPlayer = new Image();

  player.src = "player.png";
  aster.src = "aster.png";
  enemy.src = "enemy.png";
  max.src = "max.png";
  animatedPlayer.src = "animatedPlayer.png";

  // player animation array
  var playerAssets = [player, animatedPlayer];

  //asteroid array

  var asteroid = [];
  asteroid[0] = {
    x : 250,
    y : 40
  };

  //keys
  document.addEventListener("keydown",moveDown);

  function moveDown(){
    pY += 2;
  }

  //player update
  function updatePlayer() {
    for (var i = 0; i < playerAssets.length; i++) {
      frames[i].src = playerAssets[i];
    }

    ctx.drawImage(frames[frame],pX,pY,54.6,52.6);
    frame += 1 % frames.length;
  };

  //function
  function draw() {
    ctx.clearRect(0,0,c.width,c.height);
    setInterval(updatePlayer, 1000/30);

    for (var i = 0; i < asteroid.length; i++) {
      ctx.drawImage(aster, asteroid[i].x, asteroid[i].y, 29.6, 29.3);
      setInterval(asteroid[i].x--, 400);

      if(asteroid[0].x == 225) {
        asteroid.push({
          x : c.width,
          y : Math.floor(Math.random())
        });

      }

    }    

    requestAnimationFrame(draw);

  }

</script>

這是我需要幫助的部分：

  //player update
  function updatePlayer() {
    for (var i = 0; i < playerAssets.length; i++) {
      frames[i].src = playerAssets[i];
    }

好的，如果有人向我解釋為什么它是未定義的以及如何修復它，我將非常感激。 感謝您的幫助，非常感謝您抽出寶貴的時間來幫助我。

謝謝Amiya

Answer 1

原因是：您在frame [i]中沒有元素（對象/數組“ frames”的索引為“ i”）。 更改src之前，應檢查此元素是否存在。