チュートリアル: 絵合わせゲーム WinForms アプリにアイコンを追加する

[アーティクル]
03/27/2023

4 つのチュートリアルからなるこのシリーズでは、プレーヤーが非表示のアイコンのペアを一致させる、絵合わせゲームを構築します。

絵合わせゲームでは、プレーヤーは正方形を選択してアイコンを確認し、その後別の正方形を選択します。アイコンが一致した場合は、表示されたままになります。一致しない場合、アイコンは両方とも非表示になります。このチュートリアルでは、ラベルに対してアイコンをランダムに割り当てます。アイコンを非表示に設定して、選択された場合に表示するように設定します。

この 2 番目のチュートリアルでは、次の作業を行う方法について説明します。

Random オブジェクトとアイコンのリストを追加する。
ランダムなアイコンを各ラベルに割り当てる。
アイコンを表示するイベントハンドラーをラベルに追加する。

前提条件

このチュートリアルは、「絵合わせゲームを作成する」チュートリアルを基礎としています。まだの場合、先にそのチュートリアルを完了してください。

Random オブジェクトおよびアイコンのリストの追加

このセクションでは、絵合わせゲームに使用する一連のアイコンを作成します。各アイコンは、フォーム上の TableLayoutPanel 内の 2 つのランダムなセルに追加されます。

new ステートメントを使用して 2 つのオブジェクトを作成します。 1 つ目は、TableLayoutPanel 内のセルをランダムに選択する Random オブジェクトです。 2 つ目のオブジェクトは、List<T> オブジェクトです。ランダムに選択された記号を格納します。

Visual Studio を開きます。 [最近開いた項目] の下に MatchingGame プロジェクトが表示されます。
C# の場合は Form1.cs、Visual Basic の場合は Form1.vb を選択します。その後 [ビュー]>[コード] を選択します。または、F7 キーを選択するか、 [Form1] をダブルクリックします。 Visual Studio IDE に、Form1 のコードモジュールが表示されます。

既存のコードに次のコードを追加します。

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"}

重要

このページの右上にあるプログラミング言語のコントロールを使用して、C# コードスニペットまたは Visual Basic コードスニペットのいずれかを表示します。

Programming language control for Microsoft Learn

C# を使用している場合は、必ず開始中かっこの後の、クラス宣言 (public partial class Form1 : Form) のすぐ後に、コードを配置してください。 Visual Basic を記述している場合は、クラス宣言 (Public Class Form1) のすぐ後にコードを配置します。

リストオブジェクトを使用してさまざまな項目を追跡できます。リストでは、数値、true/false 値、テキスト、またはその他のオブジェクトを保持できます。絵合わせゲームでは、リストオブジェクトには 16 個の文字列が含まれています。TableLayoutPanel パネルの各セルに対して 1 つずつです。各文字列は、ラベル内のアイコンに対応する 1 文字です。これらの文字は、バス、自転車などの Webdings フォントとして表示されます。

Note

リストは、必要に応じて縮小および拡大できます。このプログラムではこの点が重要になります。

リストの詳細については、List<T> を参照してください。 C# の例については、「基本のリストの例」を参照してください。 Visual Basic の例については、「単純なコレクションを使用する」を参照してください。

各ラベルへのランダムなアイコンの割り当て

プログラムが実行されるたびに、AssignIconsToSquares() メソッドを使用してフォーム上の Label コントロールにアイコンがランダムに割り当てられます。このコードでは、C# の場合は foreach キーワード、Visual Basic の場合は For Each キーワードを使用します。

AssignIconsToSquares() メソッドを追加します。

/// <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

このコードを、前のセクションで追加したコードのすぐ下に入力します。

注意

1 つの行が意図的にコメントアウトされています。この行はこの手順の後半で追加します。

AssignIconsToSquares() メソッドが、TableLayoutPanel の各ラベルコントロールに対して反復処理されます。それぞれに対して同じステートメントを実行します。ステートメントは、リストからアイコンをランダムに取得します。

最初の行では、control 変数を iconLabel という名前のラベルに変換しています。
2 行目は、変換が機能したことを確認するための if ステートメントです。変換が成功した場合は、if ステートメント内のステートメントが実行されます
if ステートメントの最初の行では、randomNumber という名前の変数を作成し、icons リスト内の項目のいずれかに対応する乱数をこの変数に格納します。 Random オブジェクトの Next() メソッドを使用しています。 Next メソッドは乱数を返します。またこの行では、icons リストの Count プロパティを使用して、乱数を選択する範囲を決定しています。
次の行では、icons リストのいずれかの項目をラベルの Text プロパティに割り当てています。
次の行は、アイコンを非表示にします。ここでは、先に進む前にコードの残りの部分を検証できるようにするため、この行はコメントアウトされています。
if ステートメントの最後の行で、フォームに追加したアイコンをリストから削除しています。

