チュートリアル: 絵合わせゲーム WinForms アプリでメッセージを表示する

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

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

このチュートリアルでは、絵合わせゲームを修正して、一致したペアを表示したままにし、プレーヤーが勝利した時にお祝いのメッセージが表示されるようにします。

このチュートリアルでは、以下の内容を学習します。

ペアを表示したままにする。
プレーヤーが勝利したかどうかを確認する。
他の機能を試す。

前提条件

このチュートリアルは、これまでのチュートリアルに基づいています。

ペアの表示の維持

プレーヤーがペアを一致させた場合、ゲームをリセットして、firstClicked と secondClicked の参照変数を使用するラベルをそれ以上追跡しないようにします。一致した 2 つのラベルの色はリセットしません。それらのラベルは表示されたままになります。

label_Click() イベントハンドラーメソッドに、次の if ステートメントを追加します。コードの終わり近く、タイマーを開始するステートメントのすぐ上に配置します。

        // If the player gets this far, the timer isn't
        // running and firstClicked isn't null,
        // so this must be the second icon the player clicked
        // Set its color to black
        secondClicked = clickedLabel;
        secondClicked.ForeColor = Color.Black;

        // If the player clicked two matching icons, keep them 
        // black and reset firstClicked and secondClicked 
        // so the player can click another icon
        if (firstClicked.Text == secondClicked.Text)
        {
            firstClicked = null;
            secondClicked = null;
            return;
        }

        // If the player gets this far, the player 
        // clicked two different icons, so start the 
        // timer (which will wait three quarters of 
        // a second, and then hide the icons)
        timer1.Start();
    }
}

        ' If the player gets this far, the timer isn't 
        ' running and firstClicked isn't Nothing, 
        ' so this must be the second icon the player clicked
        ' Set its color to black
        secondClicked = clickedLabel
        secondClicked.ForeColor = Color.Black

        ' If the player clicked two matching icons, keep them 
        ' black and reset firstClicked and secondClicked 
        ' so the player can click another icon
        If firstClicked.Text = secondClicked.Text Then
            firstClicked = Nothing
            secondClicked = Nothing
            Exit Sub
        End If

        ' If the player gets this far, the player 
        ' clicked two different icons, so start the 
        ' timer (which will wait three quarters of 
        ' a second, and then hide the icons)
        Timer1.Start()
    End If
End Sub

重要

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

Programming language control for Microsoft Learn

if ステートメントは、プレーヤーがクリックした 1 つ目のラベルのアイコンが 2 つ目のラベルのアイコンと同じかどうかをチェックします。アイコンが同じ場合、プログラムは 3 つのステートメントを実行します。最初の 2 つのステートメントは、firstClicked と secondClicked の参照変数をリセットします。それらはラベルを追跡しなくなります。 3 つ目のステートメントは return ステートメントで、メソッドの残りのステートメントを実行せずにスキップします。

プログラムを実行して、フォーム上の正方形の選択を開始します。

Screenshot of the Matching Game that you create in this tutorial.

一致しないペアを選択した場合、タイマーの Tick イベントがトリガーされます。両方のアイコンが非表示になります。

一致したペアを選択した場合、新しい if ステートメントが実行されます。 return ステートメントにより、メソッドはタイマーを開始するコードをスキップします。アイコンは表示されたままになります。

プレーヤーが勝利したかどうかを確認する

楽しいゲームを作成しました。プレーヤーが勝利したら、ゲームを終了する必要があります。このセクションでは、プレーヤーが勝利したかどうかを確認するメソッドを追加します。

CheckForWinner() メソッドをコードの下部、timer1_Tick() イベントハンドラーの下に追加します。

/// <summary>
/// Check every icon to see if it is matched, by 
/// comparing its foreground color to its background color. 
/// If all of the icons are matched, the player wins
/// </summary>
private void CheckForWinner()
{
    // Go through all of the labels in the TableLayoutPanel, 
    // checking each one to see if its icon is matched
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        Label iconLabel = control as Label;

        if (iconLabel != null) 
        {
            if (iconLabel.ForeColor == iconLabel.BackColor)
                return;
        }
    }

    // If the loop didn’t return, it didn't find
    // any unmatched icons
    // That means the user won. Show a message and close the form
    MessageBox.Show("You matched all the icons!", "Congratulations");
    Close();
}

