estoy realizando un proyecto en el que tengo un tablero y sobre este una ficha que se va moviendo según un numero aleatorio que se genera al pulsar sobre un dado. El código me funciona bien, el problema es que cada vez que muevo la ficha y, por ejemplo, digamos que se mueve desde la casilla numero UNO a la numero CUATRO, la casilla aparece automáticamente en la numero CUATRO, sin ver visualmente como pasa por la DOS y la TRES, no se como aplicar un setTimeout o un setInterval a mi código, estoy un poco verde en eso aun, ¿alguna ayuda? Muchas gracias.
function MoverPulsado(name) {
const fichas = document.getElementsByClassName("ficha");
for (var i = 0; i < fichas.length; i++) {
let casillaConF = fichas[i].parentNode;
if (fichas[i].id === name) {
if (casillaConF.nextElementSibling) {
casillaConF.nextElementSibling.appendChild(fichas[i]);
cantParaMover -= 1;
casillaConF = fichas[i].parentNode;
if (casillaConF.className == "casilla fin") {
alert("Has ganado");
}
if (cantParaMover > 0) {
MoverPulsado(name);
} else {
verificarCasilla(casillaConF, name);
}
break;
}
if (!casillaConF.nextElementSibling) {
casillaConF = casillaConF.parentNode;
if (casillaConF.nextElementSibling) {
//casillaConF es filaX
casillaConF = casillaConF.nextElementSibling;
if (casillaConF.children.length > 0) {
casillaConF = casillaConF.firstChild;
setTimeout(3000);
casillaConF.nextElementSibling.appendChild(fichas[i]);
cantParaMover -= 1;
if (cantParaMover > 0) {
MoverPulsado(name);
} else {
verificarCasilla(casillaConF);
}
break;
}
}
}
}
}
pulsado = 0;
}