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

こんにちはブログ担当のYです。

前回に引き続き、Geminiを使って論理クイズのゲームの続きを作っていきます。

前回の記事はこちら

今回は、今までのクイズを制限時間内に解く、タイムアタックモードの実装を行います。

1回目のチャット

これまで作ったゲームのファイルがこちらです。

こっちで少し調整した部分があるので、そちらの認識と違う部分があるかもしれません。

これから製作するものは、このファイルを元に作るようにしてください。

では、今回はタイムアタックのモードを作って行きます。

ホーム画面の2つ目のメニューですね。

今まで作った3つのパズルをランダムに出題し、時間内にいくつ解くことができるかというモードにします。

タイムアタック中は、制限時間と今まで解いた問題数を画面に表示したいです。

また、終了時にスコアを表示するようにしてください。

Index.html、style.css、script.jsの現在の状態を把握させるため、Geminiにファイルを渡してみました。

そしてタイムアタックモードを作成すると伝え、大まかな内容を指示しました。

承知いたしました。それでは、新しいゲームモード「タイムアタック」を実装していきましょう！

ご要望に合わせて、以下の機能を追加・変更します。

タイムアタックモードの実装:

メインメニューの「タイムアタック」ボタンから開始します。

制限時間（例: 3分）が設定され、画面上部にタイマーとスコア（解いた問題数）が常に表示されます。

ランダムな問題出題:

これまで作成した「嘘つきパズル」「偽物のコイン」「帽子の色あて」の3種類のクイズから、ランダムに1つが出題されます。

1問正解すると、即座に次のランダムな問題が出題されます。

結果表示:

制限時間がゼロになるとゲームオーバーとなり、最終スコアが表示されます。

この実装のために、既存の各ゲームのロジックに「今はタイムアタックモードである」ということを伝えるための「フック（hook）」を追加し、正解したときの動作を「次の問題に進む」ように変更します。

今回はファイルを渡した直後というのもあってか、重複やエラーの起きないコードを書いてくれました。

ただいくつか修正点があったため、2回目のチャットで修正をします。

クイズとクイズの間が短すぎて、正解したかどうかが分からない
タイトル画面でタイムアタック用のタイマーが表示されてしまう
タイムアタック終了時のスコア表示が消えない

2回目のチャット

いくつか修正があります。

タイムアタック中、問題に正解したり不正解だった場合、帽子の色当てクイズ以外、すぐに次のクイズに進んでしまい、今のクイズが正解だったかどうかがわかりづらいです。

タイトル画面で、タイムアタックを選んでいないのにタイマーと正解数が表示されてしまっています。

タイムアタック終了時、タイトルに戻っても最終スコアの表示が消えません。

また、3分は長いので1分にしましょう。

1回目のチャットで出力されたものの修正を行いました。

また、やってみて3分は長かったので、制限時間を1分にしてみました。

承知いたしました。いくつかのバグ修正と動作の調整を行いますね。

ご指摘の点は以下の通りです。

正解/不正解のフィードバック: タイムアタック中に正解してもすぐに次の問題に進んでしまい、分かりにくい。

HUDの表示バグ: タイトル画面に戻っても、タイマーとスコアの表示が残ってしまう。

結果モーダルの表示バグ: タイムアタック終了後にタイトルに戻っても、最終スコアの画面が消えない。

制限時間の調整: 3分は長いので1分に短縮する。

これらの問題をすべて修正します。

クイズの間に正解、不正解の表示を挟んだことで更なるバグが誘発されました。

それは、回答ボタンを連打することでスコアが水増しできてしまう。ということでした。

また、クラシックモードの嘘つきパズルは間違えても同じ問題に挑戦できましたが、タイムアタックモードでそれを許すと手当たり次第で良くなってしまうため、モードによってクイズの動作を変えさせることにしました。

3回目のチャット

帽子の色当てパズルでも、正解不正解のモーダルを出してください。

また、嘘つきパズルで不正解の場合、もう一度ではなく、不正解のモーダルを出して次の問題へ言ってください。クラシックモードでは今と同じで、もう一度回答できる状態のままにしてください。

