Amazon Q CLI に迷路脱出ゲームを作ってもらった時の制作過程の記録

「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」が2025年6月20日まで開催中です。

これに応募するために、Amazon Q CLI とチャットしてシンプルな迷路脱出ゲームを作ってもらいました。
本記事では、このゲームの制作過程をご紹介します。
今回AIエージェントをはじめて使用してみたため、使い方が下手な部分についてはおおらかな気持ちで読んでいただければ幸いです🙏

⚒️ 環境構築

こちらを参考に、以下を行いました。

• AWS Builder ID 登録
• Amazon Q CLI インストール・セットアップ

ここまでを手動でやって、以後の作業は全面的に Amazon Q CLIとの対話(q chat)経由でAIエージェントに行わせました。

Macユーザーなので brew でAmazon Qをインストールしたのですが、brew install amazon-q を実行しただけでCLIツールが利用できると勘違いしていて、一瞬ハマりました。実際にはbrewでインストールされるのはAmazon QのMacアプリケーションで(brewインストール時のログをちゃんと読めばそう書いてありました)、デスクトップでMacアプリケーションを起動してからCLIを有効化する必要がありました。

🚶 ゲーム開発に着手

最終的にHTML5ゲームとしてWebで公開したかったので、プログラミング言語にはJavascriptを使用することと、Javascriptゲームライブラリにはググって一番ポピュラーそうに感じた Phaser.js を使用すること、までをあらかじめ決めました。

q chat でAmazon Q CLI を起動し、

Phaser.js を使ったサンプルゲームを作って

くらいのものすごく雑なプロンプトでゲーム作成を依頼すると、Phaser.js製のゲームっぽいものが作られました。

🧩 迷路脱出ゲームを作らせてみる

ランダムな迷路を生成して、スタート地点から出発してゴール地点にたどりつくとクリア、みたいな単純なゲームを作ってみることにしました。

まず、以下のような内容の雑な指示書(request.md)をテキストファイルで用意し、これに基づいてゲームを作成させてみます。

# 依頼内容
- Phaser.jsを用いたHTML5ゲームの開発
- このファイルが置かれているディレクトリに index.html を作成し、ゲームは index.html から起動できるようにすること
- index.html をはじめとする生成物は、すべてこのディレクトリの中に保存すること

## ゲームの仕様
- プレイヤーキャラクターを操作して、迷路を脱出するゲーム
- スタート地点からゲームが始まり、ゴール地点に到達するとクリア
- ゲームを新しくはじめるたびにランダムな迷路が生成される
- ランダムな迷路の仕様
    - スタート地点とゴール地点はそれぞれ一つ
- 迷路を上から見下ろした視点の画面とすること
- PCブラウザ、スマートフォン、タブレットで問題なく動作すること
- プレイヤーキャラクターの操作
    - PCは、キーボード
    - スマートフォンとタブレットでは、画面上に仮想ゲームパッドを表示

最初に以下のような指示を行いました。

> ./request.md の内容を読み込み、依頼内容を実施してください。

パッとみは、イメージしていた迷路ゲームのようなものが生成されましたが、カーソルキーを操作しても、キャラクターがまともに移動してくれません。

> 矢印キーを操作しても、プレイヤーキャラクターがまともに反応しません。

矢印キーの操作問題を修正します。ゲームシーンのコントロール部分に問題があるようです。game-scene.jsファイルを確認して修正しましょう。

その後、ブラウザコンソールのログを貼り付けてバグ修正を行う、というやりとりを何ターンかやりとりしましたが、改善するどころか、挙動がどんどん悪化してしまい、最終的に画面に何も表示されなくなってしまったため、このままやりとりを継続してもうまくいかないと判断し、いったん仕切り直すことにしました。

最初のゲーム開発を踏まえたうえで再チャレンジ

指示書を若干更新して、あらためて開発を行わせました。
主な更新ポイントは以下の通りです：

• キャラクターの移動はグリッド単位で行わせたかったので、指示書に明記
• 当初の指示書に含めていた、スマートフォンやタブレットでの操作はいったんスコープ外とする

