BE LEAD / Lab
Corri, Lead!
Un gioco in pixel.
Lead è il cane di BE LEAD: pelo dorato, orecchie a punta, coda arricciata. Qui corre per Milano, salta i bug, scivola sotto le deadline e raccoglie idee. Quanto lontano riesci a portarlo?
Gioca a Corri, Lead!
Controlli: spazio, freccia su o W per saltare, tieni premuto per saltare più in alto. Freccia giù o S per scivolare. P o Esc per la pausa. Su schermo touch, tocca la metà superiore per saltare e la metà inferiore per scivolare.
Comandi
- Spazio↑WSalta. Tieni premuto per salire di più.
- ↓SScivola. In aria, scende più in fretta.
- PEscPausa.
Sul marciapiede
- Bug. Saltali.
- Deadline. Scivolaci sotto. Quelle alte si evitano restando a terra.
- Pozzanghere. Saltale, anche in scivolata bagnano.
- Idee. Valgono 25 punti. Cinque idee caricano il turbo.
Come è fatto
Un piccolo gioco, costruito parlando con Claude.
Il gioco è nato da una conversazione. Abbiamo descritto a Claude il protagonista, le regole e la sensazione che volevamo nei controlli, poi abbiamo provato, corretto e chiesto modifiche un passo alla volta. Non ci sono librerie di gioco né immagini esterne: solo React, un elemento canvas e le API che ogni browser moderno offre già.
Game loop a timestep fisso. La simulazione avanza sempre a 60 passi al secondo. Un accumulatore raccoglie il tempo reale tra un fotogramma e l'altro e lo consuma a fette uguali, così il salto è identico su uno schermo a 60 Hz e su uno a 120 Hz. Il disegno interpola tra due passi per restare fluido. Se la scheda passa in secondo piano o il gioco esce dallo schermo, il loop si ferma e la partita va in pausa.
Sprite disegnati in codice. Lead, i bug, le deadline con le ali e le stelline sono descritti come ellissi, segmenti e poligoni. Un piccolo rasterizzatore li trasforma in pixel, aggiunge il contorno e una luce dall'alto, e prepara i fotogrammi una sola volta all'avvio: sei per la corsa, due per il salto e la scivolata, tre per la coda che scodinzola. Tutto viene disegnato su un canvas alto 180 pixel e ingrandito con image-rendering: pixelated.
Collisioni AABB. Ogni oggetto ha un rettangolo di collisione, un po' più piccolo del disegno per essere indulgenti. Il salto usa il coyote time e un buffer: se premi un attimo prima di atterrare, o un attimo dopo aver lasciato il suolo, il gioco ti ascolta lo stesso. Tenere premuto alleggerisce la gravità e porta Lead più in alto.
Parallasse e ciclo del giorno. Cielo, skyline di Milano con Duomo, Velasca, Pirellone e CityLife, alberi e lampioni, marciapiede: ogni livello scorre a una velocità diversa. Col punteggio arrivano tramonto e notte, i lampioni si accendono e le finestre si illuminano.
Audio 8-bit con oscillatori. Salto, raccolta e fine partita sono note brevi generate al momento dalla Web Audio API con onde quadre e triangolari. L'audio è spento finché non lo attivi tu.