Steruj wężem na kafelkowej planszy, zbieraj jedzenie i unikaj kolizji ze ścianami oraz własnym ciałem. To kompaktowa implementacja w TypeScript i canvas: React montuje canvas, a refy przechowują węża, kierunek i jedzenie dla aktualizacji klatka po klatce.
Napisane w TypeScripcie. Zobacz więcej projektów na Projektach
Kompaktowa implementacja Snake oparta na siatce i renderowana na HTML canvas. Kierunek i pozycje są poza stanem renderowania Reacta, a wspólny hook obsługuje canvas, pętlę gry, klawiaturę i dotyk.
Wspólny hook canvas inicjalizuje kontekst rysowania, uruchamia domyślną pętlę 20 FPS oraz podpina klawiaturę i dotyk.
Segmenty węża, kierunek i pozycja jedzenia żyją w refach, więc każda klatka może aktualizować stan bez renderowania Reacta.
Następny kafelek głowy jest sprawdzany względem granic planszy i wszystkich segmentów; kolizja restartuje rundę.
Losowanie jedzenia ponawia wybór pozycji, aby punkt nie pojawił się wewnątrz ciała węża.