Oktatóanyag: Windows Forms-nak megfelelő játékalkalmazás létrehozása

Ebben a négy oktatóanyagból álló sorozatban egy párosító játékot készítesz. A játékos párosítja a rejtett ikonok párjait.

Ezekkel az oktatóanyagokkal megismerheti a Visual Studio integrált fejlesztési környezetében (IDE) a következő feladatokat:

• Objektumokat, például ikonokat tárolhat egy List<T> objektumban.
• Egy foreach hurok használata c# nyelven vagy egy For Each ciklus használata a Visual Basicben a lista elemein keresztüli iteráláshoz.
• Egy űrlap állapotának nyomon követése referenciaváltozók használatával.
• Hozzon létre egy eseménykezelőt, amely több objektummal használható eseményekre válaszol.
• Hozzon létre egy időzítőt, amely visszaszámlál, majd pontosan egyszer aktivál egy eseményt az indítás után.

Ha elkészült, egy teljes játék lesz a birtokában.

Ebben az első oktatóanyagban megtanulhatja, hogyan:

• Hozzon létre egy Windows Formst használó Visual Studio-projektet.
• Elrendezéselem hozzáadása és formázása.
• Címkék hozzáadása és formázása.

Előfeltételek

Az oktatóanyag elvégzéséhez a Visual Studióra van szüksége. Az ingyenes verzióért látogasson el a Visual Studio letöltési oldalára.

Jegyzet

Ehhez az oktatóanyaghoz a Windows Forms App (.NET Framework) projektsablonra van szükség. A telepítés során válassza ki a .NET asztali fejlesztési számítási feladatot:

Ha már telepítve van a Visual Studio, és hozzá kell adnia a sablont, a menüben válassza az Eszközök>Eszközök és szolgáltatások lekéréselehetőséget, vagy az Új projekt létrehozása ablakban válassza a További eszközök és szolgáltatások telepítéselehetőséget.

Játékprojekthez illeszkedő Windows Forms-űrlap létrehozása

A játék létrehozásának első lépése egy Windows Forms-alkalmazásprojekt létrehozása.

1. Nyissa meg a Visual Studiót.

2. A kezdési ablakban válassza Új projekt létrehozásalehetőséget.

   

3. Az Új projekt létrehozása ablakban keresse meg Windows Forms. Ezután válassza Desktop a Minden projekttípus listából.

4. Válassza a Windows Forms App (.NET-keretrendszer) sablont c# vagy Visual Basic rendszerhez, majd válassza a Továbblehetőséget.

5. Az Új projekt konfigurálása ablakban nevezze el a projektet MatchingGame, majd válassza a létrehozása lehetőséget.

   

A Visual Studio létrehoz egy megoldást, az alkalmazáshoz. A megoldás az alkalmazás által igényelt projektek és fájlok tárolója.

Ekkor a Visual Studio egy üres űrlapot jelenít meg a Windows Forms Designerben.

Elrendezés létrehozása a játékhoz

Ebben a szakaszban létrehozza a játékhoz szükséges négy-szor-négyes rácsot.

1. Válassza ki az űrlapot a Windows Forms Designer kiválasztásához. A lap felirata Form1.cs [Tervezés] C# vagy Form1.vb [Tervezés] a Visual Basic esetében. A Tulajdonságok ablakban állítsa be az alábbi űrlaptulajdonságokat.

   • Módosítsa a Szöveg tulajdonságot Form1-ről Egyező Játék. Ez a szöveg a játékablak tetején jelenik meg.
   • Adja meg az űrlap méretét. Ezt módosíthatja úgy, hogy a Méret tulajdonságot 550, 550 értékre állítja, vagy húzza az űrlap sarkát, amíg meg nem jelenik a megfelelő méret a Visual Studio IDE alján.

2. Válassza a Eszközkészlet fület az IDE bal oldalán. Ha nem látja, válassza >Eszközkészlet megtekintése lehetőséget a menüsávon, vagy válassza Ctrl+Alt+X.

