puedes hacerlo asi:
debes asignarEsto se debe al alcanze de keyvar
ya que es global y no respeta el alcanse solo a una varible temporalsu bloque.
si cambias el loop de tkvar
ya que no espera a quelet
te funciona ejemplo: for (let key in img){
Diferencias:
Con let
:
- Key = 1 en load function 1
- Key = 2 en load function 2
- Key = 3 en load function 3
Ya que carge la imagen y sige ejecutando al llegar a la ultima ya cargo todas o 1let
existo solo dentro del loop y en ese punto key escomo function load esta dentro puede verla
Con var
:
- Key = 1 en load function 1
- Key = 2 en load function 2 pero 1 cambia a 2
- Key = 3 en load function 3 pero 2 cambia a 3
Ya que pollovar
al ser global no limita su alcance y existe no solo dentro del loop si no tambien fuera y hasta dentro de la funcion anonima sobrescribiendose global por cada iteracion.
var lienzo = document.getElementById('juego').getContext('2d');
var imgs = {
mapa:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'https://images-na.ssl-images-amazon.com/images/I/91Xe8LC3hSL._SX425_.jpg';
return obj;
}
},
vaca:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'https://storage.contextoganadero.com/s3fs-public/styles/noticias_one/public/ganaderia/field_image/2017-03/vaca_bonita.jpg?itok=K9tDmqsB';
return obj;
}
},
cerdo:{ load: false, obj: function(){
let obj = new Image();
obj.src ='https://www.animanaturalis.org/img/pages/full/201602/P15-12469.jpg';
return obj;
}
},
pollo:{ load: false, obj: function(){
let obj = new Image();
obj.src = 'https://myzone-26ex1sw6hijbg4oa.netdna-ssl.com/wp-content/uploads/2018/05/nutricion-pollo-300x300.jpg';
return obj;
}
}
};
var canvas = {
loadImg: function(img){
for (varlet key in img){
let tk = key; // asignamos key a un variable temporal
let obj = img[tk]img[key].obj();
obj.addEventListener('load', function(){
img[tk]img[key].load = true;
console.log(tkkey);
dibujar(img[tk]);
}, 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>