JavaScriptで作る簡単ミニゲーム【コピペOK】

はじめに:JavaScriptでゲームを作ろう

「プログラミングは難しそう…」「ゲームを作りたいけど、何から始めればいいかわからない」

そんなあなたでも大丈夫です。この記事のコードをコピペするだけで、今すぐブラウザで遊べるゲームが完成します。

JavaScriptは、ブラウザで動くプログラミング言語です。特別なソフトは不要で、メモ帳とブラウザさえあれば、誰でもゲームが作れます。

この記事では、「もぐら叩きゲーム」を作ります。完成したコードを全て公開しているので、コピペして動かすだけでOKです。

今回作るゲーム:もぐら叩きゲーム

ゲーム内容:

9つの穴からランダムにもぐらが出てくる
制限時間30秒でもぐらをクリック
叩いた数がスコアになる

特徴:

シンプルで分かりやすい
スマホでも遊べる
カスタマイズしやすい

完成品のデモとコード

以下のコードを全てコピーして、「game.html」という名前で保存してください。

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 {
            font-family: 'Arial', sans-serif;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            margin: 0;
        }
        
        #game-container {
            background-color: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        #game-info {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
        }
        
        #score {
            color: #4CAF50;
        }
        
        #time {
            color: #f44336;
        }
        
        #game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .hole {
            width: 100%;
            aspect-ratio: 1;
            background-color: #8B4513;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 3px solid #654321;
        }
        
        .mole {
            width: 80%;
            height: 80%;
            background-color: #FFD700;
            border-radius: 50%;
            position: absolute;
            bottom: -100%;
            left: 10%;
            transition: bottom 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        
        .mole.show {
            bottom: 10%;
        }
        
        .mole:active {
            transform: scale(0.9);
        }
        
        #start-btn, #restart-btn {
            padding: 15px 40px;
            font-size: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        #start-btn:hover, #restart-btn:hover {
            background-color: #45a049;
        }
        
        #restart-btn {
            display: none;
            background-color: #2196F3;
        }
        
        #restart-btn:hover {
            background-color: #0b7dda;
        }
        
        #game-over {
            display: none;
            margin-top: 20px;
        }
        
        #final-score {
            font-size: 30px;
            color: #4CAF50;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <h1>🔨 もぐら叩きゲーム 🔨</h1>
        
        <div id="game-info">
            <div>スコア: <span id="score">0</span></div>
            <div>残り時間: <span id="time">30</span>秒</div>
        </div>
        
        <div id="game-board">
            <div class="hole" onclick="whackMole(0)">
                <div class="mole" id="mole-0">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(1)">
                <div class="mole" id="mole-1">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(2)">
                <div class="mole" id="mole-2">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(3)">
                <div class="mole" id="mole-3">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(4)">
                <div class="mole" id="mole-4">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(5)">
                <div class="mole" id="mole-5">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(6)">
                <div class="mole" id="mole-6">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(7)">
                <div class="mole" id="mole-7">🐹</div>
            </div>
            <div class="hole" onclick="whackMole(8)">
                <div class="mole" id="mole-8">🐹</div>
            </div>
        </div>
        
        <button id="start-btn" onclick="startGame()">ゲームスタート</button>
        
        <div id="game-over">
            <h2>ゲーム終了!</h2>
            <div id="final-score"></div>
            <button id="restart-btn" onclick="restartGame()">もう一度遊ぶ</button>
        </div>
    </div>

    <script>
        let score = 0;
        let timeLeft = 30;
        let gameInterval;
        let moleInterval;
        let isGameRunning = false;

        function startGame() {
            if (isGameRunning) return;
            
            isGameRunning = true;
            score = 0;
            timeLeft = 30;
            
            document.getElementById('score').textContent = score;
            document.getElementById('time').textContent = timeLeft;
            document.getElementById('start-btn').style.display = 'none';
            document.getElementById('game-over').style.display = 'none';
            
            // タイマー開始
            gameInterval = setInterval(updateTimer, 1000);
            
            // もぐら出現開始
            moleInterval = setInterval(showRandomMole, 800);
        }

        function updateTimer() {
            timeLeft--;
            document.getElementById('time').textContent = timeLeft;
            
            if (timeLeft <= 0) {
                endGame();
            }
        }

        function showRandomMole() {
            // すべてのもぐらを隠す
            hideAllMoles();
            
            // ランダムな穴を選ぶ
            const randomHole = Math.floor(Math.random() * 9);
            const mole = document.getElementById('mole-' + randomHole);
            
            // もぐらを表示
            mole.classList.add('show');
            
            // 1秒後に自動的に隠す
            setTimeout(() => {
                mole.classList.remove('show');
            }, 700);
        }

        function hideAllMoles() {
            for (let i = 0; i < 9; i++) {
                document.getElementById('mole-' + i).classList.remove('show');
            }
        }

        function whackMole(holeNumber) {
            if (!isGameRunning) return;
            
            const mole = document.getElementById('mole-' + holeNumber);
            
            if (mole.classList.contains('show')) {
                score++;
                document.getElementById('score').textContent = score;
                mole.classList.remove('show');
                
                // ヒットエフェクト
                mole.style.backgroundColor = '#FF6B6B';
                setTimeout(() => {
                    mole.style.backgroundColor = '#FFD700';
                }, 200);
            }
        }

        function endGame() {
            isGameRunning = false;
            clearInterval(gameInterval);
            clearInterval(moleInterval);
            hideAllMoles();
            
            document.getElementById('final-score').textContent = 'あなたのスコア: ' + score + '点';
            document.getElementById('game-over').style.display = 'block';
            document.getElementById('restart-btn').style.display = 'inline-block';
        }

        function restartGame() {
            document.getElementById('start-btn').style.display = 'inline-block';
            document.getElementById('restart-btn').style.display = 'none';
            document.getElementById('game-over').style.display = 'none';
        }
    </script>