# 依頼内容
- Phaser.jsを用いたHTML5ゲームの開発。
    - ゲームの詳細な仕様は [ゲームの仕様](#ゲームの仕様) に記載
- このファイルが置かれているディレクトリに index.html を作成し、ゲームは index.html から起動できるようにすること
- index.html をはじめとする生成物は、すべてこのディレクトリの中に保存すること

## ゲームの仕様
- プレイヤーキャラクターを操作して、迷路を脱出するゲーム
- スタート地点からゲームが始まり、ゴール地点に到達するとクリア
- ゲームを新しくはじめるたびにランダムな迷路が生成される
- ランダムな迷路の仕様
    - スタート地点とゴール地点はそれぞれ一つ
    - 迷路全体は縦20マス、橫20マスのグリッドで構成される
    - 各マスは、「壁」もしくは「通路」いずれかの状態を持つ
    - 迷路の外周は必ず壁にする
- 迷路を上から見下ろした視点の画面とすること
- PCブラウザ上でのみ動作すればOK、スマートフォンやタブレットでの動作は考慮しなくてよい
- プレイヤーキャラクターの操作はキーボードのカーソルキーまたはWASD
キーで行えること
- プレイヤーキャラクターの移動はグリッド単位で行う

初回の指示

> カレントディレクトリの request.md の内容を読み、「依頼内容」を実行してください。

今回は、一発目の指示でまともな画面自体が表示されませんでした。
とりあえず、バグ修正でどうにかなるかをたしかめるべく、ブラウザのコンソールに表示されていたログをコピーして、二回目の指示を出しました。

二回目の指示

> ゲーム画面の迷路部分が真っ白に表示され、ゲームが開始できません。ブラウザのコンソールに以下のようなエラーが出ています。
game3/:70 Uncaught TypeError: game.scene.restart is not a function
at HTMLButtonElement.onclick (game3/:70:59)

エラーを確認しました。問題は2つあります：

作業内容

1. game.scene.restart の呼び出し方法が間違っている
2. 迷路が真っ白に表示される問題

これらを修正します。まず、index.htmlを修正します：
.........

この修正を実施したら、いちおうゲームとして成立しているものができました！

特に作業指示には含めていませんでしたが、一度ゴールに到達すると「クリア！」というメッセージが表示される実装になっていました。
この表示自体はよかったのですが、ゲームを再スタートした後もメッセージはずっと表示されっぱなしでした。メインの迷路部分はだいたい見えているのでゲームのプレイにほとんど支障はないものの、かっこよくは無いのでここは改善したいと思いました。

💎 ゲームの完成

その後、何ターンかチャットのやりとりをしてゲームの改善を行ってみた後、最終的に以下のような指示書を用意して、完成版のゲーム開発を指示しました。

# 依頼内容
- Phaser.jsを用いたHTML5ゲームの開発。
- ゲームの詳細な仕様は「ゲームの仕様」 に記載
- ゲームの基本的な実装が済んでいる index.html と maze-game.js があるので、「ゲームの仕様」はこれらを修正する形で実装すること
- 必要に応じて追加のファイルを生成する。すべての生成物はこのディレクトリの中に保存すること

## ゲームの仕様
- プレイヤーキャラクターを操作して、迷路を脱出するゲーム
- スタート地点からゲームが始まり、ゴール地点に到達するとクリア
- ゲームを新しくはじめるたびにランダムな迷路が生成される
- ランダムな迷路の仕様
    - スタート地点とゴール地点はそれぞれ一つ
    - 迷路全体は縦20マス、橫20マスのグリッドで構成される
    - 各マスは、「壁」もしくは「通路」いずれかの状態を持つ
- 迷路を上から見下ろした視点の画面とすること
- PCブラウザ上でのみ動作すればOK、スマートフォンやタブレットでの動作は考慮しなくてよい
- プレイヤーキャラクターの操作はキーボードのカーソルキーまたはWASD
キーで行えること
- プレイヤーキャラクターの移動はグリッド単位で行う
- ゴールに到達したときに表示されるメッセージを、「新しい迷路で再スタート」がクリックされたあと非表示にする
- グラフィック
    - 壁・通路にはテクスチャやパターンを使う
    - 以下の３パターンでプレイヤーキャラクターのアニメーションを行う
        - 静止中
        - 移動中
        - 壁にぶつかった時
    - ゴール到達時にパーティクルエフェクトの演出を行う
- サウンド
    - BGMを再生する
    - プレイヤーキャラクターが移動中と壁にぶつかった時、ゴールに到達した時にそれぞれ異なるSEを再生する

最初の指示でほぼイメージどおりのゲームができあがったので、これにおまけでパフォーマンス指標の表示機能を追加して、ここまででゲーム完成としました。

🎮 完成したゲーム

主な特徴：

• ランダム迷路生成
• プレイヤーアニメーション
• BGM(ON/OFF機能付き)・サウンドエフェクト
• パーティクルエフェクトつきのゴールメッセージ
• パフォーマンス指標の表示

こちらで公開中です。よかったら遊んでみてください😀
ゲームがはじまるとBGMが鳴り始めますが、ちょっと大きめかもしれないのでスピーカーのボリュームを少し下げておいたほうが良いかもしれません🙇

まとめ

Amazon Q CLIを使用して、コードの中身は一切読むことなく、仕様の提示と対話的な修正依頼でゲームを完成させることができました！

複雑な改善を一度に依頼すると、まず生成されるコードが不具合だらけで、まともに動かないものが出てこない傾向があったので、なるべく小さいボリュームで指示を出すことが重要ということを学びました。また、指示していない機能追加をすることが時おりあり、不要だったり、バグでまともに動かなかったりすることが多い傾向でしたが、こちらが想定していなかったような良い機能が実装されることもあったため、どんな実装をしてくれるか、結果が楽しみでもありました。

AIエージェントに親しむという観点で、ちょっとしたゲーム開発はとてもよい題材だと思います。
皆さんもよかったらぜひAmazon Q CLIでゲーム開発をしてみてください😄

参照

• Amazon Q CLI でゲームを作ろう Tシャツキャンペーン | Amazon Web Services ブログ
• [Build Games] Amazon Q Developer CLIを利用してゲームを作り、特別なTシャツをゲットしよう（2025年6月20日まで） #AWSCommunityBuilders | DevelopersIO
• Amazon Q CLI で自動車工場シミュレーションゲームを Vibe Coding で作ってみた | DevelopersIO
• Amazon Q Developer CLI ショートラボ（Vibe Coding） - クラメソおおさか IT 勉強会 #Midosuji_Tech - YouTube
• Access Claude Sonnet 4 in Amazon Q Developer CLI | AWS DevOps & Developer Productivity Blog
• Amazon Q CLIをインストールして実行したら「command not found: q」と表示されたときにやること（brew install） | DevelopersIO