''' <summary>
''' Check every icon to see if it is matched, by 
''' comparing its foreground color to its background color. 
''' If all of the icons are matched, the player wins
''' </summary>
Private Sub CheckForWinner()

    ' Go through all of the labels in the TableLayoutPanel, 
    ' checking each one to see if its icon is matched
    For Each control In TableLayoutPanel1.Controls
        Dim iconLabel = TryCast(control, Label)
        If iconLabel IsNot Nothing AndAlso 
           iconLabel.ForeColor = iconLabel.BackColor Then Exit Sub
    Next

    ' If the loop didn't return, it didn't find 
    ' any unmatched icons
    ' That means the user won. Show a message and close the form
    MessageBox.Show("You matched all the icons!", "Congratulations")
    Close()

End Sub

このメソッドでは、別の foreach ループ (C# の場合) または For Each ループ (Visual Basic の場合) を使用して、TableLayoutPanel 内の各ラベルを処理します。各ラベルのアイコンの色が、背景と同じかどうかを確認します。色が一致する場合は、アイコンが非表示のままになっており、プレーヤーはまだ残りのすべてのアイコンを一致させていないことになります。

この場合、プログラムでは return ステートメントを使用して、メソッドの残りの処理がスキップされます。ループが、return ステートメントを実行することなくすべてのラベルの処理を終了した場合は、フォーム上のすべてのアイコンが一致していることを意味します。プログラムでは、MessageBox を表示してプレーヤーの勝利を通知した後に、Close() メソッドを呼び出してゲームを終了します。

ラベルの Click イベントハンドラーが、新しい CheckForWinner() メソッドを呼び出すようにします。

// If the player gets this far, the timer isn't
// running and firstClicked isn't null, 
// so this must be the second icon the player clicked
// Set its color to black
secondClicked = clickedLabel;
secondClicked.ForeColor = Color.Black;

// Check to see if the player won
CheckForWinner();

// If the player clicked two matching icons, keep them 
// black and reset firstClicked and secondClicked 
// so the player can click another icon
if (firstClicked.Text == secondClicked.Text)
{
    firstClicked = null;
    secondClicked = null;
    return;
}

' If the player gets this far, the timer isn't 
' running and firstClicked isn't Nothing, 
' so this must be the second icon the player clicked
' Set its color to black
secondClicked = clickedLabel
secondClicked.ForeColor = Color.Black

' Check to see if the player won
CheckForWinner()

' If the player clicked two matching icons, keep them 
' black and reset firstClicked and secondClicked 
' so the player can click another icon
If firstClicked.Text = secondClicked.Text Then
    firstClicked = Nothing
    secondClicked = Nothing
    Exit Sub
End If

必ず、プログラムでは、プレーヤーがクリックした 2 つ目のアイコンを表示したらすぐに、勝者をチェックするようにしてください。クリックされた 2 つ目のアイコンの色を設定している行を探して、そのすぐ後で CheckForWinner() メソッドを呼び出します。

プログラムを保存し、実行します。ゲームを実行し、すべてのアイコンを一致させます。勝利すると、プログラムでお祝いのメッセージが表示されます。

[OK] を選択すると、絵合わせゲームが閉じます。

その他の機能を試す

絵合わせゲームが完成しました。さらに機能を追加して、ゲームをもっと難しくて楽しいものにできます。いくつかの方法を紹介します。

アイコンおよび色を、選択したものに置き換えます。

ラベルの Forecolor プロパティを確認してください。
プレーヤーが勝利するまでにかかる時間の長さを追跡するゲームタイマーを追加します。

フォームに、経過時間を示すラベルを追加できます。 TableLayoutPanel の上に配置します。時間を数えるための別のタイマーをフォームに追加します。プレーヤーがゲームを開始するとタイマーを開始し、最後の 2 つのアイコンが一致した後にタイマーを停止するコードを使用します。
プレーヤーが一致を見つけたときのサウンド、プレーヤーが一致しない 2 つのアイコンを表示したときの別のサウンド、およびプログラムでアイコンが再度非表示になるときの 3 つ目のサウンドを追加します。

サウンドを再生するには、System.Media 名前空間を使用できます。詳細については、「Play Sounds in Windows Forms App (C#)」(Windows フォームアプリでサウンドを再生する (C#)) または「How To Play Audio In Visual Basic」(Visual Basic でオーディオを再生する方法) をご覧ください。
ボードを拡大して、ゲームをより難しくします

TableLayoutPanel に、行と列を追加する以上のことが必要になります。また、作成するアイコンの数を検討する必要もあります。
プレーヤーの反応が遅い場合に最初のアイコンを非表示にして、ゲームをもっと難しくすることもできます。

次のステップ

お疲れさまでした。このチュートリアルシリーズが完了しました。 Visual Studio IDE で、次のプログラミングタスクと設計タスクを行いました。

アイコンなどのオブジェクトを、リストに格納しました
リストに対して反復処理をするために、C# または Visual Basic でループを使用しました
参照変数を使用して、状態を追跡しました
複数のオブジェクトに対するイベントに応答するために、イベントハンドラーを構築しました
カウントダウンを行い、イベントを発生させるタイマーを追加しました

Windows フォームデザイナーについて詳しくは、次の記事をご覧ください。

チュートリアル: Windows フォームデザイナーを使ってみる

次の方法で共有