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