はじめに

今回は、HTMLとJavaScriptを使って「間違い探しゲーム」を作成します。複数のパネルの中から1枚だけ色の違うパネルを探し出し、正解すれば次のステージへ進むというゲームです。ステージが進むごとに難易度が上がり、パネルの数が増えたり、色の違いがわかりづらくなったりします。

JavaScriptを学びながら遊べる楽しいゲームを一緒に作りましょう！

ゲームのルール

複数のパネルの中から1つだけ色の違うパネルをクリックします。
正解すれば、次のステージに進みます。
ステージが進むと、パネルの数が増え、色の違いが少しずつわかりづらくなります。
間違えるとゲームオーバーです。リトライボタンを押すと最初から挑戦できます。
正解するたびにスコアが加算されます。何回連続で正解できるかチャレンジしましょう！

ゲーム画面

作成したプログラム

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 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
        }
        #game-board {
            display: grid;
            gap: 10px;
        }
        .panel {
            width: 100px;
            height: 100px;
            background-color: grey;
            cursor: pointer;
        }
        #retry-button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>間違い探しゲーム</h1>
    <div id="game-board"></div>
    <button id="retry-button" style="display:none;">リトライ</button>
    <p>正解数: <span id="score">0</span></p>
    <script src="game.js"></script>
</body>
</html>

JavaScript

次に、ゲームのロジックを実装するJavaScriptのコードです。game.js ファイルに以下のコードを記述します。

let score = 0;
let level = 1;
let panelCount = 2;  // 初期のパネル数
const gameBoard = document.getElementById('game-board');
const scoreDisplay = document.getElementById('score');
const retryButton = document.getElementById('retry-button');

function startGame() {
    gameBoard.innerHTML = '';
    const gridSize = Math.ceil(Math.sqrt(panelCount));
    gameBoard.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
    
    const baseColor = generateRandomColor();
    const oddColor = generateSimilarColor(baseColor, level);
    const oddPanelIndex = Math.floor(Math.random() * panelCount);

    for (let i = 0; i < panelCount; i++) {
        const panel = document.createElement('div');
        panel.className = 'panel';
        panel.style.backgroundColor = (i === oddPanelIndex) ? oddColor : baseColor;
        panel.addEventListener('click', () => handlePanelClick(i === oddPanelIndex));
        gameBoard.appendChild(panel);
    }
}

function handlePanelClick(isCorrect) {
    if (isCorrect) {
        score++;
        level++;
        panelCount += 2;  // パネル数を増やす
        scoreDisplay.textContent = score;
        startGame();
    } else {
        alert('ゲームオーバー！');
        retryButton.style.display = 'block';
    }
}

function resetGame() {
    score = 0;
    level = 1;
    panelCount = 2;
    scoreDisplay.textContent = score;
    retryButton.style.display = 'none';
    startGame();
}

retryButton.addEventListener('click', resetGame);

// 色生成関数
function generateRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}

function generateSimilarColor(baseColor, level) {
    const colorDiff = Math.max(10, 255 - level * 5); // レベルが上がるほど差を小さくする
    const [r, g, b] = baseColor.match(/\d+/g).map(Number);
    const newR = Math.min(255, Math.max(0, r + Math.floor(Math.random() * colorDiff) - colorDiff / 2));
    const newG = Math.min(255, Math.max(0, g + Math.floor(Math.random() * colorDiff) - colorDiff / 2));
    const newB = Math.min(255, Math.max(0, b + Math.floor(Math.random() * colorDiff) - colorDiff / 2));
    return `rgb(${newR}, ${newG}, ${newB})`;
}

startGame();

プログラムの解説

1. パネルの生成

ゲームボードに複数のパネルを生成するため、JavaScriptでdivタグを動的に作成しています。正解のパネルだけは微妙に違う色が割り当てられ、それをクリックすることで次のステージに進めます。

2. 色の生成

ランダムな色 (generateRandomColor) を生成し、似た色を作成する関数 (generateSimilarColor) を用いて正解パネルの色を決定します。レベルが上がると、色の差が小さくなり、難易度が上がります。

3. 正解・不正解の判定

プレイヤーがパネルをクリックすると、正解か不正解かを判定します。正解の場合は次のステージに進み、パネルの数が増えます。間違えるとゲームオーバーで、リトライボタンが表示されます。

4. リトライ機能

リトライボタンを押すと、スコアやレベルがリセットされ、再び最初からゲームを開始できます。

まとめ

今回の間違い探しゲームは、HTMLとJavaScriptだけで手軽に作成できるシンプルなゲームです。ステージが進むにつれて難易度が上がり、色の違いが徐々にわかりづらくなるため、プレイヤーの集中力と注意力を鍛えることができます。ぜひ試してみてください！