Tutorial: Menambahkan ikon ke aplikasi WinForms game yang cocok

Dalam seri empat tutorial ini, Anda membangun permainan mencocokkan, di mana pemain harus mencocokkan pasangan ikon tersembunyi.

Dalam permainan pencocokan, pemain memilih satu kotak untuk melihat ikon, lalu memilih kotak lainnya. Jika ikon cocok, ikon tetap terlihat. Jika tidak, permainan menyembunyikan kedua ikon. Dalam tutorial ini, Anda menetapkan ikon ke label secara acak. Anda mengaturnya untuk disembunyikan lalu ditampilkan saat dipilih.

Dalam tutorial kedua ini, Anda mempelajari cara:

Tambahkan objek Acak dan daftar ikon.
Tetapkan ikon acak ke setiap label.
Tambahkan pengendali acara yang memperlihatkan ikon pada label.

Prasyarat

Tutorial ini dibangun pada tutorial sebelumnya, Membuat aplikasi game yang cocok. Jika Anda belum melakukan tutorial itu, lakukan yang satu itu terlebih dahulu.

Menambahkan objek Acak dan daftar ikon

Di bagian ini, Anda membuat sekumpulan simbol yang cocok untuk permainan. Setiap simbol ditambahkan ke dua sel acak di TableLayoutPanel pada formulir.

Anda menggunakan new pernyataan untuk membuat dua objek. Yang pertama adalah Random objek yang secara acak memilih sel di TableLayoutPanel. Objek kedua adalah List<T> objek. Ini menyimpan simbol yang dipilih secara acak.

Buka Visual Studio. Proyek MatchingGame Anda muncul di bawah Buka baru-baru ini.
Pilih Form1.cs jika Anda menggunakan C#, atau Form1.vb jika Anda menggunakan Visual Basic. Lalu pilih Tampilkan>Kode. Sebagai alternatif, pilih kunci F7 atau klik dua kali Form1. IDE Visual Studio menampilkan modul kode untuk Form1.

Dalam kode yang ada, tambahkan kode berikut.

public partial class Form1 : Form
{
    // Use this Random object to choose random icons for the squares
    Random random = new Random();

    // Each of these letters is an interesting icon
    // in the Webdings font,
    // and each icon appears twice in this list
    List<string> icons = new List<string>() 
    { 
        "!", "!", "N", "N", ",", ",", "k", "k",
        "b", "b", "v", "v", "w", "w", "z", "z"
    };

Public Class Form1

    ' Use this Random object to choose random icons for the squares
    Private random As New Random

    ' Each of these letters is an interesting icon
    ' in the Webdings font,
    ' and each icon appears twice in this list
    Private icons =
      New List(Of String) From {"!", "!", "N", "N", ",", ",", "k", "k",
                                "b", "b", "v", "v", "w", "w", "z", "z"}

Jika Anda menggunakan C#, pastikan Anda meletakkan kode setelah kurung kurawal pembuka dan tepat setelah deklarasi kelas (public partial class Form1 : Form). Jika Anda menggunakan Visual Basic, letakkan kode tepat setelah deklarasi kelas (Public Class Form1).

Anda dapat menggunakan objek daftar untuk melacak berbagai jenis item. Daftar dapat menampung angka, nilai benar/salah, teks, atau objek lainnya. Dalam permainan mencocokkan, objek list memiliki 16 string, satu untuk setiap sel di panel TableLayoutPanel. Setiap string adalah huruf tunggal yang sesuai dengan ikon dalam label. Karakter ini muncul di font Webdings sebagai bus, sepeda, dan lainnya.

Nota

Daftar dapat menyusut dan tumbuh sesuai kebutuhan, yang penting dalam program ini.

Untuk mempelajari selengkapnya tentang daftar, lihat List<T>. Untuk melihat contoh di C#, lihat Contoh daftar dasar. Untuk melihat contoh di Visual Basic, lihat Menggunakan Koleksi Sederhana.

Menetapkan ikon acak ke setiap label

Setiap kali Anda menjalankan program, program menetapkan ikon secara acak ke kontrol Label pada formulir Anda dengan menggunakan AssignIconsToSquares() metode . Kode ini menggunakan kata kunci foreach di C# atau For Each di Visual Basic.

Tambahkan metode AssignIconsToSquares() ke Form1.cs atau Form1.vb.

/// <summary>
/// Assign each icon from the list of icons to a random square
/// </summary>
private void AssignIconsToSquares()
{
    // The TableLayoutPanel has 16 labels,
    // and the icon list has 16 icons,
    // so an icon is pulled at random from the list
    // and added to each label
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        Label iconLabel = control as Label;
        if (iconLabel != null)
        {
            int randomNumber = random.Next(icons.Count);
            iconLabel.Text = icons[randomNumber];
            // iconLabel.ForeColor = iconLabel.BackColor;
            icons.RemoveAt(randomNumber);
        }
    }
}