</body>
</html>

使い方:

上記のコードをすべてコピー
メモ帳に貼り付け
「game.html」として保存
ファイルをダブルクリックしてブラウザで開く
「ゲームスタート」ボタンをクリック

これだけで遊べます!

コードの解説

コードの各部分を簡単に解説します。

HTML部分の解説

html

<div id="game-board">
    <div class="hole" onclick="whackMole(0)">
        <div class="mole" id="mole-0">🐹</div>
    </div>
    <!-- 残り8つの穴 -->
</div>

役割:

game-board:ゲーム盤全体
hole:もぐらの穴
mole:もぐら本体
onclick:クリックしたときにwhackMole関数を実行

CSS部分の解説

css

.mole {
    bottom: -100%;  /* 最初は隠れている */
}

.mole.show {
    bottom: 10%;  /* 表示するときは上に移動 */
}

役割:

初期状態では穴の下に隠れている
showクラスが追加されると、上に出てくる
transitionでアニメーションをつける

JavaScript部分の解説

主要な関数:

1. startGame() – ゲーム開始

javascript

function startGame() {
    score = 0;
    timeLeft = 30;
    gameInterval = setInterval(updateTimer, 1000);
    moleInterval = setInterval(showRandomMole, 800);
}

スコアと時間をリセット
1秒ごとにタイマー更新
0.8秒ごとにもぐらを出現

2. showRandomMole() – もぐらをランダムに表示

javascript

function showRandomMole() {
    const randomHole = Math.floor(Math.random() * 9);
    const mole = document.getElementById('mole-' + randomHole);
    mole.classList.add('show');
}

0〜8のランダムな数字を生成
その番号のもぐらにshowクラスを追加
0.7秒後に自動で隠す

3. whackMole() – もぐらを叩く

javascript

function whackMole(holeNumber) {
    const mole = document.getElementById('mole-' + holeNumber);
    if (mole.classList.contains('show')) {
        score++;
        mole.classList.remove('show');
    }
}

もぐらが表示されているかチェック
表示されていればスコア加算
もぐらを隠す

4. endGame() – ゲーム終了

javascript

function endGame() {
    clearInterval(gameInterval);
    clearInterval(moleInterval);
    document.getElementById('final-score').textContent = 'スコア: ' + score;
}

タイマーを停止
もぐらの出現を停止
最終スコアを表示

カスタマイズ方法

このゲームを自分好みにカスタマイズしてみましょう。

難易度を変える

もっと難しく:

javascript

// もぐらの出現速度を速くする(800 → 500)
moleInterval = setInterval(showRandomMole, 500);

// もぐらが見える時間を短くする(700 → 400)
setTimeout(() => {
    mole.classList.remove('show');
}, 400);

もっと簡単に:

javascript

// もぐらの出現速度を遅くする(800 → 1200)
moleInterval = setInterval(showRandomMole, 1200);

// 制限時間を長くする(30 → 60)
let timeLeft = 60;

デザインを変える

もぐらを別の絵文字に:

html

<!-- 🐹 を別の絵文字に変更 -->
<div class="mole" id="mole-0">👻</div>  <!-- おばけ -->
<div class="mole" id="mole-0">🐰</div>  <!-- うさぎ -->
<div class="mole" id="mole-0">🎯</div>  <!-- 的 -->

背景色を変える:

css

body {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

穴の数を変える:

html

<!-- HTMLで穴を6つに減らす -->
<!-- grid-template-columnsを2列に変更 -->
#game-board {
    grid-template-columns: repeat(2, 1fr);
}

機能を追加する

コンボシステム:

javascript

let combo = 0;

function whackMole(holeNumber) {
    // 既存のコードに追加
    if (mole.classList.contains('show')) {
        combo++;
        score += combo;  // コンボ数に応じて加点
    } else {
        combo = 0;  // 外したらコンボリセット
    }
}

