Snake JS menu, czyszczenie canvas-a

Question

Witam zaprogramowałem węża ale stanąłem na problemie, otóż kiedy wykrywa mi kolizje i powinno znów pokazać się menu, to ono jest przykryte przez mapę obecnego węża (czyli gry), próbowałem użyć cleanRect() zmiejszyć canvasa i zwiększyć z powrotem i zapisać stan i wrócić do niego ale nie udało mi się tego menu po kolizji zobaczyć.

interaktywny kod:
https://codepen.io/bartek-kozanka/pen/eYOjMeB?editors=0010

Answer 1

W funkcji game tam gdzie wykrywasz kolizje dodaj po prostu return, przez co dalsza część kodu się nie wykona. Dodatkowo stwórz (jak nie masz, bo nie patrzyłem) funkcję resetującą węża do statu początkowego.

Comments

Dobra teraz jest jak powinno być.
funkcje resetującą usunąłem, bo nie była potrzebna, przez to że po końcu gry wyświetlać ma się menu (w zamyśle jakieś 'endGame()') które niedługo zrobię i np:

1. dodam grafikę kraksy 
2. zamiast w HTMLu wyświetlę wynik w canvasie
3. obsłużę koniec gry
4. jakaś tabelka z wynikami by się przydała
5. więcej pomysłów nie mam ale coś się wymyśli :)

---

trochę pomysłów:

możesz np zwiększyć prędkość po zdobyciu iluś tam punktów

dodać kolizje z końcami planszy 'teleport' jakoś średnio kojarzy się z wężem

dodać drugiego węża 'multiplayer' ;) sterowany innym zestawem przycisków

zamiast jedzenia w postaci prostokatów jakiś img

ale generalnie bardzo fajnie zrealizowany projekt.

---

Prędkość jest zwiększana co zjedzony owocek, Grafikę kiedyś dodam gdy się nauczę ją robić, kolizja mi się nie podobała ( za proste to było) dlatego podszedłem do tego oryginalniej :D, o multi myślałem ale takim prawdziwym php servery ale to nie teraz, zdjęcia jedzonka są chyba mało optymalne lepiej chyba użyć svg aby się dobrze skalowało, takie prawdziwe menu bym chciał zrobić z przyciskami, opcjami mapy i suwakami zmiennych ale nie wiem jeszcze jak do tego podejść :/