チュートリアル: 一致するゲーム WinForms アプリにアイコンを追加する

[アーティクル]
01/31/2025

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

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

手記

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

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

各ラベルにランダムなアイコンを割り当てる

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

AssignIconsToSquares() メソッドを Form1.cs または 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

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

手記

行の 1 つは、意図的にコメントアウトされます。手順中にあとで追加します。

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

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

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

    AssignIconsToSquares();
}
```
Visual Basic の場合は、Form1.vbの 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 プロパティと同じ色に設定できます。
プログラムを停止します。 AssignIconsToSquares() メソッド内のループ内のコメントされたコード行のコメントマークを削除します。
- C#
- VB
```
iconLabel.ForeColor = iconLabel.BackColor;
```
```
iconLabel.ForeColor = iconLabel.BackColor
```

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

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

この一致するゲームでは、プレイヤーが非表示のアイコンを表示し、次に 2 番目のアイコンを表示します。アイコンが一致する場合は、表示された状態が維持されます。それ以外の場合は、両方のアイコンが再び非表示になります。

この方法でゲームを動作させるには、選択したラベルの色を背景に合わせて変更する Click イベントハンドラーを追加します。

Windows フォームデザイナーでフォームを開きます。 [Form1.cs または Form1.vb] を選択し、[ビュー>デザイナー] を選択します。
最初のラベルコントロールを選択し、それをダブルクリックして、label1 _Click() という Click イベントハンドラーをコードに追加します。
次に、Ctrl キー キーを押しながら、他の各ラベルを選択します。すべてのラベルが選択されていることを確認します。
プロパティ ウィンドウで、イベント ボタン（雷の形）を選択します。 [クリック] イベントに対して、ボックス内の [label1_Click] を選択します。
Enter キーを選択します。 IDE は、Form1.cs または Form1.vbのコード 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 つが表示されます。フォーム内のさまざまな場所を選択し続けます。アイコンを選択すると、アイコンが表示されます。

$スクリーンショットには、1 つのアイコンが表示された [Matching Game]$マッチングゲーム$ が表示されます。$

次の手順

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

マッチングゲームでタイマーを使用する

次の方法で共有

チュートリアル: 一致するゲーム WinForms アプリにアイコンを追加する

前提条件

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

各ラベルにランダムなアイコンを割り当てる

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

次の手順

フィードバック

その他のリソース

次の方法で共有

チュートリアル: 一致するゲーム WinForms アプリにアイコンを追加する

前提 条件

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

各ラベルにランダム なアイコンを割り当てる

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

次の手順

フィードバック

その他のリソース

前提条件

各ラベルにランダムなアイコンを割り当てる

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