AssignIconsToSquares() メソッドの呼び出しを、Form1 "コンストラクター" に追加します。このメソッドは、ゲームボードにアイコンを配置します。コンストラクターは、オブジェクトを作成する時に呼び出されます。
```
public Form1()
{
    InitializeComponent();

    AssignIconsToSquares();
}
```
Visual Basic の場合、Form1_Load メソッドに AssignIconsToSquares() メソッド呼び出しを追加します。
```
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    AssignIconsToSquares()
End Sub
```
詳しくは、「コンストラクター (C# プログラミングガイド)」または「コンストラクターとデストラクターの使用方法」をご覧ください。
プログラムを保存し、実行します。各ラベルに割り当てられたランダムなアイコンを備えたフォームが表示されます。

ヒント

Webdings アイコンがフォームに正しく表示されない場合は、フォーム上のラベルの UseCompatibleTextRendering プロパティを True に設定してください。
いったんプログラムを終了して、再び実行します。ラベルごとに異なるアイコンが割り当てられます。

アイコンは、まだ非表示に設定されていないため、表示されています。アイコンをプレーヤーに非表示にするには、各ラベルの ForeColor プロパティをその BackColor プロパティと同じ色に設定できます。
プログラムを停止する。ループ内の、コメントアウトされた行のコメントマークを削除します。
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

もう一度プログラムを実行すると、アイコンが消えたように見えます。青い背景だけが表示されます。実際には、アイコンはランダムに割り当てられていてそこにあります。

イベントハンドラーをラベルに追加する

この絵合わせゲームでは、プレイヤーは非表示のアイコンを 1 つ表示し、次に 2 つ目のアイコンを表示します。アイコンが一致した場合は、表示されたままになります。一致しない場合、両方のアイコンが再び非表示なります。

ゲームをこのように動作させるには、選択したラベルの色を背景色と一致するように変化させる Click イベントハンドラーを追加します。

Windows フォームデザイナーでフォームを開きます。 Form1.cs または Form1.vb を選択して、 [ビュー]>[デザイナー] を選択します。
最初のラベルコントロールを選択し、それをダブルクリックして label1 _Click() という Click イベントハンドラーをコードに追加します。
そして、Ctrl キーを押しながら他のラベルを 1 つずつ選択します。すべてのラベルが選択されていることを確認します。
[プロパティ] ウィンドウで、稲妻の [イベント] ボタンを選択します。 [クリック] イベントに対して、ボックス内の [label1_Click] を選択します。
Enter キーを選択します。 IDE で、label1 _Click() という名前の Click イベントハンドラーが追加されます。すべてのラベルを選択したので、ハンドラーは各ラベルにフックされます。

コードの残りを入力します。

/// <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

注意

label1_Click() コードブロックを手動で入力せずにコピーして貼り付ける場合は、既存の label1_Click() コードと置き換えてください。置き換えないと、コードブロックが重複することになります。

[デバッグ]>[デバッグの開始] を選択してプログラムを実行します。青色の背景の空のフォームが表示されます。フォーム内の任意のセルを選択します。 1 つのアイコンが表示されます。フォーム内のさまざまな場所でクリックし続けます。アイコンをクリックすると、そのアイコンが表示されます。

Screenshot shows the Matching Game with a single icon visible.

次のステップ

次のチュートリアルに進み、タイマーを使用してラベルを変更する方法を学習してください。

絵合わせゲームでタイマーを使用する

次の方法で共有

チュートリアル: 絵合わせゲーム WinForms アプリにアイコンを追加する

前提条件

Random オブジェクトおよびアイコンのリストの追加

各ラベルへのランダムなアイコンの割り当て

イベントハンドラーをラベルに追加する

次のステップ

フィードバック

その他のリソース

次の方法で共有

チュートリアル: 絵合わせゲーム WinForms アプリにアイコンを追加する

前提条件

Random オブジェクトおよびアイコンのリストの追加

各ラベルへのランダムなアイコンの割り当て

イベント ハンドラーをラベルに追加する

次のステップ

フィードバック

その他のリソース

イベントハンドラーをラベルに追加する