【Winform】絵合わせパズルゲームのチュートリアル

2024年8月25日

このチュートリアルでは、初学者向けにC#とWinFormを使った絵合わせパズルゲームを作成します。このゲームを通じて、基本的なUIの操作やイベント処理、タイマー機能、ランダム化、ファイル操作など、プログラミングの基礎を楽しく学べます。ゲームが完成すると、プレイヤーがカードをクリックしてペアを見つけるシンプルなパズルが動作し、初学者は達成感と共にプログラミングの理解を深められるでしょう。

1. 1. プロジェクトのセットアップ
2. 2. 基本的なUIの配置
3. 3. カードの表示とランダム配置
4. 4. タイマー機能の実装
5. 5. 音とアニメーションの追加（オプション）
6. 6. スコアの保存と読み込み
7. まとめ

1. プロジェクトのセットアップ

Visual Studio を開き、新しい「Windows フォームアプリケーション (.NET Framework)」プロジェクトを作成します。
プロジェクト名を「PictureMatchingGame」にします。
Form1の名前をGameFormに変更し、Textプロパティも「絵合わせパズルゲーム」に設定します。

2. 基本的なUIの配置

TableLayoutPanel をフォームにドラッグアンドドロップし、次のプロパティを設定します:
- Dock: Fill
- ColumnCount: 4
- RowCount: 4
PictureBox を TableLayoutPanel の各セルに配置します。計16個の PictureBox が必要です。プロパティは以下のように設定します:
- SizeMode: StretchImage
- BorderStyle: FixedSingle
- 各 PictureBox の Name プロパティをpictureBox1からpictureBox16まで設定します。
Timer コントロールをフォームに追加し、NameをgameTimerに変更し、Intervalを1000ms（1秒）に設定します。

3. カードの表示とランダム配置

次に、ゲームで使用する画像を準備します。ここでは簡単なシンボルや番号の画像を使います。

Resourcesフォルダに8つの画像を追加します（例: image1.png, image2.png, …, image8.png）。
次に、以下のようにコードを追加して、画像をランダムに配置します。

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;

namespace PictureMatchingGame
{
    public partial class GameForm : Form
    {
        private List<Image> images;
        private PictureBox firstClicked, secondClicked;

        public GameForm()
        {
            InitializeComponent();
            InitializeGame();
        }

        private void InitializeGame()
        {
            // リソースから画像をロード
            images = new List<Image>()
            {
                Properties.Resources.image1,
                Properties.Resources.image2,
                Properties.Resources.image3,
                Properties.Resources.image4,
                Properties.Resources.image5,
                Properties.Resources.image6,
                Properties.Resources.image7,
                Properties.Resources.image8
            };

            // 同じ画像をもう一度追加（ペア作成のため）
            images.AddRange(images);

            // 画像をランダムにシャッフル
            Random rand = new Random();
            images = images.OrderBy(x => rand.Next()).ToList();

            // PictureBox に画像を割り当て
            for (int i = 0; i < tableLayoutPanel1.Controls.Count; i++)
            {
                PictureBox pictureBox = tableLayoutPanel1.Controls[i] as PictureBox;
                pictureBox.Image = images[i];
                pictureBox.Click += PictureBox_Click;
            }

            // カードを隠す
            HideImages();
        }

        private void HideImages()
        {
            foreach (PictureBox pictureBox in tableLayoutPanel1.Controls)
            {
                pictureBox.Image = null;
            }
        }

        private void PictureBox_Click(object sender, EventArgs e)
        {
            // クリックされたPictureBox
            PictureBox clickedBox = sender as PictureBox;

            if (firstClicked != null && secondClicked != null)
                return;

            if (clickedBox.Image != null)
                return;

            int index = tableLayoutPanel1.Controls.IndexOf(clickedBox);
            clickedBox.Image = images[index];

            if (firstClicked == null)
            {
                firstClicked = clickedBox;
            }
            else if (secondClicked == null)
            {
                secondClicked = clickedBox;

                CheckForMatch();
            }
        }

        private void CheckForMatch()
        {
            if (firstClicked.Image == secondClicked.Image)
            {
                firstClicked = null;
                secondClicked = null;
            }
            else
            {
                gameTimer.Start();
            }
        }

        private void gameTimer_Tick(object sender, EventArgs e)
        {
            gameTimer.Stop();
            firstClicked.Image = null;
            secondClicked.Image = null;
            firstClicked = null;
            secondClicked = null;
        }
    }
}