嘘つきパズルと天秤パズルで、正解した後も、回答ボタンを連打することでShowFeedback()が何度も呼び出され、スコアの加算と次の問題の呼び出しが何重にもなってしまいます。

そのため、タイムアタックモードでは回答ボタンを押したら2度目は押せないように変更してください。

3つのクイズの正解表示が統一されていなかったので、統一します。

あとは2回目のチャットで発生したバグ取り作業です。

承知いたしました。タイムアタックモードの仕上げとして、ご指摘いただいた3点の修正を行い、より快適に遊べるように調整します。

フィードバックの統一: 「帽子の色あてクイズ」でも、正解・不正解時にフィードバックモーダルが表示されるようにします。

嘘つきパズルの動作変更: タイムアタック中に不正解だった場合、クラシックモードのように再挑戦させるのではなく、不正解のフィードバックを表示して次の問題へ進むようにします。

回答ボタンの無効化: タイムアタック中、一度回答ボタンを押したら連打できないように、即座にボタンを無効化します。

これらの修正はすべてscript.jsファイルのみで対応可能です。HTMLやCSSの変更は必要ありません。

これによってボタンを連打してスコアを水増しすることはできなくなりました。

しかし、クイズ開始時にボタンを有効化していなかったため、2回目以降のクイズで回答ボタンが押せなくなってしまいました。

4回目のチャット

連打防止のために回答ボタンを無効化するのはいいですが、もう一度有効化しないと次のパズルに支障をきたします。

次のパズルに進んだ際に、回答ボタンを再度有効化してください。

回答ボタンの連打対策によって発生したバグを修正します。

ご指摘の通りです。大変失礼いたしました。タイムアタック中に回答ボタンを無効化した後、次の問題が始まる際にボタンを再度有効化する処理が抜けておりました。これにより、2問目以降のパズルで回答ボタンが押せない状態になっていました。

このバグを修正するため、各パズルの開始関数（startGameLiarPuzzleなど）に、それぞれの回答ボタンを必ず有効な状態に戻す処理を追加しました。

修正はscript.jsファイルのみです。以下の完全なコードでお手元のファイルを置き換えてください。

5回目のチャット

各クイズに用意されているタイトルに戻るボタンを、タイムアタック中に使用するとバグが発生します。

具体的に内部でどうなっているかはわかりませんが、もう一度タイムアタックを始めた際に、カウントダウンの関数のみが二重になっています。

タイムアタックではギブアップボタンがあるため、各クイズのタイトルに戻るボタンは隠して桃台ありません。

タイムアタック中はタイトルに戻るボタンを表示しないでください。

何度かテストしていると、タイムアタック中にタイトルに戻るとバグが起こることがわかりました。

Geminiが最初っから用意してくれていたギブアップボタンと役割がかぶっていたため、タイトルに戻るボタンを、タイムアタック中のみ表示しないことにしました。

はい、承知いたしました。ご指摘の通り、タイムアタック中に各ゲームの「タイトルに戻る」ボタンを使うとタイマーの不具合が発生しますね。

原因は、タイムアタックのタイマーを停止する処理（clearInterval）を行わずにタイトルに戻ってしまうため、見えないところでタイマーが動き続けてしまっていたことでした。

ご提案いただいた通り、タイムアタック中は「ギブアップ」ボタンに役割を統一し、各ゲーム内の「タイトルに戻る」ボタンは非表示にするのが最も分かりやすく、安全な修正です。

修正内容

各パズルを開始する際に、「タイムアタック中かどうか」を判定し、タイムアタック中であれば各ゲームのヘッダーにある「タイトルに戻る」ボタンを非表示にするように修正しました。クラシックモードでは、これまで通り表示されます。

この修正はscript.jsファイルのみで対応可能です。HTMLやCSSの変更は必要ありません。

修正後のJavaScript (script.js)

以下の完全なコードで、お手元のscript.jsの内容をすべて置き換えてください。 startGameLiarPuzzle, startCoinPuzzle, startHatPuzzle の3つの関数に、ボタンの表示を切り替えるロジックを追加しています。