DEV Community

Cover image for A Vibe Coding Beginner Tried Making a Game with Amazon Q CLI

A Vibe Coding Beginner Tried Making a Game with Amazon Q CLI

The header image is for illustrative purposes only and is not related to the main text.


This text is a translation of the content from the following article using Amazon Nova Premier.

https://zenn.dev/keni_w/articles/e95dda34d32ae8


An event called "Create a game with Amazon Q CLI and get a T-shirt" was being held, and many people were challenging it. Also, after hearing about AI development the other day, I thought I should try Vibe Coding... so I gave it a try.

About the event (until June 30, 2025)
https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/

What is Vibe Coding?

I set the model to Amazon Nova Pro in Amazon Bedrock and asked about Vibe Coding.

Vibe Coding is an innovative approach that combines sensitivity and atmosphere with traditional programming paradigms. In this method, developers not only implement functions but also express emotions and visions through code.
Vibe Coding deeply considers team dynamics, culture, and the final user experience. Developers are encouraged to write code that reflects the overall atmosphere and emotional tone of the project, resulting in more personalized and intuitive software solutions.
Vibe Coding emphasizes not only technical accuracy but also creativity and empathy, making the development process more inclusive and human-friendly. This approach is particularly effective in creative industries and fields that prioritize user experience.

Setup

Set up by looking at the explanation pages and articles by pioneers.

https://zenn.dev/showm001/articles/2025-06-12-01

https://zenn.dev/kumao/articles/61d2f8bca89eb1

https://dev.classmethod.jp/articles/q-developer-cli-game-cbs/

https://community.aws/content/2vlITBGRfv8slpeU1UlTrpT4bBI/vibe-coding-in-practice-building-a-super-mario-game-with-amazon-q-developer-cli

Install the following on your development PC:

  • Amazon Q CLI
  • pygame

After installation, start Q CLI with the q chat command.

% 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
Enter fullscreen mode Exit fullscreen mode

What I Made

When thinking about what to create, meteorite drop and colony drop came to mind.
Influenced by a certain anime that peaks on Tuesday late nights in June 2025... So, a shooting game where you shoot down falling objects from the ground?

I started Q CLI and gave the following instructions:

地球に落下してくる物体をレーザー砲を発射して、破壊するゲームを作ります。
プレイヤーは、地球連邦軍のガーディアン部隊の隊員です。
地上に向かって落下してくる物体をレーザー砲を操作して破壊するミッションを日々行なっています。
レーザー砲は、左右で移動、スペースキーで発射します。
落下してくる物体は以下の物体があり、それぞれに耐久度と報酬が設定されています。
耐久度はその物体を破壊するためにレーザー砲を何発当てる必要があるかの数値です。
報酬はその物体を破壊するもらえるスコアです。破壊するたびにスコアがプラスされていきます。
物体が地上に落下すると、その物体のポイントでスコアがマイナスされていきます。
スコアがマイナス10000になるとゲームオーバーです。
落下してくる物体は以下です。左から、名前,耐久度,報酬になります。
壊れた衛星,1,10
火球,1,20
UFO,1,50
スペースプレーン,1,-10000
UFO母艦,10,100
スペースコロニー,20,1000
小惑星,50,10000

1回のゲームは120秒間で終了します。
UFO母艦、スペースコロニー、小惑星は最後の30秒から出現させてください。

ただし、スコアが-10000になるとその時点でゲームオーバーです。
ゲームはguradianというディレクトリの中に作ってください。
Enter fullscreen mode Exit fullscreen mode

(Sorry Japanese Only.)

The basic game was completed with these instructions. Surprisingly, it took about 3 hours to finish development.

The completed game screen looks like this.
As you can see from the repository, it consists of just one HTML and one JavaScript file.

game display

(Forgetting to take a screenshot during development was a big mistake.)

The basic gameplay involves shooting down objects falling from space (top) with a laser cannon from the ground (bottom).
The laser cannon is tricolor, which is an homage to a certain anime (I specifically instructed to make the laser cannon tricolor).

Various Updates

As I mentioned earlier, something close to completion was made initially, but upon trying it out, I found various points for improvement, which I then instructed to be improved.
Even when I gave vague instructions, it properly responded with "I'll do this," which I thought was really amazing.
Sometimes errors occurred, but it recovered properly, and I was truly impressed, thinking, This is seriously amazing.

For example, there are final boss-like objects such as the UFO mothership, space colony (influenced by a certain anime), and asteroids (also influenced by a certain anime).
However, they were falling at the same size and speed as the others, so I thought I'd increase their size and adjust their falling speed.
I gave instructions like this:

> 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秒に出現する大型敵が真の脅威となり、ゲームのクライマックスがより緊張感のあるものになりました!大型敵は画面の大部分を占めるため、プレイヤーは慎重な位置取りと集中的な攻撃が求められます。
Enter fullscreen mode Exit fullscreen mode

