Javascript绘制彼此顶部的图像

我正在使用node.js + socket.io尝试制作一个乘法器HTML5画布游戏。不幸的是，每次我画出所有的球员时，所有的图像都会彼此重叠。Javascript绘制彼此顶部的图像

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

我

来源

2013-06-03 M1Reeder

尝试把一些调试里面'playerSprite.onload =：

用此方法一个是在循环cur范围分开函数（）{'？ – Isaac

相关：http://stackoverflow.com/q/1451009。尽管放置了声明，但是'cur'和'playerSprite'只声明一次，并且被循环的所有迭代共享。 [您需要关闭]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake），因此每个迭代都有自己的'cur'和'playerSprite' 。 –

乔纳森Lonowski是正确的。对于每个onload触发器，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+")"); 
}

来源

2013-06-03 03:28:04 user568109

Javascript绘制彼此顶部的图像

回答

相关问题