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

I

Answer 1

조나단 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+")"); 
}