n_itsuki / Amazon Q CLIを使ってゲームを作りたい

Created Sun, 08 Jun 2025 16:41:13 +0900
2910 Words

はじめに

8月3日（火）の AWS JumpStart Next #1 に参加してきました。去年の8月あたりに新人研修もかねて JumpStart に参加していたご縁的なやつです。 （Gemini のハンズオンで Google のオフィスに行けて、今回で AWS に行けたので残すは Meta だけですね？）

このイベントで本来はAmazon Q CLI というAIコーディングエージェントを用いたハンズオンができるはずでしたが、いろいろあってできなくなってしまい…。ただ、そこで"Amazon Q CLI でゲームを作ろう Tシャツキャンペーン"というのがあることを知り、せっかくなので作ってみました！！！

alt text

Amazon Q CLI でゲームを作ろう Tシャツキャンペーン

前提

Amazon Q CLI でゲームを作ろう Tシャツキャンペーン

このキャンペーンは何なの？

「Amazon Q CLI でゲームを作ろう」キャンペーンは、AIコーディングアシスタントを実際に体験し、Amazon Q CLI を使って自分のペースで新しいゲームを作り出すための創造性と想像力を発揮する機会です。

何をしたらTシャツがもらえる？

1: Amazon Q CLI を使ってゲームを作ろう

2: あなたが何をどのように作ったかについてブログを書くか、あなたの体験についての動画を録画して、ソーシャルメディアに投稿しよう

3: Amazon Q ブランドの T シャツをゲットしよう

作ったもの

ボールバトルアリーナ らしいです（命名も任せた）（プレイリンク）

Readme の内容# ボールバトルアリーナ

概要

ボールバトルアリーナは、プレイヤーとCPUが対戦するシンプルで楽しいブラウザゲームです。中央の穴にボールを入れるか、相手のフィールドにボールを送り込むことで勝利を目指します。

遊び方

  1. プレイヤーは左側のフィールドからスタートします
  2. ボールをクリック＆ドラッグして、発射方向と強さを決めます
  3. マウスを離すとボールが発射されます
  4. 中央の穴にボールを入れるか、相手のフィールドにボールを送り込むことが目標です
  5. すべてのボールを穴に入れるか相手フィールドに送り込んだ方が勝利です

特徴

  • 物理エンジンによるリアルな動きと衝突
  • 中央をピークとする擬似傾斜効果
  • 戦略的なCPU AI
  • モダンで美しいビジュアルデザイン
  • 直感的な操作性

技術的詳細

  • HTML5 Canvas を使用したグラフィック描画
  • JavaScript による物理演算
  • カスタム衝突検出システム
  • 視覚効果（グロー、トレイル、グラデーション）

開発者向け情報

このゲームは以下のファイル構成になっています：

  • index.html - メインのHTMLファイル
  • css/style.css - スタイルシート
  • js/game.js - ゲームのメインロジック
  • js/physics.js - 物理エンジン

alt text

Amazon Q CLI を使ってみて

35回の会話?35個のプロンプト?で完成しました。(もうちょっと早く終わると思った…)

デフォルトだと Sonnet 3.7 を使うらしい？そこらへんがわかりませんでしたが、まあまあいい感じに動いてくれました

最初の画面、かっこいい

alt text

これは最初のプロンプトの結果ですが、結構できていて驚いた

* **操作方法**: クリック＆ドラッグで玉を発射（方向・強さを指定）
* **ステージ**: 長方形フィールド中央に縦向きの壁＋中央に穴（穴径＝玉径×2）
* **物理挙動**: 擬似傾斜で穴を外した玉は自陣側に戻る
* **勝利条件**: 自分の玉を4つすべて相手陣地に送り切る
* **CPU挙動**: 定期的に自陣の最前列の玉を穴に向けて発射し、プレイヤーの玉を衝突で戻そうとする
このようなゲームを作りたいです

alt text

あと、最初のほうは自分で git add . && git commit -m "num" を実行してましたが、（これから最終的な作業が終わるごとにgit add .とgit commit -m "num" (今回のnumは11、次は12のようにインクリメントされます)してください , (コミットメッセージは"num: やったこと"の形式で書いてください) のように書いたら勝手にやってくれたのでめちゃ楽になった。issue作ってくれたり、PR作ってくれたりするようにもできただろうが、まあいいかになってしまった。

