チュートリアル: 絵合わせゲーム WinForms アプリにアイコンを追加する
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" };
重要
このページの右上にあるプログラミング言語のコントロールを使用して、C# コード スニペットまたは Visual Basic コード スニペットのいずれかを表示します。
C# を使用している場合は、必ず開始中かっこの後の、クラス宣言 (public partial class Form1 : Form) のすぐ後に、コードを配置してください。 Visual Basic を記述している場合は、クラス宣言 (Public Class Form1) のすぐ後にコードを配置します。
リスト オブジェクトを使用してさまざまな項目を追跡できます。 リストでは、数値、true/false 値、テキスト、またはその他のオブジェクトを保持できます。 絵合わせゲームでは、リスト オブジェクトには 16 個の文字列が含まれています。TableLayoutPanel パネルの各セルに対して 1 つずつです。 各文字列は、ラベル内のアイコンに対応する 1 文字です。 これらの文字は、バス、自転車などの Webdings フォントとして表示されます。
Note
リストは、必要に応じて縮小および拡大できます。このプログラムではこの点が重要になります。
リストの詳細については、List<T> を参照してください。 C# の例については、「基本のリストの例」を参照してください。 Visual Basic の例については、「単純なコレクションを使用する」を参照してください。
各ラベルへのランダムなアイコンの割り当て
プログラムが実行されるたびに、AssignIconsToSquares() メソッドを使用してフォーム上の Label コントロールにアイコンがランダムに割り当てられます。
このコードでは、C# の場合は foreach キーワード、Visual Basic の場合は For Each キーワードを使用します。
AssignIconsToSquares()メソッドを追加します。/// <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); } } }
このコードを、前のセクションで追加したコードのすぐ下に入力します。
注意
1 つの行が意図的にコメント アウトされています。 この行はこの手順の後半で追加します。
AssignIconsToSquares() メソッドが、TableLayoutPanel の各ラベル コントロールに対して反復処理されます。
それぞれに対して同じステートメントを実行します。
ステートメントは、リストからアイコンをランダムに取得します。
- 最初の行では、control 変数を iconLabel という名前のラベルに変換しています。
- 2 行目は、変換が機能したことを確認するための
ifステートメントです。 変換が成功した場合は、ifステートメント内のステートメントが実行されます ifステートメントの最初の行では、randomNumber という名前の変数を作成し、icons リスト内の項目のいずれかに対応する乱数をこの変数に格納します。 Random オブジェクトの Next() メソッドを使用しています。Nextメソッドは乱数を返します。 またこの行では、icons リストの Count プロパティを使用して、乱数を選択する範囲を決定しています。- 次の行では、icons リストのいずれかの項目をラベルの Text プロパティに割り当てています。
- 次の行は、アイコンを非表示にします。 ここでは、先に進む前にコードの残りの部分を検証できるようにするため、この行はコメント アウトされています。
ifステートメントの最後の行で、フォームに追加したアイコンをリストから削除しています。
AssignIconsToSquares()メソッドの呼び出しを、Form1 "コンストラクター" に追加します。 このメソッドは、ゲーム ボードにアイコンを配置します。 コンストラクターは、オブジェクトを作成する時に呼び出されます。public Form1() { InitializeComponent(); AssignIconsToSquares(); }Visual Basic の場合、
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 プロパティと同じ色に設定できます。
プログラムを停止する。 ループ内の、コメント アウトされた行のコメント マークを削除します。
もう一度プログラムを実行すると、アイコンが消えたように見えます。 青い背景だけが表示されます。 実際には、アイコンはランダムに割り当てられていてそこにあります。
イベント ハンドラーをラベルに追加する
この絵合わせゲームでは、プレイヤーは非表示のアイコンを 1 つ表示し、次に 2 つ目のアイコンを表示します。 アイコンが一致した場合は、表示されたままになります。 一致しない場合、両方のアイコンが再び非表示なります。
ゲームをこのように動作させるには、選択したラベルの色を背景色と一致するように変化させる Click イベント ハンドラーを追加します。
Windows フォーム デザイナーでフォームを開きます。 Form1.cs または Form1.vb を選択して、 [ビュー]>[デザイナー] を選択します。
最初のラベル コントロールを選択し、それをダブルクリックして label1 _Click() という
Clickイベント ハンドラーをコードに追加します。そして、Ctrl キーを押しながら他のラベルを 1 つずつ選択します。 すべてのラベルが選択されていることを確認します。
[プロパティ] ウィンドウで、稲妻の [イベント] ボタンを選択します。 [クリック] イベントに対して、ボックス内の [label1_Click] を選択します。
Enter キーを選択します。 IDE で、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; } }
注意
label1_Click() コード ブロックを手動で入力せずにコピーして貼り付ける場合は、既存の label1_Click() コードと置き換えてください。
置き換えないと、コード ブロックが重複することになります。
[デバッグ]>[デバッグの開始] を選択してプログラムを実行します。 青色の背景の空のフォームが表示されます。 フォーム内の任意のセルを選択します。 1 つのアイコンが表示されます。 フォーム内のさまざまな場所でクリックし続けます。 アイコンをクリックすると、そのアイコンが表示されます。
次のステップ
次のチュートリアルに進み、タイマーを使用してラベルを変更する方法を学習してください。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示