[Claude Code] 入門講座 #03：Claudeで簡単なJSゲームを作る - モグラ叩き編

テーマ：JavaScriptでゲーム製作

Claude Sonnet（Poe）に自然言語で依頼して、 簡単なJSゲーム（モグラ叩き） を生成してもらいます。

「HTML＋CSS＋JSを含んだゲームを1つのHTMLファイルで出力してほしい」

と依頼するだけで、実行可能な状態のコードが得られるかどうかを検証します。

実際のプロンプト例

私のプロンプト：

user icon 
HTML＋CSS＋JavaScriptで、簡単なモグラ叩きゲームを作ってください。
- スタートボタンを押すと、ランダムにモグラが出現
- モグラをクリックするとスコアが増える
- 制限時間（30秒）で終了し、結果を表示
- 1つのHTMLファイルにまとめてください

Claude Sonnetの出力

🤖
モグラ叩きゲームを作成しました。
すべてのコードを1つのHTMLファイルにまとめています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モグラ叩きゲーム</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .game-container {
            width: 300px;
            text-align: center;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 20px 0;
        }

        .hole {
            width: 80px;
            height: 80px;
            background-color: #654321;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .mole {
            width: 60px;
            height: 60px;
            background-color: #964B00;
            border-radius: 50%;
            position: absolute;
            bottom: 100%;
            left: 10px;
            transition: bottom 0.1s;
        }

        .mole.active {
            bottom: 10px;
        }

        .info {
            margin: 10px 0;
            font-size: 1.2em;
        }

        button {
            padding: 10px 20px;
            font-size: 1.2em;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>モグラ叩きゲーム</h1>
        <div class="info">
            <div>時間: <span id="time">30</span>秒</div>
            <div>スコア: <span id="score">0</span></div>
        </div>
        <button id="startButton">スタート</button>
        <div class="game-board">
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
            <div class="hole"><div class="mole"></div></div>
        </div>
    </div>

    <script>
        const startButton = document.getElementById('startButton');
        const timeDisplay = document.getElementById('time');
        const scoreDisplay = document.getElementById('score');
        const moles = document.querySelectorAll('.mole');

        let score = 0;
        let timeLeft = 30;
        let gameInterval;
        let moleInterval;

        function showMole() {
            // 現在表示されているモグラを隠す
            moles.forEach(mole => mole.classList.remove('active'));

            // ランダムな位置に新しいモグラを表示
            const randomIndex = Math.floor(Math.random() * moles.length);
            moles[randomIndex].classList.add('active');
        }

        function startGame() {
            // ゲームの初期化
            score = 0;
            timeLeft = 30;
            scoreDisplay.textContent = score;
            timeDisplay.textContent = timeLeft;
            startButton.disabled = true;

            // モグラを定期的に表示
            moleInterval = setInterval(showMole, 1000);

            // タイマーの開始
            gameInterval = setInterval(() => {
                timeLeft--;
                timeDisplay.textContent = timeLeft;

                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        function endGame() {
            clearInterval(gameInterval);
            clearInterval(moleInterval);
            moles.forEach(mole => mole.classList.remove('active'));
            startButton.disabled = false;
            alert(`ゲーム終了！\nあなたのスコア: ${score}`);
        }

        // モグラをクリックしたときのイベント
        moles.forEach(mole => {
            mole.addEventListener('click', () => {
                if (mole.classList.contains('active')) {
                    score++;
                    scoreDisplay.textContent = score;
                    mole.classList.remove('active');
                }
            });
        });

        // スタートボタンのイベント
        startButton.addEventListener('click', startGame);
    </script>
</body>
</html>

スクリーンショット

  1. Claude Sonnet（Poe）コード生成
Claude Sonnet（Poe）に自然言語で依頼して、 簡単なJSゲーム（モグラ叩き） を生成
  1. モグラ叩きゲーム動作画面
Claude Sonnet（Poe）に自然言語で依頼して、 簡単なJSゲーム（モグラ叩き） を生成：ゲーム動作画面

出力されたコードの特徴

  • 1ファイルで完結（コピペで即動作）
  • モグラはランダムに出現、クリックでスコア加算
  • CSSでシンプルなビジュアルを実現
  • JavaScriptは構造が明快で読みやすい

実行方法：

  • VSCode + Live Server で index.html に貼り付けて実行
  • スタートボタンで30秒間のプレイが可能
  • スコアはクリック数に応じて加算

改良：ゲームオーバー画面を作成

追加プロンプト

ゲームオーバー画面を追加して見ます。

user icon
ゲームオーバー画面をもっと魅力的にしたいです。
🤖
ゲームオーバー時にモーダルウィンドウを表示し、より魅力的な結果表示を実装しました。 スコアに応じて異なるメッセージを表示し、アニメーション効果も追加しています。
🤖

主な改善点：

  1. モーダルウィンドウの追加

    • 半透明のオーバーレイ付きの洗練されたデザイン
    • アニメーション効果でスムーズに表示

  2. スコアに応じた評価システム

    • 25点以上：🏆
    • 20点以上：🥇
    • 15点以上：🥈
    • 10点以上：🥉
    • 10点未満：🎯

  3. 視覚的な演出の強化

    • スコア表示のアニメーション
    • メダルの回転アニメーション
    • モーダルウィンドウの出現アニメーション

  4. UIの改善

    • より見やすいフォントサイズとレイアウト
    • ホバー効果の追加
    • 「もう一度プレイ」ボタンの追加

  5. レスポンシブ対応

    • さまざまな画面サイズに適切に対応
    • モバイルでも見やすいデザイン

これらの改善により、ゲーム終了時の達成感がより一層感じられるようになり、プレイヤーのリプレイ意欲を高める効果が期待できます。

動作画面（スクショ）

ゲーム終了後、ポップアップ画面が出るようになりました。

Claude Sonnet（Poe）JSゲーム（モグラ叩き） 改造「ゲームオーバー画面」

ゲームプレイ用ページ作成

作成したゲームをプレイできるようにＷＥＢ内に設置してみました。

カスタマイズ

  • モバイル対応（タッチ操作）
  • ゲーム難易度を調整（出現速度、スコア計算）
  • スコア履歴・ランキング・再プレイ機能の追加など

所感とTips

  • Claude Sonnetでも十分に実用的なJSゲームが生成可能
  • コード構造がシンプルなので初学者の教材にも最適
  • タッチ対応・デザイン変更など、応用もClaudeに依頼可能

次回予告

👉 [Claude Code入門講座 #04：Claudeでエラーを直してもらう - デバッグ体験編]