Esercitazione: Creare un'app di gioco corrispondente a Windows Form

In questa serie di quattro esercitazioni si crea un gioco corrispondente. Il giocatore abbina coppie di icone nascoste.

Usare queste esercitazioni per informazioni sulle attività seguenti nell'ambiente di sviluppo integrato (IDE) di Visual Studio:

• Archiviare oggetti, ad esempio icone, in un List<T> oggetto .
• Usare un foreach ciclo in C# o un For Each ciclo in Visual Basic per scorrere gli elementi in un elenco.
• Tenere traccia dello stato di un form usando variabili di riferimento.
• Creare un gestore eventi per rispondere agli eventi che è possibile usare con più oggetti.
• Creare un timer che effettua un conto alla rovescia e poi attiva un evento esattamente una volta dopo l'avvio.

Al termine, hai un gioco completo.

In questa prima esercitazione si apprenderà come:

Prerequisiti

Per completare questa esercitazione è necessario Visual Studio. Per una versione gratuita, vedere Download di Visual Studio.

Creare un progetto di gioco di corrispondenza di Windows Form

Il primo passaggio della creazione del gioco consiste nel creare un progetto di app Windows Form.

Visual Studio crea una soluzione per l'app. Una soluzione è un contenitore per i progetti e i file necessari per l'app.

A questo punto, Visual Studio visualizza un modulo vuoto nel Designer di Windows Form.

Creare un layout per il gioco

In questa sezione viene creata la griglia quattro per quattro per il gioco.

1. Selezionare il modulo per selezionare Progettazione Windows Form. La scheda legge Form1.cs [Progettazione] per C# o Form1.vb [Progettazione] per Visual Basic. Nella finestra Proprietà impostare le proprietà del modulo seguenti.

   • Modificare la proprietà Text da Form1 a Gioco di abbinamento. Questo testo viene visualizzato nella parte superiore della finestra del gioco.
   • Impostare le dimensioni del modulo. È possibile modificarla impostando la proprietà Size su 550, 550 o trascinando l'angolo del modulo fino a visualizzare le dimensioni corrette nella parte inferiore dell'IDE di Visual Studio.

2. Selezionare la scheda Casella degli strumenti sul lato sinistro dell'IDE. Se non viene visualizzata, selezionare Visualizza>casella degli strumenti dalla barra dei menu o premere CTRL+ALT+X.

3. Trascinare un TableLayoutPanel controllo dalla categoria Contenitori nella casella degli strumenti oppure fare doppio clic su di esso.

   Impostare le proprietà seguenti per il pannello nella finestra Proprietà .

   • Impostare la proprietà BackColor su CornflowerBlue. Per impostare questa proprietà, selezionare la freccia giù accanto alla proprietà BackColor . Nella finestra di dialogo risultante selezionare Web. Nell'elenco dei nomi selezionare CornflowerBlue.

     Annotazioni

     I colori non sono in ordine alfabetico. CornflowerBlue si trova nella parte inferiore dell'elenco.

   • Impostare la proprietà Dock su Riempimento selezionando la freccia giù e quindi selezionando il pulsante centrale grande. Questa opzione distribuisce la tabella in modo che copra l'intero modulo.

   • Impostare la proprietà CellBorderStyle su Inset. Questo valore fornisce bordi visivi tra ogni cella della scheda.

   • Selezionare il pulsante triangolo nell'angolo superiore destro di TableLayoutPanel per visualizzare il relativo menu attività. Nel menu attività selezionare Aggiungi riga due volte per aggiungere altre due righe. Selezionare quindi Aggiungi colonna due volte per aggiungere altre due colonne.

   • Nel menu attività selezionare Modifica righe e colonne per aprire la finestra Stili colonna e riga . Per ogni colonna, selezionare l'opzione Percentuale e quindi impostare la larghezza di ogni colonna su 25 %.

   • Selezionare Righe dall'elenco nella parte superiore della finestra e quindi impostare l'altezza di ogni riga su 25 %.

   • Al termine, selezionare OK per salvare le modifiche.

Il tuo TableLayoutPanel è ora una griglia quattro per quattro con 16 celle quadrate di dimensioni uguali. Queste righe e colonne sono in cui le icone vengono visualizzate in un secondo momento.

Aggiungere e formattare etichette

In questa sezione vengono create e formattate le etichette visualizzate durante il gioco.

1. Assicurarsi che TableLayoutPanel sia selezionato nell'editor di moduli. Nella parte superiore della finestra Proprietà dovrebbe essere visualizzata la tabellaLayoutPanel1. Se non è selezionata, selezionare TableLayoutPanel nel modulo oppure selezionarla dall'elenco nella parte superiore della finestra Proprietà .

2. Aprire la casella degli strumenti, come in precedenza, e aprire la categoria Controlli comuni . Aggiungere un Label controllo alla cella superiore sinistra di TableLayoutPanel. Il controllo etichetta è ora selezionato nell'IDE. Impostare le proprietà seguenti.

   • Impostare la proprietà BackColor dell'etichetta su CornflowerBlue.
   • Impostare la proprietà AutoSize su False.
   • Impostare la proprietà Dock su Fill.
   • Impostare la proprietà TextAlign su MiddleCenter selezionando il pulsante freccia giù accanto alla proprietà e quindi selezionando il pulsante centrale. Questo valore garantisce che l'icona venga visualizzata al centro della cella.
   • Selezionare la proprietà Font . Viene visualizzato un pulsante con i puntini di sospensione (...). Selezionare i puntini di sospensione e impostare il valore Carattere su Webdings, Stile carattere su Grassetto e Dimensione su 48.
   • Impostare la proprietà Text dell'etichetta sulla lettera c.

   La cella superiore sinistra di TableLayoutPanel ora contiene una scatola nera centrata su uno sfondo blu.

   Annotazioni

   Webdings è un tipo di carattere icona fornito con il sistema operativo Windows. Nel gioco di abbinamento, il giocatore abbina coppie di icone. Questo font visualizza le icone corrispondenti. Se le icone Webdings non vengono visualizzate correttamente nel modulo, impostare la proprietà UseCompatibleTextRendering delle etichette nel form su True.

   Invece di c, provare lettere diverse nella proprietà Text . Un punto esclamativo è un ragno, una N maiuscola è un occhio, e una virgola è un peperoncino.

3. Seleziona il controllo Etichetta e copialo nella cella successiva del pannello di layout della tabella. Selezionare i tasti CTRL+C o sulla barra dei menu Modifica>copia. Incollarlo quindi usando CTRL+V o Modifica>incolla.

   Nella seconda cella di TableLayoutPanel viene visualizzata una copia della prima etichetta.

   Incollarlo di nuovo e nella terza cella viene visualizzata un'altra etichetta. Continuare a incollare i controlli Etichetta finché non vengono riempite tutte le celle.

Questo passaggio completa il layout del modulo.

Passo successivo

Passare all'esercitazione successiva per informazioni su come assegnare un'icona casuale a ogni etichetta e aggiungere gestori eventi alle etichette.