Dela via

Självstudie: Skapa en matchande spelapp för Windows Forms

I den här serien med fyra självstudier skapar du ett matchande spel. Spelaren matchar par med dolda ikoner.

Använd de här självstudierna för att lära dig mer om följande uppgifter i Visual Studio Integrated Development Environment (IDE):

  • Lagra objekt, till exempel ikoner, i ett List<T> objekt.
  • Använd en foreach-loop i C# eller en For Each-loop i Visual Basic för att iterera genom objekt i en lista.
  • Håll reda på ett formulärs tillstånd med hjälp av referensvariabler.
  • Skapa en händelsehanterare för att svara på händelser som du kan använda med flera objekt.
  • Skapa en timer som räknar ned och sedan utlöser en händelse exakt en gång efter att den har startats.

När du är klar har du ett komplett spel.

Skärmbild av spelet som du skapar. Flera matchande ikoner visas i ett rutnät.

I den här första handledningen lär du dig att:

  • Skapa ett Visual Studio-projekt som använder Windows Forms.
  • Lägg till och formatera ett layoutelement.
  • Lägg till och formatera etiketter.

Förutsättningar

Du behöver Visual Studio för att slutföra den här självstudien. Besök sidan Visual Studio-nedladdningar för en kostnadsfri version.

Notera

Den här handledningen kräver Windows Forms App (.NET Framework) projektmall. Under installationen väljer du arbetsbelastningen .NET-skrivbordsutveckling:

Skärmbild som visar arbetsbelastningen för NET-skrivbordsutveckling i Visual Studio Installer.

Om du redan har Installerat Visual Studio och behöver lägga till mallen går du till menyn och väljer Verktyg>Hämta verktyg och funktioner, eller i fönstret Skapa ett nytt projekt väljer du Installera fler verktyg och funktioner.

Skärmbild som visar länken Installera fler verktyg och funktioner från meddelandet Hitta inte det du letar efter i dialogrutan Skapa nytt projekt.

Skapa ett Matchspelsprojekt för Windows Forms

Det första steget för att skapa ditt spel är att skapa ett Windows Forms App-projekt.

  1. Öppna Visual Studio.

  2. I startfönstret väljer du Skapa ett nytt projekt.

    Skärmbild av alternativet Skapa ett nytt projekt i Visual Studio-startfönstret.

  3. I fönstret Skapa ett nytt projekt söker du efter Windows Forms. Välj sedan Desktop i listan Alla projekttyper.

  4. Välj mallen Windows Forms App (.NET Framework) för C# eller Visual Basic och välj sedan Nästa.

  5. I fönstret Konfigurera det nya projektet ger du projektet namnet MatchingGameoch väljer sedan Skapa.

    Skärmbild av fönstret 'Konfigurera ditt nya projekt'.

Visual Studio skapar en lösning för din app. En lösning är en container för de projekt och filer som din app behöver.

Nu visar Visual Studio ett tomt formulär i Windows Forms Designer.

Skapa en layout för ditt spel

I det här avsnittet skapar du rutnätet fyra efter fyra för spelet.

  1. Välj formuläret för att välja Windows Forms Designer. Fliken läser Form1.cs [Design] för C# eller Form1.vb [Design] för Visual Basic. I fönstret Egenskaper anger du följande formuläregenskaper.

    • Ändra egenskapen Text från Form1 till Matchande spel. Den här texten visas överst i spelfönstret.
    • Ange formulärets storlek. Du kan ändra den antingen genom att ange egenskapen Storlek till 550, 550 eller genom att dra formulärets hörn tills du ser rätt storlek längst ned i Visual Studio IDE.

  2. Välj fliken Toolbox till vänster i IDE. Om du inte ser den väljer du Visa>Toolbox i menyraden eller väljer Ctrl+Alt+X.

  3. Dra ett TableLayoutPanel-kontrollelement från kategorin Containers i verktygslådan eller dubbelklicka på det. Ange följande egenskaper för panelen i fönstret Egenskaper.

    • Ange egenskapen BackColor till CornflowerBlue. Om du vill ange den här egenskapen väljer du nedåtpilen bredvid egenskapen BackColor. I den resulterande dialogrutan väljer du Web. I listan med namn väljer du CornflowerBlue.

      Anteckning

      Färgerna är inte i alfabetisk ordning. CornflowerBlue ligger längst ned i listan.

    • Ange egenskapen Dock till Fill genom att välja nedåtpilen och sedan välja den stora mittenknappen. Det här alternativet sprider ut tabellen så att den täcker hela formuläret.

    • Ange egenskapen CellBorderStyle till Inset. Det här värdet ger visuella kantlinjer mellan varje cell på tavlan.

    • Välj triangelknappen i det övre högra hörnet i TableLayoutPanel för att visa aktivitetsmenyn. På aktivitetsmenyn väljer du Lägg till rad två gånger för att lägga till ytterligare två rader. Välj sedan Lägg till kolumn två gånger för att lägga till ytterligare två kolumner.

    • På aktivitetsmenyn väljer du Redigera rader och kolumner för att öppna fönstret kolumn- och radformat. För varje kolumn väljer du alternativet procent och anger sedan varje kolumns bredd till 25 procent.

    • Välj Rader från listan överst i fönstret och ange sedan varje rads höjd till 25 procent.

    • När du är klar väljer du OK för att spara ändringarna.

