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

こんにちは、今回は2種類目のクイズを作っていきたいと思います。

偽物のコインクイズ

・クラシックモードの2つ目のクイズ

・嘘つきパズルと同様に、ルール説明があり、そのあとゲーム画面に移行する。

・ゲーム画面は、画面中央に天秤がある。そして画面上部に5〜10枚のランダムな枚数のコインが配置される。プレイヤーは決められた手数でこの中から偽物のコインを見つけ出す必要がある。

・コインの中に1枚だけ偽物のコインが紛れており、本物のコインと重さが少しだけ違う。（軽いのか重いのかはわからない）

・プレイヤーは、左右の皿に乗せるコインをそれぞれ選び、その結果、左に傾く、右に傾く、釣り合うのいずれかの結果を受け取る。

・この操作を決められた回数行い、偽物のコインを推測する。

・そして正解か不正解かを表示して一連のクイズが終了する。

皿に乗せるコインの選び方は、それぞれの皿の上にグレーアウトしたコインの一覧を表示する。

そのコインをクリックすると、ハイライトされ、その皿に乗せることがわかりやすくなる。

両方の皿に同じコインを乗せることはできない。

どちらの皿にも載せないコインがあっても問題ない。

皿に乗せるコインの枚数は左右で同じにしなくてはならない。

必要手数は、後で手動で計算して実装するので、5〜10枚の場合それぞれに、必要手数を変更できるようなコードにしておいてください。

嘘つきパズルと同様に、タイトルに戻るボタンとルール確認のボタンを実装しておいてください。

今回は1回目のチャットに全ての情報を詰め込んでみました。

あらかじめ全体で何をするかAIが理解していた方が、バグのないコードを書いてくれるのではないかと思ったからです。

しかし、いくつかバグがあったらしく、クイズを開こうとしても何も起こりませんでした。

何かバグが発生しているようです。

ルール説明のモーダルを閉じた後、何も表示されません。

バグの原因が分からないため、Geminiに丸投げしてバグ修正をさせてみました。

大変失礼いたしました。ご指摘の通り、新しく追加した「偽物のコイン」クイズの画面が表示されないという致命的なバグがございました。原因を調査し、修正いたしました。

バグの主な原因

原因は2点ありました。

1. 不正な変数名: ゲームを開始する際に、存在しない変数名（liarGameContainer）で「嘘つきパズル」のゲーム画面を隠そうとしていたため、スクリプトが途中で停止していました。
2. 関数の重複定義: すべてのモーダルを閉じるための関数closeAllModalsを意図せず二重に定義してしまい、無限ループを引き起こす可能性がありました。

これらの問題を修正し、各ゲーム画面の表示・非表示が正しく切り替わるようにコード全体を整理しました。

Geminiの返答がこちらになります。

自力でバグを発見して修正してくれました。

ただ、Geminiが出してきたコードが省略が多く、既存のコードのどこに追加すれば良いかわかりづらかったので、3回目のチャットで以下のように送りました。

このJSファイルを元に、修正後のJSファイルを出力してもらえますか?

現在のScript.jsファイルを添付して、Geminiに全て修正後のコードに書き換えてもらうことにしました。

これならコードが全く書けなくても問題ないですね。

Geminiの返答では、Script.jsファイル全体のコードを修正して出力してくれました。

最後に、手動でCSSを少し修正して完成しました。