裏企画？Sonnet 4 で同じゲームを作ってもらおう

Sonnet 4 で最初のプロンプトを投げて作ってもらいました。

19回のやり取りで、よりいい感じに作ってくれましたね…(個人的にはこっちのゲームのほうが好きです)

(ただ、Amazon Q CLI でも Sonnet 4 を使えるようになったらしいので、あまり意味はないかも？) (/modelでモデルを選択するらしいが、エラーが出てしまいました…)

プレイリンク

alt text

GitHub MCP に脆弱性があった～みたいな話もあり、使っていないので git 管理がめんどくさかったですね

readme.md(本当は19回だが、うち3回は何も変更点がなかったのでまあそんなもんか？)

今までの開発プロセスを番号付きでまとめます：

玉入れ対戦ゲーム開発プロセス

1. 基本仕様の設定

  • 操作方法: クリック＆ドラッグで玉を発射（方向・強さを指定）
  • ステージ: 長方形フィールド中央に縦向きの壁＋中央に穴（穴径＝玉径×2）
  • 物理挙動: 擬似傾斜で穴を外した玉は自陣側に戻る
  • 勝利条件: 自分の玉を4つすべて相手陣地に送り切る
  • CPU挙動: 定期的に自陣の玉を穴に向けて発射し、プレイヤーの玉を衝突で戻そうとする

2. 初期配置の修正

  • 玉の初期配置を縦に4つ並べる形に変更

3. 物理システムの改良

  • 中央の壁を高く、両端を低くする山型の傾斜システム実装
  • 玉が下や中央に集まる問題を解決

4. スコアリングシステムの修正

  • 相手陣地に入った玉のスコア判定を即座に実行
  • スコア判定のタイミング遅延問題を解決

5. 相手陣地玉の表示方法変更

  • 相手陣地に入った玉を削除せず残す
  • 操作不可だが衝突は可能にする

6. 傾斜システムの詳細調整

  • 画面端(a,e)が最低、中央(c)が最高、中間点(b,d)が同じ高さの山型傾斜
  • 上下方向は傾斜に無関係、X座標のみで重力を決定

7. Y方向重力の削除

  • 左下・右下に玉が集まる問題を解決
  • X方向の傾斜重力のみに変更

8. ミラー表示システムの実装

  • 相手陣地の玉を自分陣地にミラー表示
  • 点数が入るほど自分陣地に邪魔な玉が増える戦略的バランス

9. ミラー玉との衝突処理

  • ミラー玉との衝突判定を実装
  • アクティブ玉のみ弾かれ、ミラー玉は固定

10. ゲームリセット機能の完全実装

  • 「もう一度プレイ」ボタンで確実に初期状態に戻る
  • ゲームループの管理改善

11. 壁抜け防止システム

  • 高速移動時の壁抜け問題を解決
  • 連続衝突判定（Continuous Collision Detection）の実装
  • 移動を細分化して確実な衝突判定

12. 速度制限システム

  • 発射速度の上限を設定（表記・実際ともに最大20）
  • パワー表示と実際の速度を統一

最終的な特徴

  • 戦略性: ミラー玉システムによる邪魔要素
  • 物理演算: X方向の傾斜重力による自然な玉の動き
  • 確実性: 壁抜け完全防止、正確なスコアリング
  • バランス: 点数を取るほど難易度が上がるゲーム設計

さいごに

Amazon Q CLI を使ってゲームを作ってみて、正直 CLI の良さがわからず…になってました。が、よくよく調べてみると git worktree なるものを使うとそれぞれの CLI でブランチを切って並列開発が出来るそうですね。今回は「一つのゲームを作る」という目的なので並列開発しづらいですが、複数作りたい機能があってそれが独立していれば Claude Desktop や GitHub Copilot などを使うよりも断然早く開発が出来そう！

今度はもうちょっと大きな、並列で開発できるものを作ってみたいですね！！！