Costruire il tabellone di gioco
Creare l'UI che i giocatori vedranno e useranno davvero
⏱ Stima ~7 min
01 · Leggi
Il server è pronto. Ora hai bisogno di un'interfaccia — la pagina HTML che i giocatori vedono nel browser.
È HTML, CSS e JavaScript puri. Niente React, niente framework. Solo le fondamenta del web su cui si costruisce ogni framework.
È una scelta deliberata. I framework vanno benissimo per le app grandi, ma capire cosa succede senza di loro ti rende un ingegnere molto più forte. Quando React si rompe, chi conosce HTML e JavaScript di base risolve in pochi minuti. Chi conosce solo React fissa l'errore per ore.
Punti chiave
- Il frontend è HTML, CSS e JavaScript puri
- Un gioco di queste dimensioni non ha bisogno di framework
- Capire le basi ti rende più bravo con qualsiasi framework in futuro
- Socket.io fornisce automaticamente la propria libreria client
02 · Modello di prompt
Chiedi a Claude di costruire la pagina di gioco. Sii preciso sugli elementi di cui hai bisogno.
Aiutami a creare un public/index.html per il gioco di tic-tac-toe. Deve contenere: (1) Un titolo 'Tic Tac Toe'. (2) Un pulsante 'Find Game'. (3) Un'area di stato che mostra inizialmente 'Click Find Game to start'. (4) Un tabellone 3x3 in cui ogni cella è un elemento button cliccabile. (5) Un pulsante 'Play Again' nascosto per default, da mostrare a fine partita. Includi il client script di Socket.io '/socket.io/socket.io.js' (Socket.io lo fornisce automaticamente) e collega style.css e client.js.
03 · Modello di prompt
Ora chiedi a Claude di aggiungere lo stile al gioco. Dagli una direzione di design precisa.
Aiutami a creare un public/style.css per il gioco di tic-tac-toe. Rendi il tabellone una CSS grid 3x3, ogni cella di 100x100 pixel. Le celle devono avere bordi ben visibili e un effetto hover sulle celle vuote. Centra tutto nella pagina con uno sfondo scuro. X in blu, O in rosso. Rendi il pulsante Find Game ben visibile. Aggiungi una leggera animazione di scala quando compare un simbolo. L'aspetto generale deve essere pulito e moderno.
04 · Leggi
Il pattern CSS fondamentale che fa funzionare il tabellone è CSS Grid. Niente layout complicati con tabelle o hack con flexbox — CSS Grid costruisce un tabellone 3x3 in tre righe: ``css .board { display: grid; grid-template-columns: repeat(3, 100px); gap: 4px; } ``
Ecco tutto. Tre colonne, ognuna di 100 pixel, 4 pixel di gap tra le celle. Il browser si occupa di tutta la matematica del layout. Ogni cella è un elemento <button> nella griglia — si usa button invece di div perché il button è navigabile da tastiera e accessibile agli screen reader per default.
Punti chiave
- CSS Grid rende semplice il layout 3x3
- repeat(3, 100px) crea tre colonne uguali
- Ogni cella è un <button> per l'accessibilità da tastiera e screen reader
- Socket.io fornisce il proprio client script su /socket.io/socket.io.js
05 · Pratica reale
Avvia il server e visualizza il tabellone nel browser.
06 · Quiz
Perché usare l'elemento <button> per le celle del tabellone invece di <div>?
- I button hanno un aspetto migliore per default
- I div non possono avere event listener per il clic
- I button sono navigabili da tastiera e accessibili agli screen reader, così tutti i giocatori possono usarli
- Socket.io funziona solo con elementi button
Altre lezioni di questo capitolo
⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.
※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.