Witam, uczę się JS od 3 tyg. To mój pierwszy post. Zacząłem sobie taki projekcik, gra karciana (typu MagicTheGathering) w przeglądarce. Teraz piszę ruchy komputera i utknąłem tzn nie wiem czego użyć (również ogólnie, żeby ruchy komputera odbywały się jedna po drugiej, tak, żeby było widać, że coś faktycznie robi, a nie wszystko dzieje się na raz), żeby to przeskoczyć.
Problem polega na tym, że pętla robi kolejny obrót za czym setTimeout się skończy i usunie kartę. Co skutkuje tym, że poprzednia pętla znów działa na tej karcie (bo nie zdążyło jej usunąć), zamiast na następnej. (bez setTimeout działa dobrze, ale usuwa ją natychmiast i transform nie działa tzn nie zdąży zadziałać)
// e - to div z kartą
// cała funkcja również znajduje się w pętli
function pierwszyTargetKarta(jakiDmg) {
const wystawioneKarty = wystKartyWalka.children;
if (wystKartyWalka.children.length < 1) return false;
Array.from(wystawioneKarty).forEach(e => {
const hpTeraz = e.dataset.nowhp;
if (jakiDmg >= hpTeraz && komp.juzZaatakowales === 0) {
komp.juzZaatakowales = 1;
init.iloscWystawionychKart--;
e.style.transition = "transform 600ms";
e.style.transform = "translate(0px, 300px)";
setTimeout(() => {
e.remove();
}, 700);
}
});
}
Próbowałem to zamknąć w funkcji asynchronicznej, ale właściwie robi to samo.
function pierwszyTargetKarta(jakiDmg) {
const wystawioneKarty = wystKartyWalka.children;
if (wystKartyWalka.children.length < 1) return false;
Array.from(wystawioneKarty).forEach(e => {
const hpTeraz = e.dataset.nowhp;
(async () => {
if (jakiDmg >= hpTeraz && komp.juzZaatakowales === 0) {
komp.juzZaatakowales = 1;
init.iloscWystawionychKart--;
e.style.transition = "transform 600ms";
e.style.transform = "translate(0px, 300px)";
const usun = await usuwanieKarty(e);
}
})();
});
}
function usuwanieKarty(e) {
return new Promise(resolve => {
setTimeout(() => {
e.remove();
console.log("usunalem")
resolve('usunalem');
}, 700);
});
}
Może mnie ktoś naprowadzić czego użyć, ewentualnie jak to ugryźć. I co mogę używać do synchronizacji ruchów komputera (w sumie opóźnienia funkcji), czy async to dobry pomysł.
Mam nadzieje, że opisałem to w miarę zrozumiale.
Dzięki.
@edit
Wdrążyłem w życie wasze propozycje i z async function sleep działa przy pierwszym okrążeniu, jak jest więcej elementów to po prostu znikają.
Żeby to bardziej z wizualizować problem skróciłem do minimum kod i wrzuciłem na jsfiddle:
https://jsfiddle.net/pLyhdn8r/