<|channel>thought
- Understand the Goal: jednoplikowa gra Snake w HTML5 Canvas w cyberpunkowej estetyce („NEON SNAKE”), sterowana klawiaturą i dotykiem.
- Inputs: strzałki i WASD, przyciski ekranowe na urządzeniach mobilnych, Start / Pause oraz Reset.
- Output: plansza z siatką, świecący wąż, pulsujące jedzenie, liczniki SCORE i HIGH SCORE z zerami wiodącymi (
000) i kontrolki mobilne.
- Identify Key Constraints & Technologies: HTML, CSS i JS w jednym pliku, bez zewnętrznych bibliotek, płynna pętla gry, rekord zapisywany w
localStorage.
- Design the HTML Structure: kontener z nagłówkiem, pasek statystyk, element
<canvas>, pasek akcji i przyciski kierunkowe.
- Design the CSS: ciemne tło
#07090e, neonowy cyjan i zieleń z poświatą box-shadow, układ we Flexboksie, przyciski kierunkowe ukryte na desktopie przez media query.
- Design the JavaScript: tablica segmentów węża, kolejka wejścia blokująca zawrócenie o 180° w jednej klatce, kolizje ze ścianą i ogonem,
shadowBlur na Canvasie.
- Refinement & Implementation: blokada przewijania strony strzałkami (
e.preventDefault()) i skalowanie planszy na małych ekranach.
- Final Review: style i skrypty domknięte, zmienne zainicjalizowane, brak wiszących referencji do DOM.
--- [END_OF_THINKING] <channel|>
<!DOCTYPE html> …