こんにちはブログ担当のYです。
以前、GoogleのAIを使って、Devil's PlanというNetflixの番組に出てきたオリジナルゲームを再現したことがあります。
その際の記事はこちら
今回は、いつも紹介している論理クイズを、Geminiを使って作ってみようと思いました。
Geminiは無料版の場合1日にできるチャットの数に制限があるため、これから少しずつ作っていこうと思います。
構想
今のところ完成予定図として考えているのは、いろんな論理クイズを自動生成して遊べるゲームといったものです。
よくある嘘つきパズルや、帽子の色当て、水の分配など、さまざまなよくある論理クイズを、自動生成するアルゴリズムを組み込んで、何度でも遊べるものにしたいと思っています。
1回目のチャット
1回目には次のようにGeminiにチャットを送ってみました。
こんにちは
これから複数回の改良を経て、「論理クイズ」のゲームを作ろうと思っています。
あなたにHTML+CSS+JSでコードを書いてもらって作ろうと思います。
まずは全体の軽い構想を伝えます。
ゲームが開始（HTMLを開く）すると、ゲームモード選択画面が開きます。
そこで、いくつかの論理クイズのゲームモードから、一つを選んでプレイすることができるようにします。
これから追加していくので、まずは開始画面のみを作ってください。
暗めの背景色で、ミステリー感のあるデザインでお願いします。
後からゲームモードが追加されることを考慮して、レイアウトを考えてください。
これくらいのアバウトな注文だけで出てきたのが次のようなサイトです。
クラシックや、タイムアタックなど、注文になかったものまで作ってきました。
また、マウスオーバーしたときの動作なども実装してあり、これだけでも少し雰囲気がある感じになりました。
2、3回目のチャット
2回目には次のようなチャットを送りました。
クラシックを押したら、いくつかのゲームから一つを選択できるようにしてください。
タイムアタックは、そのゲームモードからランダムに5問出題する感じでお願いします。
タイムアタックはまだ実装しなくて大丈夫です。
クラシックのボタンを押した時にゲームを選択する画面を表示させてください。
選択肢をブラックアウトさせてクリックできないようにしてください。
タイトルは？？？にしておいてください。
3回目は次のようなチャットを送りました。
クラシックのゲームモード一つ目を作ります。
・嘘つきパズル
登場人物は3〜5人程度。
その中に犯人が1人いる。
それぞれ1〜3回程度の発言をする。
登場人物はそれぞれ嘘つきか正直者。
正直者の発言はすべて真実。
嘘つきの発言はすべて嘘。
プレイヤーは登場人物の発言を整理して犯人を特定する。
ゲームプレイのアルゴリズムはまだ実装せず、ゲーム開始時に、上記のルール説明を挟んでください。
ゲームプレイの画面だけ作ってください。
画面端に？マークを出して、それを押したらもう一度ルール説明が見れるようにしてください。
ここまで送ってみて、次のようなものができました。
指示していないのにも関わらず、推理のためのUIや、回答ボタンも自動で追加してくれました。
4回目のチャット
4回目のチャットは次のようなものを送りました。
まず、ゲーム画面にタイトルへ戻るボタンを追加してください。
これはこれから追加していくゲームモードにデフォルトで最初から追加しておいてください。
次に、ゲームを操作できるようにしましょう。
問題によっては、嘘つきが誰かまでは特定できない場合があるので、嘘つきの選択は削除してください。
その代わり、推理に使うためにそれぞれの人物をクリックしたら、背景色が切り替わるようにしてください。
デフォルトは今と同じ紺色で、ステータスは「不明」。
次は水色でステータスは「正直者」
最後は赤で」ステータスは「嘘つき」
これらをクリックするたびに切り替えられるようにしてください。
また、クリックすれば切り替えられることがわかりやすいようなUIにしてください。
推理する時に「この人が嘘つきだったら……」のような感じで使います。
するとゲーム画面が次のように変化しました。
5、6回目のチャット
5回目では、クイズの自動生成のための準備、6回目では細かいバグ修正などを行いました。
送ったチャットは次のとおりです。
これを毎回違うクイズを自動生成しようと思っています。
今は静的な文をHTMLに直で書いてあるけど、テンプレートとして「OO（人物名）が犯人」や、「私はOO（ステータス）です」のようなものをいくつか用意しておいて、ランダムに自動生成したいです。
複雑化を避けるため、登場人物の人数は3人に固定しましょう。
また、全員の発言も2つに固定しましょう。
クイズのランダム生成アルゴリズムは次のようにします。
・ランダムに3人のステータス（正直・嘘つき）を割り振る。
・3人のうちランダムに犯人を決める。
・3人の発言をランダムに生成する（用意されたテンプレートの中からランダムに2つ選び、その中に入れる登場人物名やステータスもランダムに生成する。）
・最後に、そのクイズが解けるのか確認する。（解けないクイズの場合、最初から生成し直す）
このアルゴリズムでクイズを自動生成しようと思っています。
クイズの整合性チェックの部分はまだ作らなくていいので、ランダムにステータスを決め、犯人を決め、発言を生成する部分を作ってください。
発言のテンプレートは次のとおりです。まだ後で追加するかもしれないので、覚えておいてください。
「OO（登場人物）は犯人です。」
「OO（登場人物）は犯人ではありません。」
「OO（登場人物）はXX（正直者or嘘つき）です。」
「OO（登場人物）はXX（正直者or嘘つき）ではありません。」
デバッグのために、画面下に登場人物のステータス一覧と、犯人の正体を表示しておいてください。
6回目のチャットは次のとおりです。
いくつか細かいバグを修正しましょう。
右下のヘルプボタンを押した際に、「ゲーム開始」ボタンを押さないとゲーム画面に戻れないため、その際に新規ゲームに変わってしまう。
ゲーム開始前に表示されるヘルプと、ゲーム中にルール確認のためにみるヘルプを分けて、ゲーム中のヘルプはモーダルを「閉じる」ボタンを追加してください。
発言の自動生成は、1人発言中に全く同じ2つの発言を生成しないようにしてください。
また、回答の提出ボタンを押せるようにしましょう。
現在は問題の整合性チェックロジックがないため、実際の正解ではありませんが、画面下のデバッグ情報をもとに提出ができるか確認してみます。
正解を提出した場合、ゲームクリア表示をして、もう一度挑戦とタイトルに戻るボタンを表示してください。
不正解の場合、不正解画面を表示して、もう一度提出するために画面を閉じるボタンを表示してください。
これらのチャットを経て、次のようになりました。
今回の進捗はここまでになります。
細かいところだと、ボタンのマウスオーバーの動作が統一されていない、などの問題はありますが、大体期待通りに動くようになっています。
クイズ自動生成の鍵となる、整合性チェックのアルゴリズム実装は次回になります。
ここが一番複雑だと思うので、Geminiには頑張ってほしいですね。
また、このままでは非常に簡単なクイズしかできないので、人数を増やしたり発言を増やしたりできるようにもしたいですね。
他の論理クイズの記事もCheck!