3. Húzzon egy TableLayoutPanel vezérlőelemet az eszközkészlet Tárolók kategóriájából, vagy kattintson rá duplán. A Tulajdonságok ablakban adja meg a panel alábbi tulajdonságait.

   • Állítsa a BackColor tulajdonságot a Búzavirágkék. A tulajdonság beállításához válassza a BackColor tulajdonság melletti lefelé mutató nyilat. Az eredményül kapott párbeszédpanelen válassza a Weblehetőséget. A nevek listájában válassza CornflowerBlue.

     Jegyzet

     A színek nem betűrendben jelennek meg. BúzavirágBlue a lista alján található.

   • Állítsa be a Dock tulajdonságot a Fill értékre, a lefelé nyílra kattintva, majd kattintson a nagy középső gombra. Ez a beállítás elterjeszti a táblázatot úgy, hogy az a teljes űrlapot lefedje.

   • Állítsa a CellBorderStyle tulajdonságot Insetértékre. Ez az érték vizuális szegélyeket biztosít a tábla minden egyes celláját között.

   • Válassza a TableLayoutPanel jobb felső sarkában található háromszög gombot a feladatmenü megjelenítéséhez. A feladatmenüben válassza a Sor hozzáadása lehetőséget kétszer, hogy két további sort adjon hozzá. Ezután kétszer válassza a Oszlop hozzáadása lehetőséget, hogy két további oszlopot adjon hozzá.

   • A feladatmenüben válassza Sorok és oszlopok szerkesztése lehetőséget a Oszlop- és sorstílusok ablak megnyitásához. Minden oszlopnál válassza a Százalék beállítást, majd állítsa be az egyes oszlopok szélességét 25 százalékra.

   • Jelölje ki a sorokat az ablak tetején lévő listából, majd állítsa be minden sor magasságát 25 százalékra.

   • Ha végzett, a módosítások mentéséhez válassza OK lehetőséget.

A TableLayoutPanel egy négy sorból és négy oszlopból álló rács, amely 16 egyenlő méretű négyzetcellát tartalmaz. Ezek a sorok és oszlopok jelennek meg később az ikonok között.

Címkék hozzáadása és formázása

Ebben a szakaszban a játék során megjelenő címkéket hozhatja létre és formázhatja.

1. Győződhet meg arról, hogy a TableLayoutPanel ki van jelölve az űrlapszerkesztőben. A Tulajdonságok ablak tetején tableLayoutPanel1 kell megjelennie. Ha nincs kijelölve, jelölje ki az űrlap TableLayoutPanel elemét, vagy válassza ki a Tulajdonságok ablak tetején lévő listából.

2. Nyissa meg az eszközkészletet a korábbiakhoz hasonlóan, és nyissa meg a Közös vezérlők kategóriát. Adjon hozzá egy Label vezérlőelemet a TableLayoutPanel bal felső cellájába. A címkevezérlő most ki van jelölve az IDE-ben. Adja meg a következő tulajdonságokat.

   • Állítsa a BackColor tulajdonságát a címke CornflowerBlueértékére.
   • Állítsa a Automatikus méretezés tulajdonságot hamisértékre.
   • Állítsa a Dock tulajdonságot a Kitöltés-re.
   • Állítsa a TextAlign tulajdonságot a MiddleCenter értékre úgy, hogy kattint a tulajdonság melletti lefelé mutató nyílra, majd a középső gombra. Ez az érték biztosítja, hogy az ikon megjelenjen a cella közepén.
   • Válassza ki a Betűtípus tulajdonságot. Megjelenik egy pontozott (...) gomb. Jelölje ki a kivonásjelet, és állítsa a Betűtípus értékét a Webdings, a Betűstílus értékét a Félkövér, a Méret értékét pedig a 48.
   • Állítsa a címke Szöveg tulajdonságát a cbetűre.

   A TableLayoutPanel bal felső cellája mostantól egy fekete dobozt tartalmaz, középre rendezve egy kék háttér előtt.

   Jegyzet

   A Webdings egy ikon betűtípus, amely a Windows operációs rendszerrel együtt működik. A párosító játékban a játékos ikonpárokat párosít. Ez a betűtípus megjeleníti az egyező ikonokat. Ha a Webdings ikonok nem jelennek meg megfelelően az űrlapon, állítsa be az űrlap címkéinek UseCompatibleTextRendering tulajdonságát "Igaz" értékre.

   A chelyett próbálkozzon a Szöveg tulajdonság különféle betűivel. A felkiáltójel egy pók, a nagybetűs N egy szem, a vessző pedig egy chilipaprika.

3. Jelölje ki a Címke vezérlőelemet, és másolja a TableLayoutPanel következő cellájába. Válassza a Ctrl+C billentyűket, vagy a menüsávon Szerkesztés>Másolás. Ezután illessze be a Ctrl+V vagy Szerkesztés>Beillesztésparancsával.

   Az első címke másolata megjelenik a TableLayoutPanel második cellájában. Illessze be újra, és egy másik címke jelenik meg a harmadik cellában. Folytassa a Címke vezérlőelemek beillesztését, amíg az összes cella ki nem töltődik.

Ez a lépés befejezi az űrlap elrendezését.

Következő lépés

A következő oktatóanyagban megtudhatja, hogyan rendelhet véletlenszerű ikonokat az egyes címkékhez, és hogyan adhat hozzá eseménykezelőket a címkékhez.

Ikonok hozzáadása a Matching Game-hez