Amazon Q CLIで作る、神経衰弱×Gハンターゲーム

突然ですが、このたび「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」に参加させていただき、｢Gハンターゲーム」を開発しました。このゲームは神経衰弱をベースにしたブラウザゲームで、家の中の隠れ場所から人類の敵、黒い悪魔＝Gを見つけて退治するという設定です。

実は最近家のお引越しをしたのですが、ありとあらゆるところに隙間のある中古物件で、引越し当初からGが出てしまい本当に大変でした・・・。せめてこの苦しみと悲しみをゲームに昇華させようと思い、キャンペーンに参加することにしました。

ゲームはこちら↓（ゲームオーバーで大変なことになるので、Gが苦手な方は要注意！）
https://opus-i.com/g_hunter_game.html

ブラウザゲームを作るのは人生で初めてでしたが、Amazon Q CLI のおかげで、わずか3時間ほどでゲームを完成させることができました。そしてリアルでもゲームをヒントに隙間を塞ぎまくったおかげでGも見なくなり、一石二鳥！という感じで本当に良かったです。

この記事ではざっくりですが、ゲームを作った過程とポイントをご紹介していきたいと思います。

ゲーム概要
- ゲームルール
- ゲーム設定
開発環境とツール
- 使用技術
- 開発の流れ
Claude Sonnet 4について
- 従来モデルとの違い
- 実際の開発例
ゲームの技術的特徴
Amazon Q CLIの便利さ
- 開発のしやすさ
- コード品質の向上
まとめ

ゲーム概要

今回のゲームは、クリックするだけでOKのシンプルな神経衰弱と、G退治を組み合わせたブラウザゲームです。

ゲームルール

ジャンル: 神経衰弱
目標: 10ペア（20枚）のカードをすべてマッチさせてGを退治
制限: 40クリック以内でクリアする必要がある

ゲーム設定

プレイヤーは家の住人となり、冷蔵庫の後ろ、シンクの下、ベッドの下など、Gが潜んでいそうな10箇所の隠れ場所からGを見つけ出します。各場所には特徴的なアイコン（🧊🚿🛏️など）が付いており、同じ場所のペアを見つけることでGを退治できます。

開発環境とツール

今回のブラウザゲームでは仕様策定から開発、動作検証までAmazon Q CLIとClaude Sonnet 4を利用しました。自然言語で説明するだけなので、私のようにプログラム知識がほとんどなくてもゲームが作成できると思います。

なお、細かいCSSアニメーションについてはニュアンスだけだと伝わりづらいことが多かったので、例えば「めくったカードの透過度は必ず100％、つまり透過なしにしてください。カードの絵柄を見えやすくするためです。」と目的と具体的な指示を伝えることでスムーズに進めることができました。

使用技術

フロントエンド: HTML5 + CSS3 + JavaScript
グラフィック: p5.js（キャンバス描画）
開発支援: Amazon Q CLI + Claude Sonnet 4

開発の流れ

Amazon Q CLIでプロジェクト初期化
Claude Sonnet 4にゲーム仕様を相談
段階的な機能実装とテスト
ビジュアル演出の追加
ゲームバランス調整

Claude Sonnet 4について

従来モデルとの違い

当初、Amazon Q CLIのデフォルトモデルであるClaude Sonnet 3.7を使っていましたが、途中からSonnet 4に変更したおかげで、開発効率がかなりアップしました。

コード生成精度: 一発で動作するコードの生成率が大幅向上
複雑な要求理解: 「神経衰弱でGを退治」という曖昧な要求も的確に理解
最適化提案: パフォーマンス改善や可読性向上の提案が秀逸
デバッグ支援: エラーの原因特定と修正が迅速

実際の開発例

例えばAmazon Q CLIから「煙突から煙が立ち上るアニメーションが欲しい」と自然言語で依頼するだけで、以下のようなアニメーションを自動で実装してくれました。

JavaScript

// 煙のアニメション
function createSmokeParticle() { let smokeX = width/2 + 165; // 煙突の中央 let smokeY = 55; // 煙突の上部 smokeParticles.push({ x: smokeX + random(-5, 5), y: smokeY, vx: random(-0.5, 0.5), vy: random(-0.5, -1), size: random(8, 15), life: random(120, 180), opacity: random(150, 200), expansion: random(0.02, 0.05) });
}

風の影響・透明度の変化・サイズの拡大など、複数のアニメーションを組み合わせ、より自然な煙の動きになるようにしてくれています。

ゲームの技術的特徴

神経衰弱の実装

ゲームのコアとなる神経衰弱の実装も、Amazon Q CLIから作成しています。

JavaScript

function checkMatch() { let card1 = game.flippedCards[0]; let card2 = game.flippedCards[1]; if (card1.type === card2.type) { // マッチ成功の処理 card1.matched = true; card2.matched = true; game.matchedPairs++; game.cockroachCount++; // エフェクト生成 createParticles(card1.x + card1.width/2, card1.y + card1.height/2, '🎉'); }
}

ゲームバランス

当初は60クリック制限でしたが、テストプレイの結果、ちょっと簡単すぎることが判明。Amazon Q CLIでゲームバランスについて相談し、40クリックに変更することで、簡単すぎず難しすぎない適度なバランス調整ができました。

40クリック制限: 適度な緊張感を演出
幸福度システム: プレイヤーの進捗を視覚的に表現
段階的難易度: 10ペアという適度なボリューム

視覚的演出

ゲームクリア時の紙吹雪エフェクトは最初、すぐにアニメーションが終わってしまう寂しいエフェクトだったのですが、Amazon Q CLIで変更を依頼し、ゲームクリアに相応しい華やかなエフェクトに改善することができました。

背景: 空と雲が流れる家のイラスト
煙突: リアルタイムで煙が立ち上る
パーティクル: マッチ成功時のエフェクト
紙吹雪: ゲームクリア時の盛大な祝福を演出
Gの襲来: ゲームオーバー時の恐怖を演出

パフォーマンスの最適化

煙突から出てくる煙の動きが不自然、または煙が多すぎたり早すぎたりで、ブラウザが重くなる問題が発生。Amazon Q CLIを使って調整し、スムーズな動作を実現しました。

Amazon Q CLIの便利さ

開発のしやすさ

Amazon Q CLIを使うことで、その場で思いついたアイディアをすぐにコードに落とし込んで検証できました。｢こんなアニメーションはどうかな？」「こんな機能もつけたらよいかも？」と思いついたら、自然言語でAmazon Q CLIに相談するだけで実装できるため、とても便利です。不要になった機能を削除するのも簡単でした。