Vibe Coding初心者がAmazon Q CLIを使ってゲームを作ってみた
Amazon Q CLIでゲームを作ってTシャツをゲットする。というイベントが開催されていて、いろんな方がチャレンジされていたのと、
先日AI開発の話を聞いて、Vibe Codingやってみないと・・・思っていたこともあり、チャレンジしてみました。
イベントについてはこちら(2025/06/30まで)
Vibe Codingとは
Amazon BedrockでモデルをAmazon Nova Proにして、Vibe Codingについて聞いてみました。
Vibe Codingは、従来のプログラミングパラダイムに感性と雰囲気を融合させる革新的なアプローチです。この方法では、開発者は単に機能を実装するだけでなく、コードを通じて感情やビジョンを表現します。
Vibe Codingは、チームのダイナミクス、文化、そして最終的なユーザーエクスペリエンスを深く考慮に入れます。
開発者は、プロジェクトの全体的な雰囲気や感情的なトーンを反映するようにコードを書くよう奨励されます。
これにより、よりパーソナライズされ、直感的なソフトウェアソリューションが生まれます。
Vibe Codingは、技術的な正確性だけでなく、創造性と共感を重視し、開発プロセスをより包括的かつ人間味のあるものにします。
このアプローチは、特にクリエイティブ産業やユーザーエクスペリエンスを重視する分野で有効です。
セットアップ
解説ページや先達たちの記事を見てセットアップします。
開発用のPCに必要なものとして以下をインストールします。
- Amazon Q CLI
- pygame
インストールが終わったら、
q chatコマンドでQ CLIを起動します。
初期値では、Modelは claude-3.7-sonnet になっているので、claude-4-sonnet に変更してます。
% q chat
To learn more about MCP safety, see https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-mcp-security.html
⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧
╭─────────────────────────────── Did you know? ────────────────────────────────╮
│ │
│ Set a default model by running q settings chat.defaultModel MODEL. │
│ Run /model to learn more. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
/help all commands • ctrl + j new lines • ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 You are chatting with claude-3.7-sonnet
> /model
✔ Select a model for this chat session · claude-4-sonnet
Using claude-4-sonnet
作ったもの
何を作ろうか・・・と考えた時に、頭に浮かんだのは、隕石落としとコロニー落としでした。2025年6月現在、火曜日の深夜に盛り上がる某アニメの影響ですね。
・・・となると、落ちてくるのを地上から撃ち落とすシューティングゲームかな？(なお、作者自身はシューティングゲームとか格闘ゲームはめっちゃ苦手です。)ということで、Q CLIを起動し、以下の指示を与えました。
地球に落下してくる物体をレーザー砲を発射して、破壊するゲームを作ります。
プレイヤーは、地球連邦軍のガーディアン部隊の隊員です。
地上に向かって落下してくる物体をレーザー砲を操作して破壊するミッションを日々行なっています。
レーザー砲は、左右で移動、スペースキーで発射します。
落下してくる物体は以下の物体があり、それぞれに耐久度と報酬が設定されています。
耐久度はその物体を破壊するためにレーザー砲を何発当てる必要があるかの数値です。
報酬はその物体を破壊するもらえるスコアです。破壊するたびにスコアがプラスされていきます。
物体が地上に落下すると、その物体のポイントでスコアがマイナスされていきます。
スコアがマイナス10000になるとゲームオーバーです。
落下してくる物体は以下です。左から、名前,耐久度,報酬になります。
壊れた衛星,1,10
火球,1,20
UFO,1,50
スペースプレーン,1,-10000
UFO母艦,10,100
スペースコロニー,20,1000
小惑星,50,10000
1回のゲームは120秒間で終了します。
UFO母艦、スペースコロニー、小惑星は最後の30秒から出現させてください。
ただし、スコアが-10000になるとその時点でゲームオーバーです。
ゲームはguradianというディレクトリの中に作ってください。
この指示で、基本的なゲームは完成しています。この時点で驚きです。
最終的には述べ3時間ぐらい作業したところで、一旦開発を終わりにしました。
(いや、いつまで経ってもここ直したいとか出てきそうだったので・・・)
完成したゲーム画面はこんな感じです。レポジトリ見て貰えばわかりますが、htmlとjsファイル1つだけです。
(作成途中のキャプチャーを撮り忘れたのは大失敗です)
基本的な操作としては、
宇宙(上)から落ちてくる物体を地上(下)からレーザー砲で撃ち落としていきます。
なお、レーザー砲がトリコロールなのは、某アニメのオマージュです。(レーザー砲をトリコロールにしてと指示してます。)
色々とアップデート
さきほど書いた通り、最初の時点で、完成に近いものができていましたが、操作してみると、
色々改善点があるので、それも指示して改善していきます。
ふわっとした感じで入力しても、ちゃんとこうしますね。って言ってくるのはほんとすごいなと思いました。
時々エラーが出ることがあったんですが、それもちゃんとリカバリーしてくれて、いや、**まじすごい **と感動しながら見てました。
例えばですが、ラスボス的なものとして、UFO母艦、スペースコロニー(某アニメの影響)、小惑星(re:某アニメの影響)がありますが、
他のと同じサイズ、スピードで落ちてくるので、サイズを大きくして、落下速度を調整しようと思いまして、こんな感じで指示を出しましたら、
> UFO母艦、スペースコロニー、小惑星はサイズを4倍にして、他に比べて1/4のスピードで落下するようにしてください。
UFO母艦、スペースコロニー、小惑星のサイズを4倍にし、落下速度を1/4にして、より迫力のある強敵にします。
〜中略〜
修正が完了しました！🚀
## 🔄 変更内容
### 大型敵の強化
• **サイズ**: 4倍に拡大
• UFO母艦: 50px → 200px
• スペースコロニー: 60px → 240px
• 小惑星: 80px → 320px
• **落下速度**: 1/4に減速
• 通常敵: 1-3px/フレーム
• 大型敵: 0.25-0.75px/フレーム
### ゲームバランスの調整
• **出現制限**: 大型敵がいる時は同時出現数を1体に制限
• **視覚効果**: 大型敵に影と光るエフェクトを追加
• **HP表示**: 大型敵のHP数値を明確に表示
### 戦略性の向上
1. 時間管理: 大型敵は時間をかけて倒す必要がある
2. 位置取り: 巨大なサイズで回避が困難
3. 集中攻撃: 高耐久力で連続攻撃が必要
4. リスク管理: 大型敵出現時は他の敵が出にくい
### 視覚的インパクト
• **迫力**: 巨大なサイズで圧倒的な存在感
• **エフェクト**: 影と光で立体感を演出
• **情報表示**: HP数値で戦況を把握しやすく
これで、最後の30秒に出現する大型敵が真の脅威となり、ゲームのクライマックスがより緊張感のあるものになりました！大型敵は画面の大部分を占めるため、プレイヤーは慎重な位置取りと集中的な攻撃が求められます。
この指示で巨大化して、ラスボス感を出すようにしました。
余談ですが、スペースコロニーを円形に、いわゆるオニール型のスペースコロニーにして欲しいと指示したんですが、
> スペースコロニーを円形にして、アイコンもシリンダーっぽいものにしてください。
スペースコロニーを円形にして、シリンダーっぽいアイコンに変更します。
〜中略〜
⋮
● Completed in 0.0s
スペースコロニーの円形デザインが完成しました！🏭
## 🔄 変更内容
### 視覚的変更
• **形状**: 四角形 → 円形
• **アイコン**: 🏗️ → 🏭（シリンダーっぽい工場アイコン）
• **グラデーション**: 中心が白く、外側に向かって黄色のグラデーション
• **枠線**: 黄色の円形枠線で強調
### 技術的改善
• **描画**: arc() を使用した円形描画
• **影効果**: 円形の影エフェクト
• **当たり判定**: 円と点の距離計算による正確な当たり判定
### デザインの特徴
1. シリンダー効果: 放射状グラデーションで立体感を演出
2. 工業的外観: 🏭アイコンで宇宙コロニーの工業施設感を表現
3. 視認性: 円形で他の四角い敵との区別が明確
4. リアリズム: 実際のスペースコロニー（O'Neill型）に近い円筒形
### ゲームプレイへの影響
• **当たり判定**: より正確な円形当たり判定
• **視覚的識別**: 独特な形状で瞬時に識別可能
• **戦略性**: 円形のため角を狙う戦術が不要
• **美観**: より宇宙的で未来的な外観
### 宇宙コロニーの表現
• **O'Neill型**: 円筒形の回転する宇宙居住施設
• **工業施設**: 🏭で製造・居住複合施設を表現
• **規模感**: 240pxの大きさで巨大構造物を演出
これで、スペースコロニーがより現実的で視覚的に魅力的な円形デザインになりました！宇宙空間に浮かぶ巨大な円筒形居住施設として、ゲームの世界観がより豊かになります。
特に言っていないんですけどね。
リアリズム: 実際のスペースコロニー（O'Neill型）に近い円筒形
って出てきた時はちょっと感動しました。
作り終わったので・・・
一旦完了にし、githubにcommitしました。
README.md、README_jp.mdについては、
Q CLIに作成されたリソースをベースに作ってもらいました。
ちなみに、多言語対応（7言語） と記載していますが、ゲーム内の説明は変わったんですが、
周りの解説とかの言語は変わらないので、中途半端な状態です。
- フランス語の表記の例
ちなみに・・・一旦 /quit で抜けた場合も、こんな感じで指示すると、再開できました。
> 地球防衛ゲーム「ガーディアン」を改良しようと思います。
地球防衛ゲーム「ガーディアン」の改良について、まずは現在のプロジェクト構造を確認させてください。
🛠️ Using tool: fs_read (trusted)
⋮
● Reading directory: . with maximum depth of 0
⋮
● Completed in 0.0s
guardianディレクトリがありますね。その中身を確認してみましょう。
🛠️ Using tool: fs_read (trusted)
⋮
● Reading directory: ./guardian with maximum depth of 0
⋮
● Completed in 0.0s
ガーディアンゲームのファイル構成が確認できました。どのような改良を考えていますか？
現在のゲームの状況を把握するために、まずはREADMEファイルを確認してみましょう：
🛠️ Using tool: fs_read (trusted)
⋮
● Reading file: ./guardian/README_jp.md, all lines
⋮
● Completed in 0.0s
現在のゲームの状況がよく分かりました。どのような改良を考えていますか？例えば：
• **新しい敵の種類**を追加
• **パワーアップシステム**の実装
• **効果音や音楽**の追加
• **新しいゲームモード**の追加
• **ビジュアルエフェクト**の強化
• **モバイル対応**の改善
• **リーダーボード機能**の追加
具体的にどの部分を改良したいか教えてください。現在のゲームコードも確認して、最適な改良方法を提案します。
いや、便利ですね。
遊び方
以下のレポジトリをチェックアウトして、
guardian/index.html
をブラウザで起動すればゲームできますので、遊んでみてください。
(Google Chromeで動作確認してます。)
前述した通り、作者はシューティングゲーム苦手なので、そんなに高得点出せませんが、
できる人なら結構高得点出せるんじゃないかと思います。
(スペースプレーンは味方なので落しちゃダメですよ)
感想
構想を考えた時に、こんな感じかなぁ・・・ってのは想像していたんですが、
初期段階でUI含めて近いものができたのが驚きでした。
Q CLIにこうして欲しいと指示しただけで、
README含めて一切コードを書いていません。
コードの修正点はその都度表示してくれているので、
それを眺めて(確認とは言わない)はどう変更したがみてたものの、
ほんと見てただけです。
Amazon Q Developer恐るべしですね。
今回良い経験になりましたので、
今後もVibo Codingやっていこうと思いました。
Discussion