''' <summary>
''' Assign each icon from the list of icons to a random square
''' </summary>
''' <remarks></remarks>
Private Sub AssignIconsToSquares()

    ' The TableLayoutPanel has 16 labels,
    ' and the icon list has 16 icons,
    ' so an icon is pulled at random from the list
    ' and added to each label
    For Each control In TableLayoutPanel1.Controls
        Dim iconLabel = TryCast(control, Label)
        If iconLabel IsNot Nothing Then
            Dim randomNumber = random.Next(icons.Count)
            iconLabel.Text = icons(randomNumber)
            ' iconLabel.ForeColor = iconLabel.BackColor
            icons.RemoveAt(randomNumber)
        End If
    Next

End Sub

Anda dapat memasukkan kode ini tepat di bawah kode yang Anda tambahkan di bagian sebelumnya.

Nota

Salah satu baris sengaja dikomentari. Anda menambahkannya dalam prosedur ini nanti.

Metode AssignIconsToSquares() ini melewati setiap kontrol label pada TableLayoutPanel. Ini menjalankan pernyataan yang sama untuk masing-masing. Pernyataan menarik ikon acak dari daftar.

Baris pertama mengonversi variabel kontrol menjadi label bernama iconLabel.
Baris kedua adalah if pernyataan yang memeriksa untuk memastikan konversi berfungsi. Jika konversi berhasil, pernyataan dalam blok if dijalankan.
Baris pertama dalam if pernyataan membuat variabel bernama randomNumber yang berisi angka acak yang sesuai dengan salah satu item dalam daftar ikon. Ini menggunakan metode Next() dari objek Random. Metode Next mengembalikan angka acak. Baris ini juga menggunakan Count properti daftar ikon untuk menentukan rentang dari mana memilih angka acak.
Baris berikutnya menetapkan salah satu item daftar ikon ke Text properti label.
Baris berikutnya menyembunyikan ikon. Baris dikomentari di sini sehingga Anda dapat memverifikasi sisa kode sebelum melanjutkan.
Baris terakhir dalam if pernyataan menghapus ikon yang telah ditambahkan ke formulir dari daftar.

