はじめに
本記事は Amazon Q CLI でゲームを作ろう Tシャツキャンペーンの参加記事です。
できたもの
以下から遊べます。
遊びかた
- 「新しいゲーム」ボタンをクリック
- バブルをクリックして同じ色を1個ずつ選択し、3個以上で消去
- 高スコアを目指してプレイ！
スクリーンショット
ソースコードはこちら
指示内容
ベースのプロンプトも Q CLI と一緒に考えてつくりました。冒頭のキャンペーンブログでは PyGame によるゲーム作成方法が案内されていましたが、さくっとブラウザで遊べるように HTML + JavaScript のみで作るように指示しています。
次の要件をもとに HTML + JapaScript のみで動作するバブルゲームをレスポンシブ対応で作成してください。
ゲームルール
基本操作
1. 縦横斜めで隣接する同じ色のバブルを1ずつクリックし、3個以上選択すると削除
2. ゲームは9×10のグリッドで、バブルが上部の赤いライン(9行目)に到達するとゲームオーバー
バブル生成システム
- 初期配置: 底部から4×10列のバブルでゲーム開始、
- 新規生成: 底部から一列ずつバブルが湧き出る
- 生成間隔: 初期10秒、レベルアップで0.5秒ずつ短縮（最短3秒）
- 重力システム: 支えを失ったバブルは自動的に落下
スコアシステム
- 基本点数: 10点 × 消去個数
- ボーナス点数: (消去個数 - 3) × 5点 × 消去個数
- 例: 5個消去の場合 → (10 + 2×5) × 5 = 100点
レベルシステム
- レベルアップ条件: 300点ごと
- 速度変化: レベルアップでバブル生成間隔が0.5秒短縮
- 最高速度: 3秒間隔（レベル15以降）
特殊アイテム
- 爆弾💣: 選択したバブルを中心に半径100px内のバブルを一括消去
- 初期個数: 3個
- 獲得点数: 消去1個につき15点
- 使用条件: バブルを1個選択してから使用
一発でほぼ動作するものができあがったのですが、バブルの落下システムの不具合や、3 個以上のバブルを選択するときの操作の改善、アニメーションの追加、CSS の調整などを追加で指示しました。
Tips
モデル選択
Amazon Q Developer CLI の v1.11.0 以降で 最新の Claude Sonnet 4 モデルが利用可能になっています。どうせなら最新のモデルを利用したいですよね。
インストール直後のデフォルトは Claude 3.7 Sonnet なので必要に応じて変更しましょう。チャット中に /model コマンドで変更できます。
> /model
? Select a model for this chat session ›
❯ claude-4-sonnet (active)
claude-3.7-sonnet
claude-3.5-sonnet
✔ Select a model for this chat session · claude-4-sonnet (active)
Using claude-4-sonnet
ただし既に開始しているセッション内でのみ有効であるため、デフォルトを変更したい場合は、q settings コマンドを使用しましょう。
q settings chat.defaultModel claude-4-sonnet
チャット履歴の保存とロード
チャット内で /save で会話履歴のエクスポート、load で会話履歴のインポートができます。例えば不具合修正が長引いて途中でセッションが切れてしまった場合でも、会話履歴を保存しておけばこれまでの修正内容を踏まえて指示が出せるといったメリットがあります。あとはこういったブログを書く時も、後から会話履歴を見直すことができるので便利ですね。
> /save chat_history.json
✔ Exported conversation state to chat_history.json
> /load chat_history.json
✔ Imported conversation state from chat_history.json
画像入力による修正指示
Amazon Q Developer CLI の v1.10.0 以降で画像入力がサポートされています。UI 関連の不具合などでテキストでは意図を伝えきれなかったときに、スクリーンショットをインプットとして渡すことで修正が上手くケースもありました。
> ./screen-shot.png 現在のゲーム画面のスクリーンショットです。余白が右側だけ大きくなっているので修正したいです。"
以上です。
参考になれば幸いです。