Playground · Tic Tac Toe

Ho programmato il mio primo avversario. Se vincevi troppo facilmente, si offendeva.

Il mio quinto progetto e il primo gioco completo: nove caselle, tre difficoltà e un computer costruito a forza di condizioni.

Periodo: Ottobre 2021
Tipo: Progetto personale · solo
Modalità: Locale + computer
Stack: HTML · CSS · JavaScript · GSAP

Partita di Tic Tac Toe ambientata in un paesaggio notturno — La logica del tris, un’interfaccia costruita a mano e un avversario con una propria idea di sportività.

01 · Il punto di partenza

Il quinto progetto. Il primo in cui volevo far convivere logica e design.

Volevo consolidare JavaScript replicando un gioco che conoscevo bene. Nel frattempo iniziavo ad appassionarmi al design, quindi non mi sono fermato alle regole: ho disegnato personalmente anche il mondo che le conteneva.

HTML: Nove caselle e pochi elementi.Una struttura semplice, abbastanza chiara da lasciare tutta la difficoltà al comportamento.
JavaScript: Turni, vittorie e computer.Lo stato della partita vive direttamente nei pulsanti e viene controllato dopo ogni mossa.
Illustrator: Ogni asset creato da zero.X, O, tabellone, pulsanti e paesaggio: il primo tentativo di costruire un’identità completa.

02 · Dai riferimenti a un mondo mio

Prima una moodboard. Poi Illustrator. Infine un tris che sembrava ambientato di notte.

Le reference mi hanno aiutato a capire quanto potesse essere caratterizzato un gioco così semplice. Ho preso l’idea di un’interfaccia morbida e giocosa, ma colori, forme e ambientazione sono diventati interamente miei.

Schermata per scegliere la difficoltà di Tic Tac Toe — 01 · InterfacciaTre livelli, una gerarchia chiara.

Tabellone vuoto sospeso davanti a un paesaggio notturno — 02 · Il risultatoVede petrolio, luce lunare e una scacchiera quasi sospesa nel paesaggio.

Simbolo X disegnato per Tic Tac Toe — X · Disegnata in Illustrator

Simbolo O disegnato per Tic Tac Toe — O · Disegnata in Illustrator

Paesaggio notturno del gioco — Paesaggio · Montagne, alberi e luna

03 · La logica

Nove caselle sembravano poche. Finché non ho dovuto controllare tutto ciò che poteva succedere.

Ogni click assegna il simbolo, blocca la casella e passa il turno. Un controllo continuo confronta righe, colonne e diagonali per capire se qualcuno ha vinto oppure se la griglia è piena.

01
Leggi la casella selezionata e verifica che sia ancora libera.
02
Inserisci X oppure O in base al numero del turno.
03
Confronta le otto possibili combinazioni vincenti.
04
Mostra il vincitore, la patta oppure passa la mossa successiva.

04 · Il primo avversario

Non era intelligenza artificiale. Era una lunga conversazione tra me e una serie di if.

Oltre alla partita locale, ho creato tre modalità contro il computer. Non pianificava il futuro: reagiva alla griglia con regole sempre più rigide.

Prima mossa nella modalità Easy — 01 · EasySceglie una casella libera.
Nessuna strategia: il computer pesca casualmente una posizione disponibile e piazza la propria O.

Partita nella modalità Normal — 02 · NormalTi guarda e prova a bloccarti.
Se trova due X sulla stessa linea, occupa la terza casella. Altrimenti torna a scegliere casualmente.

Partita avanzata nella modalità Hard — 03 · HardBlocca. E giudica.
Condivide la strategia della Normal, ma riconosce anche chi prova a chiudere troppo presto usando gli angoli.

Il computer non costruisce davvero la propria vittoria: cerca soprattutto di impedire la tua. È una logica ingenua, esplicita e perfettamente rappresentativa del modo in cui stavo imparando.

05 · La modalità Hard aveva un carattere

Se provavi la scorciatoia degli angoli, il computer smetteva di giocare e ti insultava.

Era insieme una battuta e un modo molto personale di impedire la strategia più facile. Non migliorava davvero l’avversario: rendeva illegittima la tua vittoria.

Tentativo di vittoria usando gli angoli nella modalità Hard

Messaggio di fine partita di Tic Tac Toe — La risposta realeIl gioco interrompe la partita prima di concedere una vittoria troppo facile.

06 · Onestà prima del minimax

Oggi userei uno stato vero e un algoritmo. Nel 2021 ho scritto ogni possibilità una dopo l’altra.

Il computer legge direttamente il contenuto delle caselle e attraversa una lunga catena di condizioni. Non cerca la mossa migliore: riconosce una minaccia, prova a chiuderla e altrimenti improvvisa.

If
Due X condividono una linea?
Sì
If
La terza casella è libera?
Sì
Then
Piazza una O per bloccare il giocatore.
Block
Else
Scegli casualmente tra le caselle rimaste.
Random

Il motore · versione 2021

Una foresta di condizioni. Ma funzionava.

if (X + X) → place O
else if (X + X) → place O
else if (X + X) → place O
else if (X + X) → place O
else → random move

07 · Dal playground al colloquio

Non è rimasto soltanto nella mia cartella. È diventato qualcosa che potevo davvero mostrare.

Insieme ad altri progetti personali, Tic Tac Toe è diventato uno degli esempi con cui mostravo come ragionavo, cosa sapevo costruire e quanto mi interessasse curare anche la parte visiva.

Home di Tic Tac Toe con le modalità di gioco

Prima: Un esercizio personale per consolidare JavaScript.
Poi: Il primo gioco completo, disegnato e programmato da solo.
Infine: Uno dei progetti portati con me ai primi colloqui da sviluppatore.

08 · Il risultato

Un gioco completo, una sezione Scores incompleta e molte basi diventate finalmente solide.

Il progetto mi ha costretto a gestire da solo logica, interfaccia, asset, animazioni e responsive. Non tutto è arrivato alla fine, ma la partita sì: dalla scelta della modalità fino al vincitore.

Gameplay: Locale + computerDue persone sullo stesso schermo oppure tre difficoltà contro il codice.
Identità: Tutto disegnato da meIllustrator, palette originale, simboli, tabellone e paesaggio notturno.
Stato: Giocabile, con una promessaLa partita funziona. Il pulsante Scores risponde ancora con “Available Soon”.

Oggi

Riscriverei praticamente tutto. Ma non cancellerei nemmeno una di quelle if.

Sono la fotografia del momento in cui ho imparato a trasformare regole in comportamento, a progettare un’esperienza completa e a portare avanti da solo qualcosa che potevo davvero mostrare.