初めに
今回はAWS社制のAIコーディングエディタKiroを使って、日本語の対話だけで簡単なサッカーゲームを作りました。
https://aws.amazon.com/jp/blogs/news/introducing-kiro/
最近のAIコーディングエディタのパワーは凄く、コーディングスキルが無いエンジニアでも簡単にアプリ開発ができるようになっており、
簡単なゲーム開発を始めてみるのはおすすめです。
実装計画
今回はKiroのPlanモードを使ってまず、要件書の作成行いました。
最初に日本語でサッカーのゲームを作りたいと相談してみました。するといくつかプランの
Kiro君から実装の方向性について提案が来たので、回答をしました。
そんなやり取りを何往復してると実装計画の作成ができました。
実装計画 - ブラウザPK戦ゲーム
問題定義（Problem Statement）: ローカル（ブラウザで開くだけ）で遊べる、シンプルなPK戦サッカーゲームを実装優先で作る。キッカーの背後からゴールを見る奥行き視点で、狙い＋パワーでシュートを打ち、キーパーとの駆け引きを楽しむ。
要件（Requirements）:
視点: キッカーの背後からゴールを見る（奥にゴールがある奥行き表現）
操作: 左右で狙う方向、長押し/ゲージでパワーを決めて発射（狙い＋パワー）
キーパー: ランダムに左右どちらかへ飛ぶ
勝敗: 5本交互（プレイヤーが蹴る → プレイヤーがキーパーになる）の本格PK戦、同点ならサドンデス
技術: HTML + Canvas + JavaScript（既存 game/ と同じ構成、ブラウザで開くだけ）
言語表記: UI・コメントとも日本語
背景（Background）:
HTML/CSS/JS 構成で、index.html を開くだけで動く形にする。
新規に soccer-pk/（index.html / style.css / game.js）を作成し、既存ゲームとは独立させる。
Canvas の擬似奥行きは、ゴールを画面奥側の小さい台形、手前を大きく描画し、ボールが飛ぶにつれてサイズを縮小（遠ざかる）させることで表現する。
ゲームフロー:
mermaid
stateDiagram-v2
[*] --> タイトル
タイトル --> プレイヤーキック: ゲーム開始
プレイヤーキック --> 結果表示K: 狙い+パワーで発射 / CPUキーパーがランダムに飛ぶ
結果表示K --> プレイヤーセーブ: 次へ
プレイヤーセーブ --> 結果表示S: 飛ぶ方向を選択 / CPUが蹴る
結果表示S --> プレイヤーキック: 次のラウンドへ(5本未満)
結果表示S --> 勝敗判定: 5本終了
勝敗判定 --> 結果画面: 決着
勝敗判定 --> プレイヤーキック: 同点(サドンデス)
結果画面 --> タイトル: もう一度
画面ごとの操作:
プレイヤーキック画面: ←→で狙う方向を調整、スペース長押し（またはクリック長押し）でパワーゲージを溜め、離して発射。CPUキーパーがランダムに左/中央/右へ飛ぶ。
プレイヤーセーブ画面: ←↑→などで飛ぶ方向（左/中央/右）を選択。CPUがランダムな位置に蹴る。方向が一致すればセーブ。
スコア表示: 上部に両者の得点（5本ぶんのマーク ⚪/⚽/❌）を表示。
提案する解決策（Proposed Solution）: 状態機械（タイトル / キック / セーブ / 結果 / 終了）でゲーム進行を管理。1つの game.js 内に状態管理・入力処理・物理（ボールの直線移動＋奥行きスケール）・描画（requestAnimationFrame ループ）を実装。判定はシンプルに「ゴール枠を左/中央/右の3レーン × 高さで分割し、キーパーのカバー範囲とボール着弾位置が重なればセーブ」というロジックにする。
タスク分解（Task Breakdown）:
Task 1: プロジェクト雛形とCanvas描画ループ
目的: soccer-pk/index.html・style.css・game.js を作成し、Canvas を表示して requestAnimationFrame の描画ループを回す。
実装ガイド: 緑のピッチ背景を1色塗りつぶしで描画。画面サイズ固定（例 800×600）。
テスト: ブラウザで開いて緑の画面とFPSが安定して描画されることを目視確認。
Demo: index.html を開くと緑のピッチが表示される。
Task 2: 奥行きのあるゴールとフィールドの描画
目的: 画面奥にゴール（台形＋ゴールネット枠）、手前にボールを置く擬似3D表現を描く。
実装ガイド: 地平線・ゴールの4隅座標を定数化。ゴールを左/中央/右の3レーンに区切る補助線（デバッグ用、後で非表示可）。
テスト: ゴールが奥に小さく、手前ほど広がる遠近感に見えるか目視確認。
Demo: 奥にゴール、手前にボールがある静止画面が表示される。
Task 3: 狙い＋パワーの入力とエイム表示
目的: ←→で狙う方向（左/中央/右、必要なら高さ）を変え、スペース長押しでパワーゲージが増減する入力処理を実装。
実装ガイド: エイム位置をゴール上のマーカーで可視化。パワーは0〜100のゲージをUIバーで表示。キーボード（keydown/keyup）対応。
テスト: 矢印でマーカーが動き、長押しでゲージが伸び、離すと値が確定することを確認（コンソールログで値検証）。
Demo: ゴール上に狙いマーカーが動き、パワーゲージが操作できる。
Task 4: ボール発射と奥行きアニメーション
目的: 発射でボールが手前から奥（狙い位置）へ飛び、距離に応じて縮小するアニメーションを実装。
実装ガイド: 始点→着弾点を線形補間（t:0→1）。サイズは 1-t でスケール。パワーで飛翔速度を変える。
テスト: 異なる狙い/パワーでボールが対応する着弾点に届くか確認。
Demo: 発射するとボールがゴールへ向かって飛んでいく。
Task 5: CPUキーパーとセーブ/ゴール判定（プレイヤーキック）
目的: CPUキーパーがランダムに左/中央/右へ飛び、ボール着弾レーンと一致すればセーブ、外れればゴールの判定を行う。
実装ガイド: キーパーをスプライト（丸＋手）で表現し、飛ぶアニメーションを付ける。判定後に「GOAL!」/「SAVE!」を表示。
テスト: レーン一致でセーブ、不一致でゴールになるロジックを複数パターンで確認。
Demo: シュートを打つとキーパーが飛び、ゴールかセーブかが判定・表示される。
Task 6: プレイヤーがキーパーになるターン（CPUキック）
目的: プレイヤーが飛ぶ方向を選択し、CPUがランダムに蹴る。一致でセーブ、不一致で失点の判定を実装。
実装ガイド: 視点はそのまま、UIで「左/中央/右」を選ぶ。選択後にCPUのボールが飛ぶアニメーション→判定。
テスト: プレイヤーの選択とCPUの蹴り先の一致/不一致で正しく判定されるか確認。
Demo: 自分がキーパーの番で方向を選び、止められるか失点するかが分かる。
Task 7: PK戦の進行管理とスコアボード
目的: 「キック→セーブ」を1ラウンドとして5本交互に進め、両者の得点を加算・表示する状態機械を実装。
実装ガイド: 状態（TITLE/KICK/SAVE/RESULT/GAMEOVER）と現在のラウンド数・スコアを管理。上部に ⚽/❌ のマークでスコアボード表示。
テスト: 5本ぶんのターンが正しい順序で進み、スコアが正しく加算されることを確認。
Demo: タイトルから始めて5本交互のPK戦を最後まで通しで遊べる。
Task 8: 勝敗判定・サドンデス・リスタートと仕上げ
目的: 5本終了で勝敗を判定（同点ならサドンデス継続）し、結果画面とリスタートを実装。効果音やアニメーションの仕上げも行う。
実装ガイド: 勝敗確定時に「WIN/LOSE/DRAW→サドンデス」を表示。結果画面に「もう一度」ボタン。簡単な効果（決定時のフラッシュ等）を追加。
テスト: 勝ち/負け/同点→サドンデスの各分岐を確認。リスタートで初期状態に戻ることを確認。
Demo: 1試合を最後まで遊び、勝敗が出てもう一度遊べる完成版。
この計画で進めて良いか、それとも調整したい点はありますか?（例: 高さ方向の狙いは省く、サドンデスは不要、効果音は入れない、など）
次に作成した要件定義書をもとにDefaultモードにてアプリの実装を行いました。
アプリの実装自体は基本的にKiro君に任せました。
できたアプリ
このようなサッカーのPK戦を楽しめるアプリができました。
ボールを蹴る場所を決めて、ボールを蹴ります。
ゴールが決まりました！！
キーパー側のターンでは相手が蹴りそうな場所を予想して、ボールを止めていきます。
最後に
今回はKiroを使って簡単なサッカーゲームを作ってみました。
AIコーディングエディタを使うとIT未経験者でも簡単にゲームやアプリを作ることができて、
とても楽しいのです。色々試してみるのをお勧めします。
自分の周りでも、AIコーディングに触ってみたらとてもハマってしまう人が続出しています。
是非、一度試してみることをお勧めします！