0

**En ocasiones no se por qué, en consola marca 2 veces un console.log cuando solo debería ocurrir una vez en la funcion cargarVaca, es decir primero se ejecuta la función cargar del evento load que me dibuja un png que uso de fondo, este a su vez ejecuta la función dibujar y dibuja con el drawImage, después es cuando sigue cargarVaca que también ejecuta el dibujar y dentro del if se verifica que entre a su bloque de código, que es donde tengo el console.log, lo cual indica solo debería pasar una vez, algunas veces si lo hace, otras no, un saludo! **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Villa Platzi</title>
</head>
<style type="text/css">
    
</style>
<body>
    <canvas width="500" height="500" id="lienzo"></canvas>
    <script type="text/javascript">

        function aleatorio(min,max){
            let resultado= Math.floor(Math.random()*(max-min+1))+min;
            return resultado;
        }

        let vp= document.getElementById("lienzo");
        let papel= vp.getContext("2d");
        let mapaRuta= "img/tile.png";

        let vaca={
            url:"img/vaca.png",
            cargaOk: false
        }
        let fondo={
            url:"img/tile.png",
            cargaOk: false//variable flag, la usaremos como señal
        }


        fondo.objeto= new Image();
        fondo.objeto.src= fondo.url;
        fondo.objeto.addEventListener("load",cargar);

        vaca.objeto= new Image();
        vaca.objeto.src= vaca.url;
        vaca.objeto.addEventListener("load",cargarVaca);

        function cargar(){
            fondo.cargaOk=true;
            dibujar();

        }
        function cargarVaca(){
            vaca.cargaOk=true;
            dibujar();
        }

        let n= aleatorio(5,25)

        function dibujar(){
            if(fondo.cargaOk){//cargar cambia la señal de fondo.cargaOk a true, y se dibujara el fondo, para cuando cargarVaca tambien use a dibujar, fondo.cargaOk seguira siendo true, por lo que al dibujarse las vacas, primero se volver a dibujar el fondo de nuevo.
                papel.drawImage(fondo.objeto,0,0);
            }
            if(vaca.cargaOk){
                
                console.log(n);//en ocasiones no se por que, en consola marca 2 veces este log cuando solo deberia ocurrir una vez en el "cargarVaca"
                for(v=0;v<n;v++){
                let x =aleatorio(0,6)*80;//la vaca mide 80x80 pixeles, del rango 0-420 es donde podemos dibujar en el canvas de 500x500
                let y = aleatorio(0,6)*80;//se multiplican *80 para que tengan una "caja" alrededor y asi esten en una especie de grilla y esten separadas unas de otras

                papel.drawImage(vaca.objeto,x,y);
                }
            }
            

        }
        
        
        
    </script>
</body>
</html>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

0

La primera vez que se ejecuta cargarVaca() se cambia el valor de vaca.cargaOk a true y queda así para siempre por lo que al ejecutar cargar(), además de entrar en el primer if(fondo.cargaOk) también entra nuevamente en if(vaca.cargaOk).

Sobre el problema de qué algunas veces pasa y otras no, puede ser por qué se están añadiendo 2 addEventListener al mismo evento load, este evento puede variar con cada carga de la página.

Fuente: https://developer.mozilla.org/es/docs/Web/Events/load

1
  • "Sobre el problema de qué algunas veces pasa y otras no, puede ser por qué se están añadiendo 2 addEventListener al mismo evento load, este evento puede variar con cada carga de la página." Si puede ser eso, parece algo muy a nivel inferior del lenguaje, gracias! Commented el 18 jun. 2020 a las 23:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.