Skip to main content
se añadieron 153 caracteres en el cuerpo; se añadieron 23 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

Ya que let existo solo dentro del loop y como function load esta dentro puede verla limitandose solo al bloque loop cambiado solo el valor dentro del su bloque pasando una referencia de su valor actual a obj, mas no sobre escribiendolo.

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. Key = 3 en load function 3 pero 1 cambia a 3 y 2 cambia a 3 tambien

Ya que let existo solo dentro del loop y como function load esta dentro puede verla

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. Key = 3 en load function 3 pero 2 cambia a 3

Ya que let existo solo dentro del loop y como function load esta dentro puede verla limitandose solo al bloque loop cambiado solo el valor dentro del su bloque pasando una referencia de su valor actual a obj, mas no sobre escribiendolo.

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. Key = 3 en load function 3 pero 1 cambia a 3 y 2 cambia a 3 tambien
se añadieron 484 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

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:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2
  3. 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:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. 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>

puedes hacerlo asi:
debes asignar key a una varible temporal tk ya que no espera a que que carge la imagen y sige ejecutando al llegar a la ultima ya cargo todas o 1 y en ese punto key es pollo.

 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 (var key in img){
                  let tk = key; // asignamos key a un variable temporal
                        let obj = img[tk].obj();
                      obj.addEventListener('load', function(){
                            img[tk].load = true;
                    console.log(tk);
                             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>

puedes hacerlo asi:
Esto se debe al alcanze de var ya que es global y no respeta el alcanse solo a su bloque.
si cambias el loop de var a let te funciona ejemplo: for (let key in img){
Diferencias:
Con let:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2
  3. Key = 3 en load function 3

Ya que let existo solo dentro del loop y como function load esta dentro puede verla

Con var:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. Key = 3 en load function 3 pero 2 cambia a 3

Ya que var 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 (let key in img){
                  
                        let obj = img[key].obj();
                      obj.addEventListener('load', function(){
                            img[key].load = true;
                    console.log(key);
                             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>
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

puedes hacerlo asi:
debes asignar key a una varible temporal tk ya que no espera a que que carge la imagen y sige ejecutando al llegar a la ultima ya cargo todas o 1 y en ese punto key es pollo.

 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 (var key in img){
                  let tk = key; // asignamos key a un variable temporal
                        let obj = img[tk].obj();
                      obj.addEventListener('load', function(){
                            img[tk].load = true;
                    console.log(tk);
                             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>