【C# WinForms入門】じゃんけんゲーム作成チュートリアル (テキスト表示から画像表示まで)

2025年10月8日

C#の学習において、コンソールアプリケーションから一歩進んで、ボタンや画像があるグラフィカルなアプリケーション（GUIアプリ）を作ってみたいと思う方も多いでしょう。

この記事では、GUIアプリ開発の入門として非常に人気のあるWindows Formsを使い、誰でも知っている「じゃんけんゲーム」をゼロから作成する手順を、基本から応用まで段階的に解説します。

Part 1: じゃんけんアプリケーションの画面を作ろう

まずは、Visual Studioを使ってじゃんけんゲームの画面（フォーム）をデザインします。

Step 1: プロジェクトの作成

Visual Studioを起動し、「新しいプロジェクトの作成」を選択します。
プロジェクトの種類で「Windows Formsアプリ (.NET Framework)」を選び、プロジェクト名（例: JankenGame）を付けて作成します。
Form1.cs [デザイン] という画面が表示されたら準備完了です。

Step 2: コントロールを配置する

左側にある「ツールボックス」から、以下のコントロールをフォームの上にドラッグ＆ドロップで配置していきます。最初は文字だけで結果を表示するシンプルな画面を作ります。

自分の手を選ぶボタン (Button)
- Buttonを3つ配置します。
- それぞれのTextプロパティを、プロパティウィンドウで「グー」「チョキ」「パー」に変更します。
- Nameプロパティも、それぞれ「rockButton」「scissorsButton」「paperButton」に変更しておくと、後でコードが分かりやすくなります。
結果表示エリア (Label)
- Labelを4つ配置します。
- Textプロパティをそれぞれ「あなたの手」「コンピューターの手」「結果」「-」とします。
- 「コンピューターの手」の隣にあるラベルのNameを「computerHandLabel」に、「結果」の隣にある「-」のラベルのNameを「resultLabel」に変更します。

これで画面の準備は完了です。

Part 2: じゃんけんアプリのコードを編集しよう（テキスト表示編）

次に、ボタンが押されたときにゲームが進行するようにC#のコードを記述していきます。

Step 1: ボタンのクリックイベントを作成する

デザイン画面で、配置した「グー」ボタンをダブルクリックします。すると、Form1.csのコードが表示され、rockButton_Clickというメソッドが自動的に作成されます。これが「グー」ボタンがクリックされたときに実行される処理の塊です。

同様に、「チョキ」ボタン、「パー」ボタンもダブルクリックして、それぞれのクリックイベントメソッドを作成しておきましょう。

Step 2: ゲームのロジックを実装する

各ボタンのクリックイベントから、共通のPlayGameメソッドを呼び出す形にすることで、コードの重複をなくし、スッキリと記述できます。

以下に、じゃんけんゲームのロジック全体を実装したForm1.csの完全なコードを示します。

using System;
using System.Windows.Forms;

namespace JankenGame
{
    public partial class Form1 : Form
    {
        // 0:グー, 1:チョキ, 2:パー
        private const int HandRock = 0;
        private const int HandScissors = 1;
        private const int HandPaper = 2;

        // Randomクラスのインスタンスをクラスのフィールドとして保持
        private Random random = new Random();

        public Form1()
        {
            InitializeComponent();
        }

        private void rockButton_Click(object sender, EventArgs e)
        {
            PlayGame(HandRock);
        }

        private void scissorsButton_Click(object sender, EventArgs e)
        {
            PlayGame(HandScissors);
        }

        private void paperButton_Click(object sender, EventArgs e)
        {
            PlayGame(HandPaper);
        }

        /// <summary>
        /// じゃんけんのメイン処理
        /// </summary>
        /// <param name="playerHand">プレイヤーが出した手 (0:グー, 1:チョキ, 2:パー)</param>
        private void PlayGame(int playerHand)
        {
            // 1. コンピューターの手をランダムに決める
            int computerHand = random.Next(3); // 0, 1, 2のいずれか

            // 2. コンピューターの手に応じてUIのテキストを更新
            UpdateComputerUI(computerHand);

            // 3. 勝敗を判定する
            string resultText;
            int result = (playerHand - computerHand + 3) % 3;
            
            if (result == 0) // あいこ
            {
                resultText = "あいこ";
            }
            else if (result == 2) // 勝ち
            {
                resultText = "あなたの勝ち！";
            }
            else // 負け (result == 1)
            {
                resultText = "あなたの負け";
            }

            // 4. 結果をラベルに表示
            resultLabel.Text = resultText;
        }

        /// <summary>
        /// コンピューターの手に応じてUIのテキストを更新する
        /// </summary>
        /// <param name="hand">コンピューターの手</param>
        private void UpdateComputerUI(int hand)
        {
            string handText = "";
            switch (hand)
            {
                case HandRock:
                    handText = "グー";
                    break;
                case HandScissors:
                    handText = "チョキ";
                    break;
                case HandPaper:
                    handText = "パー";
                    break;
            }
            // ラベルのテキストを更新
            computerHandLabel.Text = handText;
        }
    }
}

この時点でプログラムを実行すると、文字だけでじゃんけんゲームが遊べるはずです。

応用編：画像で結果を表示しよう

基本のゲームが完成したら、次は応用としてコンピューターの手を画像で表示する機能を追加してみましょう。

Step 1: UIと画像の準備

PictureBoxの配置: デザイン画面に戻り、ツールボックスからPictureBoxをフォームの好きな位置に追加します。Nameプロパティを「computerHandPictureBox」に設定します。
画像の用意:
- ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」→「新しいフォルダー」でImagesフォルダーを作成します。
- グー・チョキ・パーの画像（例: rock.png, scissors.png, paper.png）を用意し、このImagesフォルダーにドラッグ＆ドロップで追加します。
- 追加した3つの画像をそれぞれ選択し、プロパティウィンドウで**「出力ディレクトリにコピー」を「新しい場合はコピー」に変更します**。

Step 2: コードの修正

UpdateComputerUIメソッドを修正し、ラベルのテキスト更新に加えて、PictureBoxの画像も切り替える処理を追加します。

UpdateComputerUIメソッドの修正後

private void UpdateComputerUI(int hand)
{
    string handText = "";
    string imagePath = ""; // 画像のパスを格納する変数を追加

    switch (hand)
    {
        case HandRock:
            handText = "グー";
            imagePath = "Images/rock.png"; // グーの画像パス
            break;
        case HandScissors:
            handText = "チョキ";
            imagePath = "Images/scissors.png"; // チョキの画像パス
            break;
        case HandPaper:
            handText = "パー";
            imagePath = "Images/paper.png"; // パーの画像パス
            break;
    }
    // ラベルのテキストを更新
    computerHandLabel.Text = handText;

    // PictureBoxの画像を設定し、サイズをPictureBoxに合わせる
    computerHandPictureBox.ImageLocation = imagePath;
    computerHandPictureBox.SizeMode = PictureBoxSizeMode.Zoom;
}

わずかなコード修正で、ゲームがよりリッチになりました。