Básicamente, estoy creando un sitio web que lanza dados para dos jugadores donde cada dado se muestra como imágenes.
ingrese la descripción de la imagen aquí
Funciona muy bien y muestra los dados finales como debería.
Pero luego quería que los dados mostraran algunos otros dados (como 3-5 otras caras) antes de mostrar las imágenes finales para hacer alguna animación.
//put some delay function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } //function that load the new image tag function imgOnload(obj) { var oldImage = document.querySelector("#xDice1"); oldImage.parentNode.replaceChild(obj, oldImage); } function imgOnload2(obj) { var oldImage2 = document.querySelector("#xDice2"); oldImage2.parentNode.replaceChild(obj, oldImage2); } //main function called by the button "roll" function roll() { var dice1 = "images/dice" + (Math.floor(Math.random() * 6) + 1) + ".png"; var dice2 = "images/dice" + (Math.floor(Math.random() * 6) + 1) + ".png"; //final dices var n = 5; //calling the five fake dices for (var i = 0; i < n; i++) { var imgObj1 = new Image(); var imgObj2 = new Image(); //beeing sure that they are all loaded imgObj1.onload = function() { imgOnload(imgObj1); }; imgObj1.src = "images/dice" + (Math.floor(Math.random() * 6) + 1) + ".png"; imgObj1.id = "xDice1"; imgObj2.onload = function() { imgOnload2(imgObj2); }; imgObj2.src = "images/dice" + (Math.floor(Math.random() * 6) + 1) + ".png"; imgObj2.id = "xDice2"; //putting some delay sleep(2000); } //showing the final dices document.querySelector("#xDice1").setAttribute("src", dice1); document.querySelector("#xDice2").setAttribute("src", dice2); }En el papel, debería funcionar... pero por alguna razón las imágenes solo terminan de cargarse al final del guión, por lo que solo se muestran los últimos dados en la pantalla. Incluso cuando pongo un poco de retraso para dejar que las imágenes se carguen entre cada iteración, solo espera más tiempo desde los dados vacíos del inicio hasta los dados finales.
ingrese la descripción de la imagen aquí
¿Alguien puede ayudarme con esto? Es la primera vez que hago una pregunta, así que si falta algo de información, ¡la actualizaré lo antes posible!
Gracias
