チュートリアル: 絵合わせゲーム WinForms アプリに参照変数とタイマー コントロールを追加する

  • [アーティクル]

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

絵合わせゲームでは、プレーヤーがどの Label コントロールを選択したかを追跡する必要があります。 プレーヤーが最初のラベルを選択した後、プログラムはアイコンを表示します。 2 つ目のラベルが選択されると、プログラムは両方のアイコンを短時間表示します。 その後、両方のアイコンが非表示になります。

プログラムは、 "参照変数" を使用して、最初と 2 番目に選ばれたラベルを追跡します。 タイマーは、アイコンを非表示にし、アイコンをどのくらいの長さ表示するかを制御します。

  • ラベルの参照を追加する
  • タイマーを追加する

前提条件

このチュートリアルは、前のチュートリアルである「絵合わせゲームを作成する」と「絵合わせゲームにアイコンを追加する」を基礎としています。 先にこれらのチュートリアルを完了してください。

ラベルの参照の追加

このセクションでは、コードに 2 つの "参照変数" を追加します。 これらは、Label オブジェクトを追跡、つまり参照します。

  1. 次のコードを使用して、フォームにラベルの参照を追加します。

    public partial class Form1 : Form
{
    // firstClicked points to the first Label control 
    // that the player clicks, but it will be null 
    // if the player hasn't clicked a label yet
    Label firstClicked = null;

    // secondClicked points to the second Label control 
    // that the player clicks
    Label secondClicked = null;

重要

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

Programming language control for Microsoft Learn

new キーワードがないので、これらのステートメントは Label コントロールをフォーム上に表示しません。 プログラムが開始すると、firstClicked と secondClicked は両方とも、C# の場合は null に、Visual Basic の場合は Nothing に設定されます。

  1. 新しい firstClicked 参照変数を使用するように Click イベント ハンドラーを変更します。 label1_Click() イベント ハンドラー メソッドの最後のステートメント (clickedLabel.ForeColor = Color.Black;) を削除し、次に示す if ステートメントに置き換えます。

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

        // If firstClicked is null, this is the first icon 
        // in the pair that the player clicked,
        // so set firstClicked to the label that the player 
        // clicked, change its color to black, and return
        if (firstClicked == null)
        {
            firstClicked = clickedLabel;
            firstClicked.ForeColor = Color.Black;

            return;
        }
    }
}

  1. プログラムを保存し、実行します。 いずれかのラベル コントロールをクリックすると、そのアイコンが表示されます。 次のラベル コントロールをクリックすると、何も起こらないことに気付きます。

    Screenshot shows the Matching Game showing one icon.

    選択された最初のアイコンだけが表示されます。 その他のアイコンは表示されません。

プログラムでは、プレーヤーが選択した最初のラベルが既に追跡されています。 参照変数 firstClicked は null (C# の場合) または Nothing (Visual Basic の場合) ではありません。 if ステートメントで、firstClicked が null または Nothing と等しくないと判断された場合、該当するステートメントが実行されます。

タイマーの追加

Matching Game アプリでは、Timer コントロールが使用されます。 タイマーは待機し、 "ティック" と呼ばれるイベントを発生します。 タイマーはアクションを開始したり、アクションを定期的に実行したりすることができます。

プログラムでは、プレーヤーはタイマーによって 2 つのアイコンを選択できるようになります。 アイコンが一致しない場合、短時間ののち、2 つのアイコンが再び非表示になります。

  1. [ツールボックス] タブを選択して、 [コンポーネント] カテゴリで [タイマー] コンポーネントをダブルクリックするか、フォームにドラッグします。 timer1 という名のタイマー アイコンが、フォームの下のスペースに表示されます。

    Screenshot shows the timer icon below the form.

  2. Timer1 アイコンを選択して、タイマーを選択します。 [プロパティ] ウィンドウで、 [プロパティ] ボタンを選択してプロパティを表示します。

  3. Interval プロパティを、750 ミリ秒を意味する 750 に設定します。

    Interval プロパティは、ティック間の待機時間 (Tick イベントのトリガーまでの待機時間) をタイマーに指示します。 プログラムは Start() メソッドを呼び出して、プレーヤーが 2 つ目のラベルを選択した後にのみタイマーが開始されるようにします。

  4. タイマー コントロール アイコンを選択して Enter を押すか、タイマーをダブルクリックします。 IDE は、空の Tick イベント ハンドラーを追加します。 このコードを次のコードに置き換えます。

    /// <summary>
/// This timer is started when the player clicks 
/// two icons that don't match,
/// so it counts three quarters of a second 
/// and then turns itself off and hides both icons
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void timer1_Tick(object sender, EventArgs e)
{
    // Stop the timer
    timer1.Stop();

    // Hide both icons
    firstClicked.ForeColor = firstClicked.BackColor;
    secondClicked.ForeColor = secondClicked.BackColor;

    // Reset firstClicked and secondClicked 
    // so the next time a label is
    // clicked, the program knows it's the first click
    firstClicked = null;
    secondClicked = null;
}

Tick イベント ハンドラーは、3 つのことを実行します。

  • Stop() メソッドを呼び出してタイマーを停止します。
  • 2 つの参照変数 firstClicked および secondClicked を使用して、プレーヤーがクリックした 2 つのラベルを再び非表示にします。
  • firstClicked および secondClicked の参照変数を null (C# の場合) または Nothing (Visual Basic の場合) にリセットします。

  1. コード エディターに移動し、label1_Click() イベント ハンドラー メソッドの上部と下部にコードを追加します。 このコードでは、タイマーが有効になっているかどうかを確認し、secondClicked 参照変数を設定して、タイマーを開始します。 label1_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)
{
    // The timer is only on after two non-matching 
    // icons have been shown to the player, 
    // so ignore any clicks if the timer is running
    if (timer1.Enabled == true)
        return;

    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;

        // If firstClicked is null, this is the first icon
        // in the pair that the player clicked, 
        // so set firstClicked to the label that the player 
        // clicked, change its color to black, and return
        if (firstClicked == null)
        {
            firstClicked = clickedLabel;
            firstClicked.ForeColor = Color.Black;
            return;
        }

        // 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 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();
    }
}
  • メソッドの上部のコードは、Enabled プロパティの値をチェックして、タイマーが開始されているかどうかをチェックします。 プレーヤーが 1 つ目と 2 つ目の Label コントロールをクリックした場合はタイマーが開始され、3 つ目のラベルをクリックした場合は何も実行されません。
  • メソッドの下部にあるコードは、2 つ目の Label コントロールを追跡する secondClicked 参照変数を設定します。 そして、ラベル アイコンの色を黒に設定して見えるようにします。 これにより、タイマーがワンショット モードで開始され、750 ミリ秒待機してから、ティックを 1 度発生させます。 タイマーの Tick イベント ハンドラーが 2 つのアイコンを非表示にして、firstClicked および secondClicked の参照変数をリセットします。 フォームは、プレーヤーが他のアイコンのペアを選択する準備ができた状態になります。

注意

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

  1. プログラムを保存し、実行します。 正方形を選択すると、アイコンが表示されます。 別の正方形を選択します。 アイコンが一時的に表示され、その後、両方のアイコンが非表示になります。

選択した最初と 2 番目のアイコンは、プログラムによって追跡されます。 プログラムは、アイコンを非表示にする前にタイマーを使用して一時停止します。

次のステップ

次のチュートリアルに進み、絵合わせゲームを完成させる方法を学習してください。

絵合わせゲームでお祝いメッセージを表示する