← ポータルに戻る

ソースコード解説: キャッチ・ザ・ボックス！

AIと作るミニゲーム開発の裏側

上から降ってくる青いブロックをキャッチする、シンプルな2Dアクションゲームです。
このゲームはすべてAI（LLM）との対話を通して作られました。

実際に遊んでみる 🎮

1. どんなプロンプト（指示）で作ったか？

最初はごくシンプルな指示から始めました。

"HTMLのCanvasを使って、上から落ちてくる青い箱を赤い自機でキャッチするシンプルなブラウザゲームを作って。自機はマウスで左右に動かせるようにして。"

これだけで、基本的な落下プログラムと当たり判定のコードが生成されます。
その後、「スコアの追加」「落下速度の調整」「ゲームオーバー処理」「ランキングAPIへの送信機能」などをAIに順番にお願いし、継ぎ足していく形で完成させました。

2. HTMLとJavaScriptの全ソースコード

以下のコードすべてをコピーし、index.html という名前で保存すれば、誰でもあなたのパソコンで（ローカル環境で）このゲームを動かすことができます！ぜひ改造して遊んでみてください。
※ランキングAPI送信部分は、実際のサーバーが動いている環境でのみ機能します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>キャッチ・ザ・ボックス！</title>
    <!-- (省略) スタイル部分などの詳細設計 -->
    <style>
        #gameCanvas {
            background-color: #fff;
            border: 4px solid #333;
        }
    </style>
</head>
<body>
    <div id="uiContainer">
        <div id="scoreBoard">スコア: 0</div>
        <div id="livesBoard">❤️❤️❤️</div>
    </div>
    
    <canvas id="gameCanvas" width="400" height="400"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 自機の位置とサイズ
        let pX = canvas.width / 2;
        const pSize = 40;
        
        // 落ちてくるアイテム配列
        let items = [];
        let score = 0;
        let lives = 3;

        // マウスの動きに合わせて自機を移動
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            pX = e.clientX - rect.left - pSize / 2;
        });

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 自機(赤)の描画
            ctx.fillStyle = '#ff4d4d';
            ctx.fillRect(pX, canvas.height - pSize - 10, pSize, pSize);

            // アイテムの落下処理・当たり判定
            // (ここに当たり判定とスコア加算のロジックが書かれています)

            requestAnimationFrame(update);
        }
    </script>
</body>
</html>

3. 改造してみよう！

コードを手に入れたら、少しだけ書き換えてみましょう。例えば以下のように変更すると、ゲームの難易度やルールを変えることができます。

まずは小さな変更から、自分だけのオリジナルゲームに育ててみてください！