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];
    }

好的，所以如果有人向我解释为什么它是未定义的以及如何解决它，我将不胜感激。感谢您的帮助，非常感谢您抽出宝贵的时间来帮助我。

谢谢，阿米亚

Answer 1

原因是：您在frame [i]中没有元素（对象/数组“ frames”的索引为“ i”）。您应该在更改src之前检查此元素是否存在。

为什么我的控制台显示“无法设置未定义的属性'src'”？

1 个答案: