チュートリアル: 絵合わせゲーム WinForms アプリに参照変数とタイマー コントロールを追加する
4 つのチュートリアルからなるこのシリーズでは、プレーヤーが非表示のアイコンのペアを一致させる、絵合わせゲームを構築します。
絵合わせゲームでは、プレーヤーがどの Label コントロールを選択したかを追跡する必要があります。 プレーヤーが最初のラベルを選択した後、プログラムはアイコンを表示します。 2 つ目のラベルが選択されると、プログラムは両方のアイコンを短時間表示します。 その後、両方のアイコンが非表示になります。
プログラムは、 "参照変数" を使用して、最初と 2 番目に選ばれたラベルを追跡します。 タイマーは、アイコンを非表示にし、アイコンをどのくらいの長さ表示するかを制御します。
- ラベルの参照を追加する
- タイマーを追加する
前提条件
このチュートリアルは、前のチュートリアルである「絵合わせゲームを作成する」と「絵合わせゲームにアイコンを追加する」を基礎としています。 先にこれらのチュートリアルを完了してください。
ラベルの参照の追加
このセクションでは、コードに 2 つの "参照変数" を追加します。 これらは、Label オブジェクトを追跡、つまり参照します。
次のコードを使用して、フォームにラベルの参照を追加します。
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 コード スニペットのいずれかを表示します。
new
キーワードがないので、これらのステートメントは Label コントロールをフォーム上に表示しません。
プログラムが開始すると、firstClicked
と secondClicked
は両方とも、C# の場合は null
に、Visual Basic の場合は Nothing
に設定されます。
新しい
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; } } }
プログラムを保存し、実行します。 いずれかのラベル コントロールをクリックすると、そのアイコンが表示されます。 次のラベル コントロールをクリックすると、何も起こらないことに気付きます。
選択された最初のアイコンだけが表示されます。 その他のアイコンは表示されません。
プログラムでは、プレーヤーが選択した最初のラベルが既に追跡されています。
参照変数 firstClicked
は null
(C# の場合) または Nothing
(Visual Basic の場合) ではありません。
if
ステートメントで、firstClicked
が null
または Nothing
と等しくないと判断された場合、該当するステートメントが実行されます。
タイマーの追加
Matching Game アプリでは、Timer コントロールが使用されます。 タイマーは待機し、 "ティック" と呼ばれるイベントを発生します。 タイマーはアクションを開始したり、アクションを定期的に実行したりすることができます。
プログラムでは、プレーヤーはタイマーによって 2 つのアイコンを選択できるようになります。 アイコンが一致しない場合、短時間ののち、2 つのアイコンが再び非表示になります。
[ツールボックス] タブを選択して、 [コンポーネント] カテゴリで [タイマー] コンポーネントをダブルクリックするか、フォームにドラッグします。 timer1 という名のタイマー アイコンが、フォームの下のスペースに表示されます。
Timer1 アイコンを選択して、タイマーを選択します。 [プロパティ] ウィンドウで、 [プロパティ] ボタンを選択してプロパティを表示します。
Interval プロパティを、750 ミリ秒を意味する 750 に設定します。
Interval プロパティは、ティック間の待機時間 (Tick イベントのトリガーまでの待機時間) をタイマーに指示します。 プログラムは Start() メソッドを呼び出して、プレーヤーが 2 つ目のラベルを選択した後にのみタイマーが開始されるようにします。
タイマー コントロール アイコンを選択して 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 の場合) にリセットします。
コード エディターに移動し、
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()
コードと置き換えてください。
置き換えないと、コード ブロックが重複することになります。
- プログラムを保存し、実行します。 正方形を選択すると、アイコンが表示されます。 別の正方形を選択します。 アイコンが一時的に表示され、その後、両方のアイコンが非表示になります。
選択した最初と 2 番目のアイコンは、プログラムによって追跡されます。 プログラムは、アイコンを非表示にする前にタイマーを使用して一時停止します。
次のステップ
次のチュートリアルに進み、絵合わせゲームを完成させる方法を学習してください。