Tutorial: Membuat aplikasi game pencocokan Formulir Windows

Dalam seri empat tutorial ini, Anda membuat permainan mencocokkan. Pemain mencocokkan pasangan ikon tersembunyi.

Gunakan tutorial ini untuk mempelajari tentang tugas-tugas berikut di lingkungan pengembangan terintegrasi Visual Studio (IDE):

• Simpan objek, seperti ikon, dalam List<T> objek.
• Gunakan perulangan foreach di C# atau perulangan For Each di Visual Basic untuk melakukan iterasi item dalam daftar.
• Lacak status formulir dengan menggunakan variabel referensi.
• Buat penanganan aktivitas untuk merespons peristiwa yang dapat Anda gunakan dengan beberapa objek.
• Buat timer yang menghitung mundur dan kemudian memicu suatu kejadian tepat sekali setelah dimulai.

Setelah selesai, Anda memiliki permainan yang lengkap.

Dalam tutorial pertama ini, Anda mempelajari cara:

• Buat proyek Visual Studio yang menggunakan Formulir Windows.
• Menambahkan dan memformat elemen tata letak.
• Tambahkan dan format label.

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan tutorial ini. Untuk versi gratis, kunjungi Halaman Unduhan Visual Studio.

Nota

Tutorial ini memerlukan templat proyek Formulir Windows App (.NET Framework). Selama penginstalan, pilih beban kerja pengembangan desktop .NET :

Jika Anda sudah menginstal Visual Studio dan perlu menambahkan templat, dari menu, pilih Alat>Dapatkan Alat dan Fitur, atau di jendela Buat proyek baru , pilih Instal lebih banyak alat dan fitur.

Membuat proyek permainan kecocokan Formulir Windows

Langkah pertama membuat game Anda adalah membuat proyek Aplikasi Formulir Windows.

1. Buka Visual Studio.

2. Di jendela mulai, pilih Buat proyek baru.

   

3. Di jendela Buat proyek baru , cari Formulir Windows. Lalu pilih Desktop dari daftar Semua jenis proyek .

4. Pilih templat Aplikasi Formulir Windows (.NET Framework) untuk C# atau Visual Basic, lalu pilih Berikutnya.

5. Di jendela Konfigurasikan proyek baru Anda , beri nama proyek Anda MatchingGame, lalu pilih Buat.

   

Visual Studio membuat solusi untuk aplikasi Anda. Solusi adalah kontainer untuk proyek dan file yang dibutuhkan aplikasi Anda.

Pada titik ini, Visual Studio menampilkan formulir kosong di Formulir Windows Designer.

Buat tata letak untuk game Anda

Di bagian ini, Anda membuat papan empat kali empat untuk permainan.

1. Pilih formulir untuk memilih Desainer Formulir Windows. Tab membaca Form1.cs [Design] untuk C# atau Form1.vb [Design] untuk Visual Basic. Di jendela Properti , atur properti formulir berikut ini.

   • Ubah properti Teks dari Form1 menjadi Permainan yang Cocok. Teks ini muncul di bagian atas jendela permainan.
   • Atur ukuran formulir. Anda dapat mengubahnya dengan mengatur properti Ukuran menjadi 550, 550 atau dengan menyeret sudut formulir hingga Anda melihat ukuran yang benar di bagian bawah IDE Visual Studio.

2. Pilih tab Kotak Alat di sisi kiri IDE. Jika Anda tidak melihatnya, pilih Tampilkan>Kotak Alat dari bilah menu atau pilih Ctrl+Alt+X.