効果音を追加:

javascript

function whackMole(holeNumber) {
    if (mole.classList.contains('show')) {
        const audio = new Audio('https://www.soundjay.com/button/beep-07.wav');
        audio.play();
        score++;
    }
}

ハイスコア記録:

javascript

let highScore = localStorage.getItem('highScore') || 0;

function endGame() {
    if (score > highScore) {
        highScore = score;
        localStorage.setItem('highScore', highScore);
        alert('新記録達成!');
    }
}

他のミニゲームアイデア

同じ技術で作れる他のゲームアイデアを紹介します。

1. 記憶ゲーム(神経衰弱)

カードをめくって同じ絵柄を探す
classList.toggle()でカードを裏返す
配列で絵柄を管理

2. 反射神経ゲーム

ランダムなタイミングでボタンが表示される
クリックするまでの時間を計測
Date.now()で時間を測る

3. タイピングゲーム

ランダムな単語が表示される
入力して正解するとスコア加算
addEventListener('keydown')でキー入力を検知

4. ブロック崩し

Canvas APIを使用
ボールとパドルの当たり判定
もう少し高度だが、やりがいがある

5. じゃんけんゲーム

ボタンでグー・チョキ・パーを選択
コンピュータとランダムに対戦
勝敗判定のロジックを実装

次のステップ

このゲームを作れたら、次のステップに進みましょう。

ステップ1:コードを理解する

各行が何をしているか調べる
わからない部分はChatGPTに聞く
自分の言葉で説明できるようにする

ステップ2:改造してみる

数字を変えて動きを確認
新しい機能を追加
エラーが出たら、原因を調べる

ステップ3:ゼロから作ってみる

コードを見ずに、同じゲームを作る
途中で詰まったら、元のコードを確認
完成したら、別のゲームに挑戦

ステップ4:もっと学ぶ

おすすめの学習リソース:

MDN Web Docs(https://developer.mozilla.org/ja/)
ドットインストール(https://dotinstall.com/)
YouTube「JavaScript ゲーム作り方」で検索

ステップ5:公開する

自分のブログに埋め込む
GitHub Pagesで公開
友達に遊んでもらう

まとめ:コピペから始めよう

JavaScriptでゲームを作ることは、思っているより簡単です。

この記事のポイント:

コピペだけで動くゲームが完成する
HTML、CSS、JavaScriptの3つで作れる
特別なソフトは不要(メモ帳とブラウザだけ)
カスタマイズして自分好みに変えられる
同じ技術で色々なゲームが作れる

プログラミング学習の3ステップ:

コピペして動かす(今日やったこと)
数字や文字を変えてみる(カスタマイズ)
自分で考えて作る(オリジナルゲーム)

最初は誰でもコピペから始めます。それで全く問題ありません。

大切なこと:

完璧に理解しようとしない
まず動かして、遊んでみる
少しずつ変更して、動きを確認する
エラーが出ても慌てない(誰でも通る道)

よくある質問:

Q: コピペしたコードを使うのは悪いこと? A: 全く悪くありません。プロのエンジニアも、既存のコードを参考にします。コピペから学ぶのは正しい学習方法です。

Q: このコードを自分のサイトで使ってもいい? A: もちろんです!自由に使ってください。改造も、公開も、商用利用もOKです。

Q: エラーが出て動きません A: よくあることです。以下を確認してください:

ファイル名が「game.html」になっているか
コードを全てコピーしたか
全角スペースが入っていないか

それでもダメなら、ChatGPTにエラーメッセージを貼り付けて聞いてみましょう。

Q: もっと複雑なゲームを作りたい A: まずはこのゲームを完全に理解しましょう。その後、Canvas APIやゲームライブラリ(Phaser、Kaboom.jsなど)を学ぶと、本格的なゲームが作れます。

次のアクション:

今日やること:

この記事のコードをコピーして保存
ブラウザで開いて遊ぶ
数字を1つ変えて、動きを確認する

明日やること:

もぐらの絵文字を変える
背景色を変える
穴の数を変える

1週間後:

コンボシステムを追加
ハイスコア機能を追加
効果音を追加

1ヶ月後:

別のミニゲームに挑戦
自分のアイデアを形にする
完成したゲームを公開する

最後に:

ゲーム制作は、想像以上に楽しいです。

最初は難しく感じるかもしれませんが、コピペから始めて、少しずつ理解していけば、必ず作れるようになります。

1年前の私も、まったくの初心者でした。でも、コピペから始めて、今では自分のゲームを公開できるようになりました。

あなたも必ずできます。

今すぐメモ帳を開いて、コードをコピーしてください。

5分後には、あなたの最初のJavaScriptゲームが動いています。

そこから、新しい世界が広がります。

ゲーム制作の世界へようこそ。あなたのオリジナルゲームを、楽しみに待っています!