TableLayoutPanel är nu ett fyr-efter-fyra-rutnät med 16 lika stora kvadratceller. Dessa rader och kolumner är där ikonerna visas senare.

Skärmbild av fliken Formulär med ett rutnät fyra efter fyra.

Lägga till och formatera etiketter

I det här avsnittet skapar och formaterar du etiketter som visas under spelet.

  1. Se till att TableLayoutPanel är markerat i formulärredigeraren. Du bör se tableLayoutPanel1 överst i fönstret Egenskaper. Om den inte är markerad väljer du TableLayoutPanel i formuläret eller väljer den i listan överst i fönstret Egenskaper.

  2. Öppna verktygslådan precis som tidigare och öppna kategorin Common Controls. Lägg till en Label kontroll i den övre vänstra cellen i TableLayoutPanel. Etikettkontrollen är nu markerad i IDE:n. Ange följande egenskaper för den.

    • Ange egenskapen BackColor för etiketten till CornflowerBlue.
    • Ange egenskapen AutoSize till False.
    • Ange egenskapen Dock till Fill.
    • Ange egenskapen TextAlign till MiddleCenter- genom att välja nedåtpilen bredvid egenskapen och sedan välja mittenknappen. Det här värdet ser till att ikonen visas i mitten av cellen.
    • Välj egenskapen Teckensnitt. En ellipsknapp (...) visas. Välj ellipsen och ange värdet Teckensnitt till Webdings, Teckensnittsformat till Fet, och Storlek till 48.
    • Ange egenskapen Text för etiketten till bokstaven c.

    Den övre vänstra cellen i TableLayoutPanel innehåller nu en svart ruta centrerad på en blå bakgrund.

    Not

    Webdings är ett ikonteckensnitt som levereras med Windows-operativsystemet. I ditt matchande spel matchar spelaren par med ikoner. Det här teckensnittet visar ikonerna som ska matchas. Om webdings-ikonerna inte visas korrekt i formuläret anger du egenskapen UseCompatibleTextRendering på etiketter i formuläret till True.

    I stället för att ckan du prova olika bokstäver i egenskapen Text. Ett utropstecken är en spindel, ett versalt N är ett öga och ett kommatecken är en chilipeppar.

  3. Välj kontrollen Etikett och kopiera den till nästa cell i TableLayoutPanel. Välj tangenterna Ctrl+C eller på menyraden Redigera>Kopiera. Klistra sedan in den med hjälp av Ctrl+V eller Redigera>Klistra in.

    En kopia av den första etiketten visas i den andra cellen i TableLayoutPanel. Klistra in den igen och en annan etikett visas i den tredje cellen. Fortsätt klistra in etikettkontroller tills alla celler är fyllda.

Det här steget slutför layouten för formuläret.

Skärmbild av matchande spelform med 16 svarta rutor.

Nästa steg

Gå till nästa självstudie för att lära dig hur du tilldelar en slumpmässig ikon till varje etikett och lägger till händelsehanterare i etiketter.

Lägg till ikoner i matchande spel