チュートリアル: Windows フォームに一致するゲーム アプリを作成する

この 4 つのチュートリアルシリーズでは、一致するゲームを作成します。 プレイヤーは隠しアイコンのペアを見つけます。

これらのチュートリアルを使用して、Visual Studio 統合開発環境 (IDE) の次のタスクについて学習します。

• アイコンなどのオブジェクトを List<T> オブジェクトに格納します。
• C# の foreach ループまたは Visual Basic の For Each ループを使用して、リスト内の項目を反復処理します。
• 参照変数を使用して、フォームの状態を追跡します。
• 複数のオブジェクトで使用できるイベントに応答するイベント ハンドラーを作成します。
• カウントダウンし、開始した後に一度だけイベントが発生するタイマーを作成します。

完了すると、完全なゲームが完成します。

この最初のチュートリアルでは、次の方法を学習します。

[前提条件]

このチュートリアルを完了するには、Visual Studio が必要です。 無料版については、 Visual Studio のダウンロードを参照してください。

Windows フォーム マッチ ゲーム プロジェクトを作成する

ゲームを作成する最初の手順は、Windows フォーム アプリ プロジェクトを作成することです。

Visual Studio によって、アプリの ソリューション が作成されます。 ソリューションは、アプリに必要なプロジェクトとファイルのコンテナーです。

この時点で、Visual Studio は Windows フォーム デザイナーに空のフォームを表示します。

ゲームのレイアウトを作成する

このセクションでは、ゲームの 4 バイ 4 グリッドを作成します。

1. フォームを選択して、Windows フォーム デザイナーを選択します。 このタブには、C# Form1.cs [デザイン] または Visual Basic の [デザイン] Form1.vb が表示されます。 [ プロパティ ] ウィンドウで、次のフォーム プロパティを設定します。

   • Text プロパティを Form1 から Matching Game に変更します。 このテキストはゲーム ウィンドウの上部に表示されます。
   • フォームのサイズを設定します。 これを変更するには、 Size プロパティを 550、550 に設定するか、Visual Studio IDE の下部に正しいサイズが表示されるまでフォームの隅をドラッグします。

2. IDE の左側にある [ ツールボックス ] タブを選択します。 表示されない場合は、メニュー バーから [表示>ツール ボックス ] を選択するか、 Ctrl+Alt+X キーを押します。

3. ツールボックスの TableLayoutPanel] カテゴリから コントロールをドラッグするか、ダブルクリックします。

   [プロパティ] ウィンドウで、パネルに次の プロパティ を設定します。

   • BackColor プロパティを CornflowerBlue に設定します。 このプロパティを設定するには、 BackColor プロパティの横にある下矢印を選択します。 結果のダイアログ ボックスで、[ Web] を選択します。 名前の一覧で [ CornflowerBlue] を選択します。

     注

     色はアルファベット順ではありません。 CornflowerBlue はリストの一番下付近にあります。

   • 下向き矢印を選択し、大きな中央ボタンを選択して、 Dock プロパティを Fill に設定します。 このオプションは、フォーム全体をカバーするようにテーブルを分散します。

   • CellBorderStyle プロパティを Inset に設定します。 この値は、ボード上の各セル間に視覚的な境界線を提供します。

   • TableLayoutPanel の右上隅にある三角形ボタンを選択して、タスク メニューを表示します。 タスク メニューの [行の 追加 ] を 2 回選択して、さらに 2 つの行を追加します。 次に、[ 列の追加] を 2 回選択して、さらに 2 つの列を追加します。

   • タスク メニューの [ 行と列の編集 ] を選択して、[ 列と行のスタイル] ウィンドウを開きます。 各列について、[ パーセント ] オプションを選択し、各列の幅を 25 % に設定します。

   • ウィンドウの上部にある一覧から [行 ] を選択し、各行の高さを 25 % に設定します。

   • 完了したら、[ OK] を 選択して変更を保存します。

TableLayoutPanel は、同じサイズの 16 個の正方形のセルを含む 4 バイ 4 のグリッドになりました。 これらの行と列は、後でアイコンが表示される場所です。

ラベルの追加と書式設定

このセクションでは、ゲーム中に表示されるラベルを作成して書式設定します。

1. フォーム エディターで TableLayoutPanel が選択されていることを確認します。 [プロパティ] ウィンドウの上部に tableLayoutPanel1 が表示されます。 選択されていない場合は、フォームの TableLayoutPanel を選択するか、[ プロパティ ] ウィンドウの上部にある一覧から選択します。

2. 前と同様にツールボックスを開き、[ 共通コントロール] カテゴリを 開きます。 TableLayoutPanel の左上のセルに Label コントロールを追加します。 IDE でラベル コントロールが選択されました。 次のプロパティを設定します。

   • ラベルの BackColor プロパティを CornflowerBlue に設定します。
   • AutoSize プロパティを False に設定します。
   • Dock プロパティを Fill に設定します。
   • プロパティの横にある下矢印ボタンを選択し、中央のボタンを選択して、 TextAlign プロパティを MiddleCenter に設定します。 この値により、アイコンがセルの中央に表示されます。
   • Font プロパティを選択します。 省略記号 (...) ボタンが表示されます。 省略記号を選択し、[ フォント ] の値を [Webdings]、[ フォント スタイル ] を [太字]、 および [サイズ ] を 48 に設定します。
   • ラベルの Text プロパティを文字 c に設定します。

   TableLayoutPanel の左上のセルに、青い背景を中心とする黒いボックスが含まれるようになりました。

   注

   Webdings は、Windows オペレーティング システムに付属するアイコン フォントです。 プレイヤーはマッチングゲームでアイコンのペアを揃えます。 このフォントには、一致するアイコンが表示されます。 Webdings アイコンがフォームに正しく表示されない場合は、フォームのラベルの UseCompatibleTextRendering プロパティをTrue に設定します。

   c の代わりに、Text プロパティで別の文字を試してください。 感嘆符はクモ、大文字のNは目、コンマは唐辛子です。

3. Label コントロールを選択し、TableLayoutPanel の次のセルにコピーします。 Ctrl+C キーを押すか、メニュー バーの >Copy] を選択します。 次に、 Ctrl+V または Edit>Paste を使用して貼り付けます。

   最初のラベルのコピーが TableLayoutPanel の 2 番目のセルに表示されます。

   もう一度貼り付けると、3 番目のセルに別のラベルが表示されます。 すべてのセルが埋まるまで、ラベル コントロールを貼り付け続けます。

この手順では、フォームのレイアウトを完了します。

次のステップ

次のチュートリアルに進み、各ラベルにランダム なアイコンを割り当て、イベント ハンドラーをラベルに追加する方法について説明します。