Snake - odczytywanie pozycji / opóźnienie

pytanie zadane 27 lutego 2018 w JavaScript przez Yashe Dyskutant (7,720 p.)

Witam serdecznie

Mój snake posiada pewne koordynaty (zawsze są podzielne przez 10) np.

snakeX = 200
snakeY = 300

Funkcja głowy tego snake'a powtarzana jest co 100ms. Gdy trafia na jedzenie, chciałbym aby ogon utworzył się w miejscu 100ms wcześniej gdzie była głowa. I powtarzać tak cały czas... czyli trafiamy kolejny raz na jedzenie to kolejna część ciała maluje się na pozycji 100ms wcześniej niż poprzedni ogon.
Jak takie coś napisać.. czy to w ogóle możliwe ?

1 odpowiedź

odpowiedź 27 lutego 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Jeżeli zapisujesz jego pozycje w ostatnim elemencie plus przesunięcie to tak.

komentarz 27 lutego 2018 przez Yashe Dyskutant (7,720 p.)
edycja 27 lutego 2018 przez Yashe

Jest zmienna która ustala pozycje oraz dodaje do niej przesunięcie w zależności od kierunku.

Jak zatem mam malować kolejny element i odnosić się do niego w kolejnych fragmentach skryptu? Funkcja setTimeout() opóźniona o dwa razy bardziej niż głowa snak'a nie zadziała, gdyż ta opóźnia jest względem realnego czasu wykonania skryptu, a nie względem innej funkcji. A to byłaby najlepsza opcja... aby ogon przyjmował pozycję o 100ms wcześniejszą niż głowa węża

komentarz 27 lutego 2018 przez Alwox Gaduła (4,840 p.)

Funkcja setTimeout() opóźniona o dwa razy bardziej niż głowa snak'a nie zadziała, gdyż ta opóźnia jest względem realnego czasu wykonania skryptu, a nie względem innej funkcji.

setTimeout() opóźnia wykonanie funkcji od momentu jej wywołania - to "względem" czego zależy tylko od miejsca w jakim ją wywołasz

A to byłaby najlepsza opcja... aby ogon przyjmował pozycję o 100ms wcześniejszą niż głowa węża

milisekundy nie są jednostką odległości ;p żeby ustawić mu pozycję taką jak była prędzej musisz mieć ją również zapisaną żeby mieć się do czego odwołać. Opisz konkretniej z czym masz problem bo nie bardzo rozumiem. Samo poruszanie się nim jest ok, problem jest tylko z jedzeniem i rośnięciem? Czy na razie masz samą głowę i problem jest z resztą? Podziel sobie to na takie jak najmniejsze etapy i podaj z którym konkretnie masz problem.

komentarz 27 lutego 2018 przez Yashe Dyskutant (7,720 p.)

Ohh oczywiście !

To co działa:

Malowanie kwadratu 10px na 10px, który jest głową snake'a
Poruszanie się snake'a na osi za pomocą dodawania/odejmowania 10px w osiach X/Y.. oczywiście w zależności od klikniętej strzałki na klawiaturze
Losowe generowanie jedzenia za pomocą Math.random (do tego, zawsze wypada ono we współrzędnych podzielnych przez 10)

Np.:

x: 310, y: 240
x: 10, y:440
x: 11 y: 154 // nie uświadczymy

Sprawdzenie czy głowa dotknęła jedzenie, jeżeli tak dodajemy 1 punkt to scoreboardu (sprawdzenie polega na porównaniu współrzędnych jedzenia, wraz z głową <czy są te same> i jeżeli tak to... jedzenie pojawia się w nowym miejscu...
... i tutaj mam problem. Chodzi o dodawanie części ciała po zjedzeniu
Powtarzanie wszystkich funkcji w odstępie 100ms (malowanie planszy, snake'a, jedzenia) - aby stworzyć imitację poruszania się / animacji

Przed ostatni punkt powoduje u mnie problemy gdyż nie wiem jak:

Sprawić aby to co zjemy zawsze trafiało na ostatni człon ciała
Aby poruszało się to jak w prawdziwym snake'u, czyli głowa daje kierunek, a ciało podąża za głową

Jedyne na co wpadłem to właśnie.. logiczna koncepcja, że każda część ciała będzie znajdowała się tam gdzie wcześniej była głowa Niestety nic mi nie przychodzi do głowy z implementacją..

komentarz 28 lutego 2018 przez Alwox Gaduła (4,840 p.)

Możesz na przykład zrobić dwuwymiarową tabelę w której każda para będzie określała położenie jednego fragmentu węża. W trakcie poruszania zmieniasz położenie przesuwając te wartości np załóżmy, że głowa to tab[0], wtedy do niej podajesz wartość nowych koordynat, a później lecisz od końca tab[x] = tab[x-1]. Żeby zrobić rośnięcie dodajesz na końcu tabeli nową parę. Oczywiście sposobów na zrobienie tego będzie całkiem sporo ale ten powinien być najprostszy do zrozumienia.