Inserire una label con la proprietà Text: TRIS.
Inserire una label con la proprietà Text: Turno di: .
Dal menu Layout, inserire un componente TableArrangement, assegnando la proprietà Height: 220 pixel e la proprietà Width: 220 pixel. Modificare le proprietà Rows e Column a 3.
Nella griglia 3x3 trascinare 9 componenti Button, modificando le proprietà Text: "- -" e le proprietà Height e Width: 70 pixel. In alternativa, al posto del testo formato da due trattini, per indicare una casella vuota, si può usare un'immagine per la casella vuota, un'immagine per la casella scelta dal giocatore X e un'immagine per la casella scelta dal giocatore O. Ovviamente le immagini devono avere dimensione massima 70x70 per coprire esattamente il pulsante.
Trascinare un Button con proprietà Text: Reset, ed un pulsante con proprietà Text: Fine.
Passare al Blocks Editor.
Creare una variabile Turno ed assegnarle il valore iniziale 0.
Adesso si creerà il gestore dell'evento associato al pulsante 1. Le azioni da eseguire sono:
se è il turno del giocatore 0 modificare la proprietà Text del pulsante in O e assegnare alla variabile Turno il valore 1.
altrimenti modificare la proprietà Text del pulsante in X e assegnare alla variabile Turno il valore 1. In ogni caso disabilitare il pulsante.
Trascinare un blocco if … then …, clic sul puntino blu all'interno del blocco. Si apre un fumetto; trascinare il blocco else all'interno del blocco if, del fumetto stesso, e premere il puntino blu.
Duplicare il gestore dell'evento click e modificare il riferimento da Button1 a Button2, sia nel test del ciclo, sia nelle tre istruzioni set interne al ciclo. Ripetere l'operazione per i restanti pulsanti contenuti nella griglia.
Il gestore dell'evento Reset deve riabilitare tutti i pulsanti e modificare le loro proprietà Text: "- - ".
Facendo clic destro su un blocco e scegliendo la voce Duplicate resta da modificare il nome del pulsante, fino a completare l'elenco di tutti i pulsanti.
Gli allineamenti devono essere verificati nelle 3 righe, nelle 3 colonne e nelle 2 diagonali. Si può scrivere una sola procedura che verifica se nelle tre celle di una riga di una colonna o di una diagonale c'è lo stesso valore della proprietà Text (o della proprietà Immagine). Basta che un solo test sia vero per fermare il gioco (disabilitando tutti i pulsanti) e colorare i pulsanti dove si è trovato l'allineamento.
Ad esempio la procedura che controlla l'allineamento sulla prima riga confronta se la proprietà Text del Button1 è uguale alla proprietà Text del Button2 e anche la proprietà Text del Button3 è uguale alla proprietà Text del button1. La procedura restituisce un valore logico. Questa procedura viene richiamata dopo aver svolto le azioni richieste dall'evento clic su uno dei pulsanti della prima riga:
Il richiamo della procedura deve essere duplicato e inserito anche nei gestori degli eventi Button2 e Button3.
Button1 appartiene anche alla colonna 1 e alla diagonale principale, quindi bisogna scrivere anche la procedura per controllare l'allineamento nella colonna 1 e nella diagonale principale.
Il programma viene completato individuando i test per verificare tutti gli allineamenti.
Un'altra soluzione, per verificare la presenza degli allineamenti consisterebbe nello scrivere una sola procedura che li verifica tutti e se ne trova uno ferma il gioco e evidenzia le celle allineate.
Il pulsante Fine deve eseguire il blocco "Chiudi Applicazione".
Il pulsante Reset deve eliminare la colorazione delle celle evidenziate.
Mostrare il risultato nella seconda label, tenendo conto che quando tutti i pulsanti sono stati usati, si è giunti alla parità.
Sostituire le proprietà Text dei pulsanti con Immagini.
Scrivere nella seconda Label il turno del giocatore.