(Sorry Japanese Only.)

With these instructions, I made them gigantic to give a final boss feel.

boss1

boss2

As an aside, I asked to make the space colony circular, like the so-called O'Neill cylinder type space colony.

> スペースコロニーを円形にして、アイコンもシリンダーっぽいものにしてください。
スペースコロニーを円形にして、シリンダーっぽいアイコンに変更します。

〜中略〜

 ⋮ 
 ● Completed in 0.0s
スペースコロニーの円形デザインが完成しました!🏭

## 🔄 変更内容

### 視覚的変更
• **形状**: 四角形 → 円形
• **アイコン**: 🏗️ → 🏭(シリンダーっぽい工場アイコン)
• **グラデーション**: 中心が白く、外側に向かって黄色のグラデーション
• **枠線**: 黄色の円形枠線で強調

### 技術的改善
• **描画**: arc() を使用した円形描画
• **影効果**: 円形の影エフェクト
• **当たり判定**: 円と点の距離計算による正確な当たり判定

### デザインの特徴
1. シリンダー効果: 放射状グラデーションで立体感を演出
2. 工業的外観: 🏭アイコンで宇宙コロニーの工業施設感を表現
3. 視認性: 円形で他の四角い敵との区別が明確
4. リアリズム: 実際のスペースコロニー(O'Neill型)に近い円筒形

### ゲームプレイへの影響
• **当たり判定**: より正確な円形当たり判定
• **視覚的識別**: 独特な形状で瞬時に識別可能
• **戦略性**: 円形のため角を狙う戦術が不要
• **美観**: より宇宙的で未来的な外観

### 宇宙コロニーの表現
• **O'Neill型**: 円筒形の回転する宇宙居住施設
• **工業施設**: 🏭で製造・居住複合施設を表現
• **規模感**: 240pxの大きさで巨大構造物を演出

これで、スペースコロニーがより現実的で視覚的に魅力的な円形デザインになりました!宇宙空間に浮かぶ巨大な円筒形居住施設として、ゲームの世界観がより豊かになります。
Enter fullscreen mode Exit fullscreen mode

(Sorry Japanese Only.)

I didn't specifically mention it, but I was a bit moved when it came out with Realism: Close to an actual space colony (O'Neill type) cylindrical shape.

Conclusion

I completed it for now and committed it to GitHub. The README files were created based on the resources generated by Q CLI.

https://github.com/Kenichiro-Wada/amazon-q-developer-games/tree/main/guardian

"By the way, it says Multilingual support (7 languages), but while the in-game explanations have been changed, the surrounding descriptions and such remain the same, so it's in a half-done state."

  • Example of French notation

france1

france2

By the way, even if you exit with /quit, you can resume by giving instructions like this:

> 地球防衛ゲーム「ガーディアン」を改良しようと思います。
地球防衛ゲーム「ガーディアン」の改良について、まずは現在のプロジェクト構造を確認させてください。


🛠️  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
現在のゲームの状況がよく分かりました。どのような改良を考えていますか?例えば:

• **新しい敵の種類**を追加
• **パワーアップシステム**の実装
• **効果音や音楽**の追加
• **新しいゲームモード**の追加
• **ビジュアルエフェクト**の強化
• **モバイル対応**の改善
• **リーダーボード機能**の追加

具体的にどの部分を改良したいか教えてください。現在のゲームコードも確認して、最適な改良方法を提案します。
Enter fullscreen mode Exit fullscreen mode

(Sorry Japanese Only.)

Well, that's convenient.

How to Play

To play the game, you can check out the following repository and open guardian/index.html in your browser to start playing.
(Confirmed to work in Google Chrome.)

https://github.com/Kenichiro-Wada/amazon-q-developer-games/

As mentioned before, the author is not good at shooting games, so I can't get a very high score, but I think skilled players could achieve quite high scores.
(Note: Spaceplanes are allies, so don't shoot them down)

Impressions

When I first came up with the idea, I had a rough image of what it would be like, but I was surprised that something close to it, including the UI, was created in the initial stage.

Just by giving instructions to Q CLI, I didn't write any code, including the README. The points to be modified in the code were shown each time, so I could see how it was changed by looking at them (though I can't call it confirmation), but I was really just watching.

Amazon Q Developer is truly amazing.

This was a great experience, and I plan to continue practicing Vibe Coding in the future.

Feel free to check out the repository and try the game. Enjoy!

Warp.dev image

The best coding agent. Backed by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

Top comments (0)

👋 Kindness is contagious

Explore this insightful write-up, celebrated by our thriving DEV Community. Developers everywhere are invited to contribute and elevate our shared expertise.

A simple "thank you" can brighten someone’s day—leave your appreciation in the comments!

On DEV, knowledge-sharing fuels our progress and strengthens our community ties. Found this useful? A quick thank you to the author makes all the difference.

Okay