MENU
PC・ガジェット・GAME PR

【ゼロから始めるVibe Codingゲーム工房】#6 脳トレに挑戦!AIと作る「計算クイズゲーム」

20250717日記(1200 x 675 px)
記事内に商品プロモーションを含む場合があります

はじめに

こんにちは! トシミズです。

「ゼロから始めるVibe Codingゲーム工房」へようこそ!

今回のテーマは、楽しみながら脳を鍛える「計算クイズゲーム」

Gemini CLIという強力なAIをあなたのプログラミング相棒と対話しながらゲームを完成させていきました。

「プログラミングは初めてで…」
「シニア世代だけど大丈夫かな?」

そんな心配は一切いりません!

ブラウザで動くゲームなので、作ったものがすぐに目に見える形で動き出す楽しさを味わえます。

HTML、CSS、JavaScriptというウェブの基本技術を使って、賢くあなたの脳を刺激する、あなただけのオリジナル脳トレゲームを作り上げましょう!

なぜ今、AIと「計算クイズゲーム」なのか?

脳トレ効果バツグン!日々の生活で使う計算能力を楽しく維持・向上させ、

集中力や認知機能の活性化を促します。

Gemini CLIとの対話によるゲームづくりは、

ゲーム感覚で取り組めるので、飽きずに続けられます。

  • プログラミング学習の最適解
    • 結果がすぐわかる!: コードを書き換えてブラウザをリロードするだけで、すぐにゲームの見た目や動きが変わるのがわかります。
      この即時性が、学習のモチベーションをグッと高めてくれます。
    • AI(Gemini)が強力サポート!: プログラミングの知識がゼロでも大丈夫。Geminiがコードの生成、解説、エラー修正まで徹底的にサポートしてくれるので、「何から始めたらいいの?」という不安を解消し、挫折しにくい環境で学べます。
    • 達成感がすごい!: 自分の手で、AIと一緒にゲームを作り上げたという達成感は格別です。新しいことに挑戦し、形にする喜びを存分に味わってください。

Gemini CLIと「対話」しながらゲームを制作!実践開発フロー

さあ、ここからが本番です!Gemini CLIとの実際のやり取りをイメージしながら、ゲーム開発のプロセスを追っていきましょう。

ステップ1:いきなり…「計算クイズ」をつくる!

Gemini CLIにゲーム制作の細かな指示をだすのではなく、

いきなり「計算クイズ」をつくって!と指示しました。

Gemini CLIの方で、タイトルやボタン、配置や計算のレベルなどを決定し、本当にすぐに、5分程度で実際に動く「計算クイズ」ができあがりました。

しかし、これはプロトタイプというべきもので、これをベースにして改良をしていきます。

ただ、ここでトラブル発生!

PCの何かのアップデートの通知が来て、思わず再起動をかけてしまったのです。

PC再起動→Gemini CLIが終了→計算クイズのチャットが消える!!

ということです。

Gemini CLIのチャット(やり取り)はGemini CLIを終了すると消えてしまうのです。

チャット保存方法

「/chat save ◯◯」…そのチャット(やり取り)を保存
「/chat resume 〇〇」…保存されたチャット(やり取り)を復元
 *もちろん、そのフォルダに移動してから上記の指示をします

つまり、再起動の前に「/chat save 計算クイズ」としていなかったので、チャット(やり取り)が消えてしまったということです。残念!

ということで、きえてしまったチャットの主な内容は…

やり取り復元不可
やり取り復元不可の内容

Gemini CLIに今までの流れを聞いてみると、上の図のような回答でした。

  • 問題、スコア、問題数、正答率が表示される
  • 最初は簡単な計算からだんだんむずかしくなる
  • 計算して回答欄に入力後、「こたえる」またはEnterキーを押す
  • 正解・不正解のメッセージが表示される

ステップ2:改良を指示①引き算・割り算

私:引き算や割り算をクイズに入れてください

Gemini CLI:↓

