Snake su canvas
Il classico, in Canvas 2D e TypeScript senza librerie. Un custom element, un game loop a timestep fisso e la logica di gioco separata dal disegno.
Punti 0
Record 0
Frecce o WASD per muoverti, Spazio o P per la pausa. Su touch: scorri sul campo o usa i pulsanti.
Come funziona
- La logica (logic.ts) è pura: stato e funzioni, nessun DOM. Si può testare da sola.
- Il game loop usa requestAnimationFrame con un accumulatore a timestep fisso: la velocità non dipende dal refresh dello schermo.
- Le svolte vanno in una piccola coda, così due tasti rapidi nello stesso tick non si perdono.
- I colori arrivano dai token CSS del sito e cambiano con il tema chiaro/scuro.
- Il gioco si mette in pausa se il campo perde il focus o se la scheda è nascosta.
Codice sorgente: src/pages/lab/snake