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

Question

So I'm trying to create a game with Canvas and I have a problem with one of the animations. It says it can't set the src property of "undefined". I don't see why it is undefined, so I need help with this bit. Here's my whole code:

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>

Here's the part that I need help with:

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

Okay, so I would really appreciate if someone explains to me why it's saying it's undefined and how to fix it. Thanks for your help and I really appreciate you taking your time to help me.

Thanks, Amiya

Answer 1

Reason is: you don't have element in frames[i] (object/array "frames" with index "i"). You should check existence of this element before changing the src.