RGBカラーゲーム

1. アプリ概要

表示された色のRGB値を3スライダーで合わせて正確さを競うゲーム。色の知識と数値感覚を鍛える。

このアプリはgamesカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）、難易度は ★★☆ です。

このアプリは「ゲーム」カテゴリです。ゲーム実装は GUI イベント処理・状態管理・描画ループを同時に学べる教材で、画面・入力・ロジックの三層分離の感覚が掴めます。tkinter（標準ライブラリ） を活かして実装するこの構造は、他のアプリにも応用が効きます。

コードを読む前に実行することをおすすめします。動いている挙動を先に把握しておくと、解説で出てくる関数や処理がどこに対応するかが頭に入りやすくなります。

応用のヒントは、機能を 1 つ増やす・見た目を整える・例外を一つでも丁寧に扱う、のいずれかから始めるのがおすすめです。

2. 機能一覧

• 「判定」ボタン（judge()）・「次のお題」ボタン（new_round()）で操作
• ウィンドウはタイトル「RGBカラーゲーム」・サイズ 640x520 で起動

3. 事前準備・環境

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は標準ライブラリの範囲で動作する想定ですが、未検証です。

• Python 3.10 以上
• OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

import tkinter as tk
from tkinter import ttk, messagebox
import random


class App093:
    """RGBカラーゲーム"""

    def __init__(self, root):
        self.root = root
        self.root.title("RGBカラーゲーム")
        self.root.geometry("640x520")
        self.root.minsize(640, 520)
        self.root.configure(bg="#f8f9fc")
        self.target = (0, 0, 0)
        self.score = 0
        self.rounds = 0
        self._build_ui()
        self.new_round()

    def _build_ui(self):
        """UIを構築する"""
        title_frame = tk.Frame(self.root, bg="#3776ab", pady=10)
        title_frame.pack(fill=tk.X)
        tk.Label(
            title_frame, text="RGBカラーゲーム",
            font=("Noto Sans JP", 16, "bold"),
            bg="#3776ab", fg="white"
        ).pack()

        main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=20, pady=20)
        main_frame.pack(fill=tk.BOTH, expand=True)

        # ターゲット色とプレビュー色を並べる
        color_frame = tk.Frame(main_frame, bg="#f8f9fc")
        color_frame.pack(fill=tk.X, pady=(0, 10))

        target_box = tk.Frame(color_frame, bg="#f8f9fc")
        target_box.pack(side=tk.LEFT, expand=True, fill=tk.BOTH, padx=4)
        tk.Label(target_box, text="お題の色", bg="#f8f9fc", font=("Noto Sans JP", 11)).pack()
        self.target_canvas = tk.Canvas(target_box, height=120, bg="black", highlightthickness=1)
        self.target_canvas.pack(fill=tk.X)

        guess_box = tk.Frame(color_frame, bg="#f8f9fc")
        guess_box.pack(side=tk.LEFT, expand=True, fill=tk.BOTH, padx=4)
        tk.Label(guess_box, text="あなたの色", bg="#f8f9fc", font=("Noto Sans JP", 11)).pack()
        self.guess_canvas = tk.Canvas(guess_box, height=120, bg="black", highlightthickness=1)
        self.guess_canvas.pack(fill=tk.X)

        # スライダー群
        slider_frame = ttk.LabelFrame(main_frame, text="RGB スライダー", padding=10)
        slider_frame.pack(fill=tk.X, pady=(0, 10))

        self.r_var = tk.IntVar(value=0)
        self.g_var = tk.IntVar(value=0)
        self.b_var = tk.IntVar(value=0)
        for i, (label, var, color) in enumerate(
            (("R", self.r_var, "#dc3545"), ("G", self.g_var, "#28a745"), ("B", self.b_var, "#3776ab"))
        ):
            tk.Label(slider_frame, text=label, fg=color, bg="#f8f9fc", font=("Arial", 11, "bold")).grid(row=i, column=0, sticky="w")
            scale = ttk.Scale(slider_frame, from_=0, to=255, variable=var, command=lambda e: self._update_guess())
            scale.grid(row=i, column=1, sticky="ew", padx=8)
            val_lab = tk.Label(slider_frame, textvariable=var, width=4, bg="#f8f9fc")
            val_lab.grid(row=i, column=2)
        slider_frame.columnconfigure(1, weight=1)

        # 操作・スコア
        bottom = tk.Frame(main_frame, bg="#f8f9fc")
        bottom.pack(fill=tk.X)
        ttk.Button(bottom, text="判定", command=self.judge).pack(side=tk.LEFT, padx=4)
        ttk.Button(bottom, text="次のお題", command=self.new_round).pack(side=tk.LEFT, padx=4)
        self.info_label = tk.Label(bottom, text="", bg="#f8f9fc", font=("Noto Sans JP", 11))
        self.info_label.pack(side=tk.LEFT, padx=10)

        self.score_label = tk.Label(main_frame, text="スコア: 0 / 0回", bg="#f8f9fc", font=("Noto Sans JP", 11, "bold"))
        self.score_label.pack(anchor="e", pady=(8, 0))

    def new_round(self):
        """新しいお題色を生成"""
        self.target = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
        self.target_canvas.config(bg=self._to_hex(*self.target))
        self.r_var.set(0)
        self.g_var.set(0)
        self.b_var.set(0)
        self._update_guess()
        self.info_label.config(text=f"目標: ?, ?, ?", fg="#333")

    def _update_guess(self):
        """プレビュー色を更新"""
        rgb = (self.r_var.get(), self.g_var.get(), self.b_var.get())
        self.guess_canvas.config(bg=self._to_hex(*rgb))

    def judge(self):
        """正答との差を採点"""
        rgb = (self.r_var.get(), self.g_var.get(), self.b_var.get())
        diff = sum(abs(a - b) for a, b in zip(rgb, self.target))
        # 0(完全一致) ～ 765(最大) → 100点満点
        accuracy = max(0, 100 - int(diff / 7.65))
        self.score += accuracy
        self.rounds += 1
        self.info_label.config(
            text=f"目標 RGB({self.target[0]},{self.target[1]},{self.target[2]}) / 差 {diff} / 正確さ {accuracy}点",
            fg="#28a745" if accuracy >= 80 else ("#fd7e14" if accuracy >= 50 else "#dc3545")
        )
        avg = self.score / max(1, self.rounds)
        self.score_label.config(text=f"スコア: {self.score} / {self.rounds}回（平均 {avg:.1f}）")

    @staticmethod
    def _to_hex(r, g, b):
        """RGB値を16進カラー文字列へ"""
        return f"#{int(r):02x}{int(g):02x}{int(b):02x}"


