次の方法で共有

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

この4つのチュートリアルのシリーズでは、プレイヤーが隠されたアイコンのペアを一致させるゲームを構築します。

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

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

  • ラベル参照を追加します。
  • タイマーを追加します。

前提 条件

このチュートリアルは、前のチュートリアルに基づいています。一致するゲーム アプリケーション を作成し、一致するゲーム にアイコンを追加します。 最初にこれらのチュートリアルを完了します。

ラベル参照を追加する

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

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

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

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

  1. 新しい firstClicked 参照変数を使用するように、Form1.cs または Form1.vb で 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. プログラムを保存して実行します。 いずれかのラベル コントロールを選択すると、そのアイコンが表示されます。 次のラベル コントロールを選択し、何も起こらないことに気づいてください。

    スクリーンショットは、1 つのアイコンを示す照合ゲームを示しています。

    選択した最初のアイコンのみが表示されます。 その他のアイコンは非表示です。

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

タイマーを追加する

照合ゲーム アプリは、Timer コントロールを使用します。 タイマーは待機し、"ティック" と呼ばれるイベントを発生させます。 タイマーは、アクションを開始したり、定期的にアクションを繰り返したりできます。

プログラムでタイマーを使用すると、プレイヤーは 2 つのアイコンを選択できます。 アイコンが一致しない場合は、しばらくすると 2 つのアイコンが再び非表示になります。

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

    スクリーンショットは、フォームの下にタイマー アイコンを示しています。

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

  3. Interval プロパティを 750 (750 ミリ秒)に設定します。

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

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

    /// <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() メソッドを呼び出すことによってタイマーが実行されていないことを確認します。
  • firstClicked と secondClickedの 2 つの参照変数を使用して、プレイヤーが選択した 2 つのラベルのアイコンをもう一度非表示にします。
  • firstClicked と secondClicked 参照変数が C# と Visual Basic の Nothing で null にリセットされます。

  1. コード エディターに移動し、Form1.cs または Form1.vbの 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 番目のラベル コントロールを選択し、タイマーが開始した場合、3 番目のラベルを選択しても何も行われません。
  • メソッドの下部にあるコードは、2 つ目の Label コントロールを追跡するように secondClicked 参照変数を設定します。 次に、ラベル アイコンの色を黒に設定して表示します。 これにより、タイマーがワンショット モードで開始され、750 ミリ秒待機してから、ティックを一度発生させます。 タイマーの Tick イベント ハンドラーは、2 つのアイコンを非表示にし、firstClicked と secondClicked 参照変数をリセットします。 フォームは、プレイヤーが別のアイコンのペアを選択する準備ができています。

手記

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

  1. プログラムを保存して実行します。 四角形を選択すると、アイコンが表示されます。 別の正方形を選択します。 アイコンが短時間表示され、両方のアイコンが消えます。

これで、プログラムは、選択した 1 番目と 2 番目のアイコンを追跡します。 タイマーを使用して、アイコンが消える前に一時停止します。

次の手順

次のチュートリアルに進み、マッチング ゲームを完了する方法を学習してください。

マッチング ゲーム のおめでとうメッセージを表示する