【後編】Geminiで作るレトロ調ジェットパックゲーム「ミスタージェットパック」【スマホ版あり】

カズキ

2026年9月24日 19:44

みなさんこんにちは。

前編に続くこの後編ではゲームとしての完成度を上げる内容となります。パソコン版とスマホ版の完成ゲームアプリもダウンロードできますので最後までお付き合いいただけると幸いです。

前編は ↓ ↓ ↓ こちらからどうぞ

さて前編ではミスタージェットパックの基本系から始めて、コイン配置、衝突判定などの要素も取り入れました。今回はバージョン２としてさらにいくつかの要素を追加していきます。

ただその前にいくつか気になった点がありましたので、まずはそれらの修正から入ることにします。

「ミスタージェットパック ver1」の修正

それでは最初のプロンプトです。(今回もGemini+Canvasモードで生成）

ポイントは前編で作ったゲーム(mr_jetpack_ver1.html)をプロンプトに添付しそれをカスタマイズの出発点としていることです。このやり方であればチャットを分けても支障なく続きの制作には入れます。

＜プロンプト１＞

添付のhtmlゲーム(mr_jetpack_ver1.html)はジェットパックで浮遊するプレイヤーキャラクターを操作して洞窟内にあるゴールを目指すゲームです。
これを次のようにカスタマイズしたいと考えています。

ステップ１：基本ゲームシステムの修正

プレイヤーキャラクターのデザインとサイズ感を調整し、スタート地点に専用の発進足場を設置してください。

【目的】
自機のサイズを小さくして狭い場所での操作性を向上させるとともに、スタート地点のビジュアルを明確にしてゲームの完成度を高めるため。

【具体的な指示や要件】
〇自機サイズの縮小: 狭い洞窟でも飛行・通過しやすいよう、自機の描画スケールを小さく調整してください（幅29px / 高さ51px程度、描画スケール s = 1.5）。
〇頭部バイザーの修正: 自機頭部の白枠バイザー部分が大きすぎて目立つため、よりコンパクトでシャープなデザインに修正してください。
〇スタート足場の追加: プレイヤーがゲーム開始時に立つ専用の足場（黄色と黒の工事用模様＋トラス構造脚のグラフィック）をスタート位置（左下）に作成し、そこから発進できるようにしてください。

ご覧のようにスタート地点として足場が追加されるとともにプレイヤーキャラクターのデザインが修正されています。

＜結果画面１＞

ゲームをさらにアレンジする

ここから「ミスタージェットパック ver2」としてゲームがより面白くなるようにアレンジを加えていきます。
具体的には・・・

燃料ボンベの配置
ミニマップの表示
ゲームクリアごとに洞窟の形状を変更

などの要素を追加していきます。

燃料ボンベの配置

まずは燃料ボンベの配置の指示を出します。

＜プロンプト２＞

続いてマップ内に燃料を回復できるアイテム（赤色の燃料ボンベ）を設置し、燃料切れによるゲームオーバーを緩和するギミックを追加してください。

【目的】
洞窟探索時のリソース管理要素を深め、燃料枯渇による難易度の高さを調整してプレイの達成感を高めるため。

【具体的な指示や要件】
〇アイテムの生成・配置: 洞窟内の複数箇所（3箇所程度）に取得可能な「赤色の燃料タンク（赤ボンベ）」を配置してください。
〇グラフィック作成: 燃料タンクは赤い缶に金属パーツ、黄色い帯をあしらったドット絵デザインで描画してください。
〇燃料回復処理: プレイヤーが燃料タンクに接触した際、タンクが消失して燃料が最大値の約35%回復する判定・処理を追加してください。
〇リセット処理: ゲームオーバーや再スタート時には、設置された燃料タンクが初期状態（未取得）にリセットされるようにしてください。

いい感じでエネルギー回復アイテムである燃料ボンベが追加されています。

＜結果画面２＞

バグ対応と表示の追加

ここでバグを発見！コインや燃料ボンベなどのアイテムが壁の中に埋没する場合があるので、それを修正するとともに、現在プレイ中のステージ数がわかるように表示を追加します。

＜プロンプト３＞

続いて、洞窟の1マス（タイル）あたりのサイズを拡大して視界を広げ、各種アイテムが壁の中に埋没しないよう生成ロジックを改善してください。また、UIに現在のステージ表示を追加してください。

【目的】
マップの空間的ゆとりを確保してプレイヤビリティを高め、アイテムが取得不能になるバグを防ぎ、マルチステージ化に向けた画面レイアウトを整えるため。

【具体的な指示や要件】
〇タイルサイズの拡大: マップの1タイルサイズを 90px (TILE_SIZE = 90) に変更し、洞窟の通路幅および画面の可視範囲を大きく広げてください。
〇アイテムの安全配置判定: コインおよび燃料タンクを配置する際、必ず通行可能な空洞マス（壁以外のマス）の上にのみランダム生成されるロジック（grid[r][c] === 0 の判定）へ修正してください。
〇ステージ表示UIの追加: 画面左上のUI領域（燃料バーやコインカウンターの直下）に、現在挑戦中のステージを示すテキスト表示（STAGE: 1）を追加してください。

＜結果画面３＞

ミニマップの追加と洞窟の自動生成化

最後にミニマップの追加とステージをクリアするごとに洞窟の形状が変わる機能をまとめて実装します。

＜プロンプト４＞

最後に、ステージクリアごとに構造の異なる洞窟を自動生成するシステムを構築し、無限に挑戦できる複数ステージ機能と全貌を把握できるミニマップ機能を実装してください。

【目的】
1回クリアして終わりではなく、常に新しいマップ構成でリプレイ性を大幅に高め、広大なランダム洞窟でも迷わずにゴールを目指せるようにするため。

【具体的な指示や要件】
〇ランダム洞窟生成アルゴリズム（generateRandomMap）の実装:
・左下に「スタート足場」、右上に「ゴール領域」を固定配置してください。
・スタートからゴールまで複数ウェイポイントを経由する太いメイン洞窟をランダムウォークで開削してください。
・通路の途中に分岐や周回できる「ループ構造」を適度に追加し、自然な洞窟地形を形成させてください。
〇ステージ進行システムの構築:
・コインを10枚集めてゴールに到達した際、「STAGE CLEAR!」と表示し「NEXT STAGE」ボタンで次のステージへ遷移させてください。
・次のステージに進む際は currentStage をインクリメントし、新たな洞窟マップを再生成して開始してください。
〇全体ミニマップ（drawMinimap）の追加:
・画面右上（UI上）に、マップ全体の壁構造・未取得コインの位置・プレイヤーの現在地をリアルタイム表示するミニマップを描画してください。

＜結果画面４＞

まとめ

今回はじめて前編と後編に分けてひとつのゲームを作ってみました。
洞窟マップのランダム生成によって繰り返し遊べるゲームになっていると思います。そのうち機会があれば敵キャラの追加や凝った仕掛けの実装などに挑戦してみたいと思います。

それではお約束の完成版ゲームのダウンロード。以下からパソコン版、スマホ版両方取得していただけます。

＜ミスタージェットパックver2 ダウンロード・パソコン版＞

＜ミスタージェットパックver2 ダウンロード・スマホ版＞

スマホ版は次の手順によりホーム画面に登録できてすぐに遊べて便利です。

iphone(Safari)の場合：Safari画面右下の[ 3点メニュー ]→[ 共有 ]→[ ホーム画面に追加 ]
android(Chrome)の場合：Chrome画面右上の[ 3点メニュー ]→[　ホーム画面に追加　]