if __name__ == "__main__":
    root = tk.Tk()
    app = App093(root)
    root.mainloop()

5. コード解説

RGBカラーゲームのコードを、実際に書かれている実装に沿って解説します。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

1. 1
   ファイルを作成する

   新しいファイルを作成して app093.py と保存します。使うのは random・tkinter だけなので、追加インストールは不要です。

2. 2
   クラスの骨格を作る

   App093 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

3. 3
   ウィンドウを設定する

   title("RGBカラーゲーム")・geometry("640x520")・configure(bg="#f8f9fc")・minsize(640, 520) をコンストラクタで設定します。

4. 4
   画面部品を並べる

   _build_ui() の中で、tk.Frame×6・tk.Label×5（ほかにループでも生成）・tk.Canvas×2・ttk.LabelFrame・ttk.Scale（ループで生成）・ttk.Button×2 を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

5. 5
   イベントを接続する

   「2. 機能一覧」で挙げた各ボタンを command= で対応するメソッド（judge()・new_round()）につなぎます。

6. 6
   中心になるメソッドを実装する

   アプリの本体である judge()（14行）・new_round()（9行）・_update_guess()（4行） を実装します。

7. 7
   動作確認する

   python app093.py で起動し、各ボタンが反応することを確認します。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。

8. よくある問題と解決法

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。色の見え方には個人差があり、画面の設定によっても変わります。点が伸びないのは腕前だけの問題ではありません。スコアは self.score と self.rounds（16〜17行）に足されるだけで、保存する処理はありません。ウィンドウを閉じると記録は消えます。

1. 課題1：同じお題では1回だけ判定できるようにする

   「判定」は何度でも押せて、そのたびに点と回数が増えます（99〜100行）。スライダーを合わせてから続けて押すと、同じお題で高得点を何回でも積み増せます。judge() には、そのお題を判定済みかどうかを覚えておく仕組みがありません。

   期待結果：同じお題で「判定」を2回押すと、2回目は「このお題はもう判定しました」と出て、スコア表示の回数が増えない

   合格条件

   • 「次のお題」（71行）を押したあとは、また1回だけ判定できる
   • 判定済みでもスライダーは動かせて、「あなたの色」の表示は変わる（88〜91行）
   • 1つのお題につき self.score と self.rounds が1回だけ増える

   ヒント①（どこを触るか）: 触るのは3か所です。__init__ の17行の下、new_round() の86行の下、judge() の先頭（95行の手前）です。
   ヒント②（使うもの）: 覚えておく変数は self.judged = False の1つで足ります。new_round() の最後では False に戻してください。judge() の先頭は if self.judged: で始め、self.info_label.config(text="このお題はもう判定しました") を出して return します。ガードを抜けた直後の行が self.judged = True の置き場所です。
   つまずきやすい点: True へ変える行は106行の下に置いても動きます。ただし先頭のガードのすぐ下に書くほうが、判定済みにする条件が1か所にまとまって読みやすくなります。17行の下の初期化は、19行で new_round() を呼ぶため省いても動作は同じです。それでも __init__ を読むだけで持ち物が分かるので、書いておくことをおすすめします。

2. 課題2：スコアを最初から数え直せるようにする

   self.score と self.rounds は増える一方で、0へ戻す場所がどこにもありません（99〜100行）。一度大きく外すと平均点（105〜106行）が下がったままになります。数え直すにはアプリを閉じて起動し直すしかありません。

   期待結果：何回か判定したあとに「はじめから」を押すと、表示が「スコア: 0 / 0回」に戻り、新しいお題が出る

   合格条件

   • self.score と self.rounds の両方が0に戻る
   • 押したあとの最初の判定で「1回」と表示される（106行の平均も1回ぶんで計算される）
   • お題が新しくなり、3本のスライダーが0に戻る（80〜85行）

   ヒント①（どこを触るか）: 触るのは2か所です。71行の「次のお題」ボタンの隣にボタンを1つ足すところと、そのボタンから呼ぶメソッドを自分で書くところです。
   ヒント②（使うもの）: ボタンの書き方は70〜71行と同じです。ttk.Button(bottom, text="はじめから", command=self.reset_game).pack(side=tk.LEFT, padx=4) の形になります。メソッドの中身は self.score = 0・self.rounds = 0・self.score_label.config(...)・self.new_round() の4行で足ります。
   つまずきやすい点: command=self.reset_game() とカッコを付けると、ボタンを作った時点で1回動いてしまいます。カッコは付けません。また75行の初期表示に平均のカッコは無く、106行の表示には付きます。リセット後にどちらの形へそろえるかを先に決めてください。

3. 課題3：保存機能の追加

   処理結果をファイルに保存する機能を追加しましょう。