引き算・割り算
引き算・割り算
引き算

しかし、計算をつづけると、5桁の足し算…ちょっとむずかしすぎる!

5桁+5桁 難しすぎ!
5桁+5桁 難しすぎ!

私:足し算も引き算も2桁までにしてください

Gemini CLI:↓

2桁に調整
2桁に調整

ステップ3:改良を指示②時間制限とボーナスポイント

ただ、ただ計算するだけではおもしろくないので、Gemini CLIにおもしろくするアイデアはないか聞いてみました。

私:さらに楽しく、面白くクイズができるようなアイデアはないですか?

Gemini CLI:↓

おもしろくするアイデア
おもしろくするアイデア

おもしろくするアイデアのうち、「1.時間制限とボーナスポイント」を実装してもらうことにしました。

これは、実装するのに結構時間がかかりました。

といっても、こちらがたいへんで時間がかかっているわけではなく、Gemini CLIががんばっているだけなんですが…

いろいろな不具合が出て、それを修正し検証するということを繰り返していました。

そして、やっと無事、実装完成です。

時間制限表示
時間制限表示

ボーナスポイントも入ったことが一瞬ですが、表示され、実装されたことを確認しました。

ステップ4:ブログ埋め込み用データ完了!しかし…

ブログ埋め込み用データも完了し、ブログにHTMLを貼り付けました。

ところが、貼り付けて表示させると、残り時間がすでにカウントダウンしている状態でした。

これは、いけないということで、「クイズスタート」ボタンをつけてもらうことにしました。

ゲームスタートボタン
ゲームスタートボタン

そして、ゲームオーバー時の「もう一度プレイ」ボタンも機能するように指示を出しました。

ゲームオーバー、もう一度プレイ
ゲームオーバー、もう一度プレイ

これでやっと、計算クイズの改良が完了しました。

最後の、スタートボタンの設置が一番たいへんだったようです。かなりの修正時間がかかっていました。

下に、完成した「計算クイズ」を埋め込んだので、一度、遊んでみてください。

計算クイズ

スコア: 0

問題数: 0 正答率: —

完成!AIと作った「計算クイズゲーム」で脳トレを始めよう

どうでしょう?Geminiとの対話を通して、プログラミング初心者のあなたが、

たった短時間でブラウザで動く計算クイズゲームを完成させることができました!

まだまだ、不具合があるかもしれませんが、プログラミングの知識がほとんどないシニアでも計算クイズをここまで完成させることができたことにあらためて驚いています。

完成したゲームは、ぜひご自身の脳トレに役立ててください。

パソコンやタブレット、スマートフォンなど、ブラウザがあればどこでも手軽に遊べます。家族や友人とスコアを競い合ったり、教えあったりするのも楽しいでしょう。

今回の経験は、プログラミングの基礎とAI活用の第一歩です。

サウンド機能を追加したり、問題の種類を増やしたり、さらには全く新しいゲームを開発したりと、可能性は無限に広がります。

さいごに:プログラミングは誰にでもできる!

「プログラミングは難しい」
「若い人がやるもの」

そんな固定観念は、もう必要ありません。

Geminiのような強力なAIツールがある現代では、誰もがクリエイターになれる時代です。

シニア世代の皆さんが新しいことに挑戦し、自分の手で何かを作り上げる喜びを味わうことは、脳の活性化だけでなく、豊かな人生を送る上でも非常に価値のあることです。

「ゼロから始めるVibe Codingゲーム工房」は、

これからも皆さんのゲーム開発を全力で応援します。さあ、あなたも一緒に、デジタルものづくりの楽しさを体験してみませんか?


【本日の資産運用チェック】2025/07/17(木)現在

★★「🍀やっとオルカン・S&P500両方ともプラスに復帰しました~📈🌟」★★

本日の資産運用チェック前日比評価損益(1/1~)
楽天・オールカントリー+12,994円+72,959円
楽天・S&P500+19,805円+1,313円


三菱UFJ eスマート証券