javascript - Javascript 将图像相互叠加

Question

我正在使用 node.js + socket.io 来尝试制作一个乘数 HTML5 画布游戏。不幸的是，每次我去画所有的球员时，所有的图像最终都会重叠在一起。

socket.on('drawPlayers', function(players){
    context.clearRect ( 0 , 0 , gameWidth , gameHeight ); //clear canvas

    for(var i=0; i<players.length; i++){
      var cur = players[i];
      var playerSprite = new Image();
      playerSprite.onload = function() {
        return context.drawImage(playerSprite, cur.x, cur.y);
      };
      playerSprite.src = 'images/sprite.png';
      console.log("drawing player "+cur.un+" at ("+cur.x+","+cur.y+")");
    }
  });

console.log() 将正确记录不同的 x 和 y 值，但所有图像最终都相互重叠。

function player(id,username){
  this.id = id;
  this.un = username;
  this.y = Math.floor(Math.random() * 501);
  this.x = Math.floor(Math.random() * 801);
  this.src = 'images/mobile_md_logo.png';
}   

我

Answer 1

乔纳森·洛诺夫斯基是对的。对于每个 onload 触发器，cur指向同一个播放器，最后一个。事件处理程序中只cur存在一个。drawPlayers

使用它来将范围cur与循环中的范围分开：

function draw(sprite,cur){
  return function() {
    context.drawImage(sprite, cur.x, cur.y);
  };
}

然后从循环内部调用它

for(var i=0; i<players.length; i++){
  var cur = players[i];
  var playerSprite = new Image();
  playerSprite.onload = draw(playerSprite,cur);
  playerSprite.src = 'images/sprite.png';
  console.log("drawing player "+cur.un+" at ("+cur.x+","+cur.y+")");
}