GoogleのAI Geminiを使って論理クイズのゲームを作る part4

前回と同じように、1回目のチャットに情報を詰め込んでみます。

次のパズルの実装に移りましょう。

登場人物は4人いて、ユーザーはそのうちの1人になり、自分の帽子の色を推理するゲームです。

---

【ルール】

- 登場人物は A、B、C、D の4人（うち1人がユーザー）

- 各人は「赤」か「青」の帽子をかぶっています（ランダム）

- 各人は他の3人の帽子の色を見ることができますが、自分の帽子の色は見えません

- ただし、ユーザーには **他の3人の帽子の色だけが画面に表示され**、自分の帽子の色は「???」として表示してください

---

【ゲームの流れ】

1. ターン制にしてください。A → B → C → D の順に発言します

2. 各人は自分の帽子が「赤」か「青」かを推理し、

   - わからなければ「まだわからない」と発言します

   - わかった場合は「わかった、私は○色だ」と発言します

3. 各ターン後、ユーザーは「自分の帽子は赤 or 青」と回答するか、スキップして様子を見続けるか選べるようにしてください

4. ユーザーが自分の帽子の色を答えたら、正解かどうかを表示してください

---

【UIの要件】

- シンプルな画面構成にしてください（スマホ対応だと嬉しいです）

- 4人のキャラクター（A～D）を横に並べて表示し、それぞれの帽子の色を表示するスペースを用意してください

  - A, B, C の帽子の色はユーザーに見えるように表示

  - ユーザー自身（Dなど）は「???: ???」のように表示

- その下に「発言ログ」を表示するエリアを用意し、ターンごとの発言を時系列で追えるようにしてください

- ユーザーの回答エリアには：

  - 「赤だと思う」「青だと思う」「まだわからない」3つのボタンを用意してください

- 最後に「正解 / 不正解」や「解説（なぜその色だとわかったか）」を表示するスペースを作ってください

---

帽子は6つの中から4つが選ばれた設定にしてください。

例（青4、赤2）からABCDの4人に青青赤赤のような感じ。

選ばれる前の帽子一覧を表示して、何色の帽子が最大でいくつあるのか分かるようにしてください。

簡単すぎないように、発言をみなくても他の人の帽子だけをみて答えがわかるパズルは排除してください。

前回と同様、これだけでとりあえず動くレベルのクイズを出してきました。

ただ、前回と違い、内部で保存するデータ量が多く、CPUプレイヤーの発言生成ロジックなど、複雑な部分があったため、完璧なパズルにはなりませんでした。

現時点では、ランダムに問題を生成させて、整合性を確認するのは複雑すぎると判断したため、前もって問題を用意していく方法をとることにしました。

問題生成と、CPUの発言についてもう少し調整しましょう。

ただ、このロジックはかなり複雑なので、問題を最初から用意しておいてランダムに表示する方式の方がうまくいくかもしれません。

3個ほど、正しく解ける問題を書くので、それをランダムに表示する機能に変えてください。

帽子プールで青はB、赤はRと表記します。

問題1

帽子プールB3R3

ABCD

BBRR

発言

Aわからない

Bわからない

Cわからない

D（プレイヤー）

この時点でプレイヤーは自分の帽子が赤だとわかります。

青、わからないは不正解、赤は正解

問題2

帽子プールB4R2

ABCD

RRBB

発言

Aわからない

Bプレイヤー

Cわかった

Dわかった

Aわかった

Bプレイヤー

プレイヤーは1回目で特定することはできません。

2回目で自分が赤だとわかります。

そのため、1回目は回答したら不正解、2回目は赤でなければ不正解

問題3

帽子プールB1R5

ABCD

RRRR

発言

Aわからない

Bわかった

Cプレイヤー

この時点でプレイヤーは自分の帽子が赤だとわかります。

青、わからないは不正解、赤は正解

Dは答える順番が回ってきません。

これらを色を反転して2倍にかさ増しして、6個のクイズからランダム出題するようにして。

解説の文言はこっちで入力するから、空欄にしておいて。

こっちが勝手に決めた問題の表し方も、ちゃんと意図を汲んでくれて、内部に問題を保存してランダム出題する方法に変えてくれました。

これだとバグは起こりづらく、正しい問題のみが出題されます。

最初の仕様では、「わからない」を選ぶことで無限に会話を続けることが可能だったため、中央の会話ログがスクロールする方式になっていました。

ただ、問題を用意しておく方式にしたため、「わからない」を選んでも不正解になることがあります。

よって、無限に会話が続くことがなくなったため、スクロールせずに全て表示しても問題ないと判断しました。

問題はこれで大丈夫そう。

会話ログが、スクロールしないと最新が見えないから、そこを修正しよう。

今回の変更で無限に会話が続くことは無くなった。

もう少し縦に伸ばしてもいいから、スクロールしないで全ての会話ログが見えるようにして。

Geminiの返答

承知いたしました。会話ログの表示を修正しますね。

現在のCSSでは、ログエリアの高さが150pxに固定され、内容がはみ出た場合にスクロールする設定（overflow-y: auto）になっていました。

この高さの固定とスクロール設定を解除し、ログの量に合わせてエリアが自動的に広がるように変更します。

---

CSS (style.css) の修正

style.css ファイル内にある #log-area-hat のスタイルを、以下のように書き換えてください。

修正前

CSS

#log-area-hat {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    height: 150px; /* ← 固定の高さ */
    overflow-y: auto; /* ← スクロール設定 */
}

修正後

CSS

#log-area-hat {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    min-height: 100px; /* 空の状態でも最低限の高さを確保 */
    /* heightとoverflow-yの指定を削除 */
}

この修正は style.css ファイルのみで完了します。JavaScriptやHTMLの変更は必要ありません。 これにより、ログエリアは内容全体が表示されるように自動で拡張され、スクロールバーは表示されなくなります。

簡潔にCSSのみの変更で対応してくれました。