🎮

Amazon Q Developer CLIで子どもとレトロなシューティングゲームを作る

に公開

Amazon Q Developer CLIでゲームを作ろうキャンペーンが開催されています。

https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt

ということで、とても便利なAmazon Q Developer CLIを使い、娘の要望でレトロなシューティングゲームを作って見ました。

インストールやら設定は、前回自分が別の作業で行ったものを記事にしているので割愛します。
https://zenn.dev/susu3oku2/articles/974adc3255b459

早速作成してみる

インストールが完了すれば、ターミナルでq chatと叩くことでAmazon Q Developer CLIが起動します。あとはチャット形式でエージェント的にコーディングを進めてくれます。

q chat

    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│     You can resume the last conversation from your current directory by      │
│                        launching with q chat --resume                        │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
> このディレクトリでブラウザで動くシューティングゲームを作ってください。
操作方法:

- 左右の矢印キー「←」「→」:宇宙船を移動
- スペースキー:弾を発射

ゲームの特徴:

- カラフルな敵が上から降ってきます
- 敵を撃つとスコアが増えます
- 敵に当たるとゲームオーバーになります
- 時間が経つにつれて敵の出現頻度が増えていきます
- 敵も弾を撃ってきます
- ある程度敵を倒すと武器をゲットでき、玉の発射が強力になります
- 武器は4段階までパワーアップできます
ブラウザで動作するシューティングゲームを作成しましょう。まずは現在のディレクトリの内容を確認します

サクサクと作ってくれて、game.js、index.htmlとstyle.cssを作ってくれました。
実際に、index.htmlをブラウザで立ち上げてみると、ゲームが動きました。

image1

シンプルすぎ!!

あまりにシンプルすぎて、娘からはもう少し「宇宙感出して!」と言われました。
まあそうだよねと思いつつ、他にも「敵を倒したらカッコよく爆発して!」とか、「レベルアップして武器とか強くして!」とか注文がわんさか出てきましたので、全てq chatに丸投げしました。

> 下記の要素を追加してほしい
- 単に上から下に流れてくるだけではなく、斜めに下がってくるものもいること
- プレイヤーの横スクロールはもう少し早く移動できること
- 背景をもっと宇宙感が出るようにする.星をイメージして
- 敵を倒した時に破壊のアニメーションをつけて
了解しました。ご要望に沿って、以下の要素を追加します:

1. 敵が斜めに下がってくる動き
2. プレイヤーの移動速度アップ
3. 宇宙感のある背景(星のイメージ)
4. 敵を倒した時の破壊アニメーション

それでは、ファイルを修正していきましょう。

<中略>

> 敵をある程度倒すと武器が出現するようにしてください
- 武器レベルは4段階で、レベルアップすると玉の出方が増えたり、複数方向に発射されるようになります
- 大きい敵を複数回倒すと、たまに防御アイテムが手に入り、一度だけ攻撃を防ぐことができます

これを何回か繰り返し、娘も喜んでくれるゲームができました。

宇宙感もあるし、武器も強くなります。

GitHubも載せておきます(久しぶりにGitHubを使ったのでうまくいってるか心配、、、)
https://github.com/ssknsskn/retroShootingGame

まとめ

  • 割とレトロなゲームはシンプルでわかりやすく、娘もハマってくれたので、満足です。
  • Amazon Q Developer CLIは賢いし、使いやすいです。

Discussion