bueno mi problema es que tengo un objeto que se analiza en un ciclo for y dentro de el se aplica a cada elemento un evento load para saber cuando se cargue el elemento, el problema radica en que el ciclo for analiza todos los elementos pero el código dentro del eventListener se aplica en cada iteracion al ultimo elemento del objeto. simplemente no comprendo, me gustaría una explicación. gracias!
var lienzo = document.getElementById('juego').getContext('2d');
var imgs = {
mapa:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'img/tile.png';
return obj;
}
},
vaca:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'img/vaca.png';
return obj;
}
},
cerdo:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'img/cerdo.png';
return obj;
}
},
pollo:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'img/pollo.png';
return obj;
}
}
};
var canvas = {
loadImg: function(img){
for (var key in img){
let obj = img[key].obj();
console.log(key); // mapa , vaca, cerdo , pollo
obj.addEventListener('load', function(){
img[key].load = true;
console.log(key); // pollo, pollo, pollo, pollo
dibujar();
}, false);
}
}
}
canvas.loadImg(imgs);
function dibujar(){
if(imgs.mapa.load){
let obj = imgs.mapa.obj();
lienzo.drawImage(obj, 0,0);
}
if(imgs.vaca.load){
let obj = imgs.vaca.obj();
lienzo.drawImage(obj, 80,30);
}
if(imgs.cerdo.load){
let obj = imgs.cerdo.obj();
lienzo.drawImage(obj, 200,50);
}
if(imgs.pollo.load){
let obj = imgs.pollo.obj();
lienzo.drawImage(obj, 250,300);
}
}
<canvas id="juego"></canvas>
key
.