Canvas - niektóre obiekty nie zatrzymują się w ostatnim punkcie

Question

Witam,

mógłby mi ktoś wytłumaczyć dlaczego przy wywołaniu animacji spadania obiektów, niektóre nie zatrzymują się w ostatnim punkcie i spadają poza canvas?

Tutaj kod:

https://codepen.io/alterwar/pen/PEaLpM

Answer 1

Ponieważ sprawdzasz, czy osiągnęły one położenie dokładnie zero. Tu jest problem. Bo teraz zależnie od tego gdzie się pojawią i jakie prędkości osiągną szansa, że wpadną idealnie na zero jest ograniczona.

W związku z tym proponuję, żebyś sprawdzał warunek przy pomocy <= (>=), a nie == i ustawiał prędkość na zero oraz ich pozycję na końcową. W ten sposób każdy klocek, który będzie śmiał wylecieć poza ekran zostanie cofnięty. Będzie to niezauważalne.

Comments

Dzięki za odpowiedź :)

if(blocksObject[i].posY >= blocksObject[i].endPositionY){
	blocksObject[i].stop = true;
};

zmieniłem w tym miejscu i śmga :)

---

Jeszcze jedno pytanie.

Kod wygląda tak:

https://codepen.io/alterwar/pen/PEaLpM

Jak mogę zastopować animację jeśli wszystkie obiekty spełniają warunek? Bo wydaję mi się ze canelAnimationFrame nie działa, bo dodając console loga cały czas zwraca mi wartośći. Jeśli dodam return true to zatrzyma animację ale od razu przy styknięciu się pierwszych obiektów z zerem więc reszta zawiśnie w powietrzu.

---

cancelAnimationFrame służy do zupełnie czego innego.

Twoja animacja działa w ten sposób, że wywołujesz klatkę (czyli przesuwasz wszystkie elementy), a następnie wewnątrz tej klatki wywołujesz kolejną klatkę i tak w kółko. I tak jest dobrze, tak się robi.

To, co Ciebie interesuje to postawienie warunku wokół tego kolejnego wywołania klatki, czyli u Ciebie:

`requestAnimationFrame(drawAnimateFall);`

To obtocz warunkiem zatrzymania, a wtedy nie zostanie wywołana nowa klatka i tym samym całość się zakończy.

---

Zrobiłem tablice w której pushuje wszystkie obiekty o fladze stop. Porównuje długość tablicy z ilością stworzonych obiektów. Jeśli nie równe to wywołuje animacje

https://codepen.io/alterwar/pen/PEaLpM

edit:

chociaż jednak jakaś klatka ucieka bo obiekty zatrzymują się parę pikseli przed końcem. Wydaje mi się, że poprawnie jest to zrobione