**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>