3. Seret sebuah kontrol TableLayoutPanel dari kategori Kontainer di dalam kotak alat, atau klik dua kali.

   Atur properti berikut untuk panel di jendela Properti .

   • Atur properti BackColor ke CornflowerBlue. Untuk mengatur properti ini, pilih panah bawah di samping properti BackColor . Dalam kotak dialog yang dihasilkan, pilih Web. Dalam daftar nama, pilih CornflowerBlue.

     Nota

     Warnanya tidak dalam urutan alfabet. CornflowerBlue berada di dekat bagian bawah daftar.

   • Atur properti Dock ke Isi dengan memilih panah bawah lalu pilih tombol tengah besar. Opsi ini menyebarkan tabel sehingga mencakup seluruh formulir.

   • Atur properti CellBorderStyle ke Inset. Nilai ini menyediakan batas visual antara setiap sel di papan.

   • Pilih tombol segitiga di sudut kanan atas TableLayoutPanel untuk menampilkan menu tugasnya. Pada menu tugas, pilih Tambahkan Baris dua kali untuk menambahkan dua baris lagi. Lalu pilih Tambahkan Kolom dua kali untuk menambahkan dua kolom lagi.

   • Pada menu tugas, pilih Edit Baris dan Kolom untuk membuka jendela Gaya Kolom dan Baris . Untuk setiap kolom, pilih opsi Persen , lalu atur lebar setiap kolom menjadi 25 persen.

   • Pilih Baris dari daftar di bagian atas jendela, lalu atur tinggi setiap baris menjadi 25 persen.

   • Setelah selesai, pilih OK untuk menyimpan perubahan Anda.

TableLayoutPanel Anda sekarang menjadi grid empat kali empat dengan 16 sel persegi berukuran sama. Baris dan kolom ini adalah tempat ikon muncul nanti.

Menambahkan dan memformat label

Di bagian ini, Anda membuat dan memformat label yang muncul selama permainan.

1. Pastikan bahwa TableLayoutPanel dipilih di editor formulir. Anda akan melihat tableLayoutPanel1 di bagian atas jendela Properti . Jika tidak dipilih, pilih TableLayoutPanel pada formulir, atau pilih dari daftar di bagian atas jendela Properti .

2. Buka kotak alat, seperti sebelumnya, dan buka kategori Common Controls . Label Tambahkan kontrol ke sel kiri atas TableLayoutPanel. Kontrol label sekarang dipilih dalam IDE. Atur properti berikut untuk itu.

   • Atur properti BackColor label ke CornflowerBlue.
   • Atur properti AutoSize ke False.
   • Atur properti Dock menjadi Isi.
   • Atur properti TextAlign ke MiddleCenter dengan memilih tombol panah bawah di samping properti lalu pilih tombol tengah. Nilai ini memastikan ikon muncul di tengah sel.
   • Pilih properti Font . Tombol elipsis (...) muncul. Pilih elipsis dan atur nilai Font ke Webdings, Gaya Font ke Tebal, dan Ukuran ke 48.
   • Atur properti Teks label ke huruf c.

   Sel kiri atas TableLayoutPanel sekarang berisi kotak hitam yang berpusat di latar belakang biru.

   Nota

   Webdings adalah font ikon yang disertakan bersama sistem operasi Windows. Dalam permainan mencocokkan Anda, pemain mencocokkan pasangan ikon. Font ini menampilkan ikon yang cocok. Jika ikon Webdings tidak ditampilkan dengan benar pada formulir, setel properti UseCompatibleTextRendering label pada formulir ke True.

   Alih-alih c, coba huruf yang berbeda di properti Teks . Tanda seru adalah laba-laba, huruf besar N adalah mata, dan koma adalah cabai.

3. Pilih kontrol Label Anda dan salin ke sel berikutnya di TableLayoutPanel. Pilih tombol Ctrl+C , atau pada bilah menu, Edit>Salin. Kemudian tempelkan dengan menggunakan Ctrl+V atau Edit>Tempel.

   Salinan Label pertama muncul di sel kedua TableLayoutPanel.

   Tempelkan lagi, dan Label lain muncul di sel ketiga. Lanjutkan menempelkan kontrol Label hingga semua sel terisi.

Langkah ini melengkapi tata letak untuk formulir Anda.

Langkah selanjutnya

Buka tutorial berikutnya untuk mempelajari cara menetapkan ikon acak ke setiap label dan menambahkan penanganan aktivitas ke label.

Tambahkan ikon ke Permainan Mencocokkan