Tambahkan panggilan ke metode AssignIconsToSquares() di konstruktorForm1 di Form1.cs. Metode ini mengisi papan permainan dengan ikon. Konstruktor dipanggil saat Anda membuat objek.
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
Untuk Visual Basic, tambahkan metode AssignIconsToSquares() panggilan ke metode Form1_Load di Form1.vb.
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
Untuk informasi selengkapnya, lihat Konstruktor (panduan pemrograman C#) atau Menggunakan konstruktor dan destruktor.
Simpan program Anda dan jalankan. Ini harus menampilkan formulir dengan ikon acak yang ditetapkan ke setiap label.

Petunjuk / Saran

Jika ikon Webding tidak ditampilkan dengan benar pada formulir, atur properti UseCompatibleTextRendering label pada formulir ke True.
Tutup program Anda, lalu jalankan kembali. Ikon yang berbeda ditetapkan ke setiap label.

Ikon terlihat sekarang karena Anda belum menyembunyikannya. Untuk menyembunyikannya dari pemutar, Anda dapat mengatur properti ForeColor setiap label ke warna yang sama dengan properti BackColor-nya .
Hentikan programnya. Hapus tanda komentar untuk baris kode yang dikomentari di dalam perulangan dalam AssignIconsToSquares() metode .
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

Jika Anda menjalankan program lagi, ikon tampaknya telah menghilang. Hanya latar belakang biru yang muncul. Ikon ditetapkan secara acak dan masih ada.

Menambahkan penanganan aktivitas ke label

Dalam permainan mencocokkan ini, seorang pemain mengungkapkan ikon tersembunyi, lalu ikon kedua. Jika ikon cocok, ikon tetap terlihat. Jika tidak, kedua ikon disembunyikan lagi.

Untuk membuat permainan Anda berfungsi dengan cara ini, tambahkan Click penanganan aktivitas yang mengubah warna label yang dipilih agar sesuai dengan latar belakang.

Buka formulir di Windows Forms Designer. Pilih Form1.cs atau Form1.vb, lalu pilih Tampilkan>.
Pilih kontrol label pertama untuk memilihnya dan klik dua kali untuk menambahkan penanganan aktivitas yang Click disebut label1 _Click() ke kode.
Kemudian, tahan tombol Ctrl saat Anda memilih masing-masing label lainnya. Pastikan bahwa setiap label dipilih.
Di jendela Properti , pilih tombol Peristiwa , yang merupakan petir. Untuk event klik, pilih label1_Click dari kotak.
Pilih tombol Enter . IDE menambahkan penanganan aktivitas yang Click disebut label1 _Click() ke kode di Form1.cs atau Form1.vb. Karena Anda memilih semua label, handler terhubung dengan masing-masing label.

Isi sisa kode.

/// <summary>
/// Every label's Click event is handled by this event handler
/// </summary>
/// <param name="sender">The label that was clicked</param>
/// <param name="e"></param>
private void label1_Click(object sender, EventArgs e)
{
    Label clickedLabel = sender as Label;

    if (clickedLabel != null)
    {
        // If the clicked label is black, the player clicked
        // an icon that's already been revealed --
        // ignore the click
        if (clickedLabel.ForeColor == Color.Black)
            return;

        clickedLabel.ForeColor = Color.Black;
    }
 }

''' <summary>
''' Every label's Click event is handled by this event handler
''' </summary>
''' <param name="sender">The label that was clicked</param>
''' <param name="e"></param>
''' <remarks></remarks>
Private Sub label_Click(ByVal sender As System.Object, 
                        ByVal e As System.EventArgs) Handles Label9.Click, 
    Label8.Click, Label7.Click, Label6.Click, Label5.Click, Label4.Click, 
    Label3.Click, Label2.Click, Label16.Click, Label15.Click, Label14.Click, 
    Label13.Click, Label12.Click, Label11.Click, Label10.Click, Label1.Click

    Dim clickedLabel = TryCast(sender, Label)

    If clickedLabel IsNot Nothing Then

        ' If the clicked label is black, the player clicked 
        ' an icon that's already been revealed -- 
        ' ignore the click
        If clickedLabel.ForeColor = Color.Black Then Exit Sub

        clickedLabel.ForeColor = Color.Black
    End If
End Sub

Nota

Jika Anda menyalin dan menempelkan blok kode label1_Click() daripada memasukkan kode secara manual, pastikan untuk mengganti kode label1_Click() yang ada. Jika tidak, Anda akan berakhir dengan blok kode duplikat.

Pilih Debug>Mulai Debug untuk menjalankan program Anda. Anda akan melihat formulir kosong dengan latar belakang biru. Pilih salah satu sel dalam formulir. Salah satu ikon harus terlihat. Lanjutkan memilih tempat yang berbeda dalam formulir. Saat Anda memilih ikon, ikon akan muncul.

Cuplikan layar memperlihatkan Permainan Pencocokan dengan satu ikon yang terlihat.

Langkah selanjutnya

Lanjutkan ke tutorial berikutnya untuk mempelajari cara mengubah label menggunakan timer.

Gunakan timer di Game Pencocokan Anda

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-08-07

Bagikan melalui

Tutorial: Menambahkan ikon ke aplikasi WinForms game yang cocok

Prasyarat

Menambahkan objek Acak dan daftar ikon

Menetapkan ikon acak ke setiap label

Menambahkan penanganan aktivitas ke label

Langkah selanjutnya

Saran dan Komentar

Sumber Daya Tambahan: