JavaScript記憶ゲーム（レベルアップ式・ランダム）のソースコード

<style>
/* ゲームコンテナのスタイル */
#game-container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 5px;
margin-bottom: 10px;
}
/* 各ブロックのスタイル */
.block {
width: 100px;
height: 100px;
background-color: #ffffff;
border: 1px solid #000;
cursor: pointer;
transition: background-color 0.3s;
}
/* クリック時のブロックの色 */
.clicked {
background-color: #ff9999 !important;
}
/* メッセージ表示のスタイル */
#message {
margin-top: 10px;
font-weight: bold;
}
/* ボタンのスタイル */
button {
margin-top: 10px;
padding: 5px 10px;
font-size: 16px;
}
</style>

<div id="game-container"></div>
<p id="level">レベル: 1</p>
<div id="message"></div>
<button id="next-level" style="display: none;">次のレベルへ</button>
<button id="reset-game">はじめから</button>

<script>
// DOM要素の取得
const gameContainer = document.getElementById('game-container');
const levelElement = document.getElementById('level');
const messageElement = document.getElementById('message');
const nextLevelButton = document.getElementById('next-level');
const resetGameButton = document.getElementById('reset-game');

// ゲームの状態を管理する変数
let level = 1;
let correctSequence = [];
let playerSequence = [];
let gameActive = false;
let currentBlockIndex = 0;

// グリッドを作成する関数
function createGrid() {
gameContainer.innerHTML = '';
for (let i = 0; i < 9; i++) {
const block = document.createElement('div');
block.classList.add('block');
block.dataset.index = i;
block.addEventListener('click', handleClick);
gameContainer.appendChild(block);
}
}

// ランダムにブロックを選択し、色を変える関数
function changeRandomBlocks() {
const blocks = document.querySelectorAll('.block');
correctSequence = [];

// レベルに応じた数のブロックをランダムに選択
for (let i = 0; i < level; i++) {
let randomIndex = Math.floor(Math.random() * 9);
correctSequence.push(randomIndex);
}

currentBlockIndex = 0;
changeNextBlock();
}

// 次のブロックの色を変える関数
function changeNextBlock() {
if (currentBlockIndex < correctSequence.length) {
const blocks = document.querySelectorAll('.block');
blocks[correctSequence[currentBlockIndex]].style.backgroundColor = '#ffff00';
currentBlockIndex++;
setTimeout(() => {
blocks[correctSequence[currentBlockIndex - 1]].style.backgroundColor = '#ffffff';
setTimeout(changeNextBlock, 200);
}, 800);
} else {
gameActive = true;
playerSequence = [];
showMessage('順番通りにブロックをクリックしてください');
}
}

// ブロックがクリックされたときの処理
function handleClick(event) {
if (!gameActive) return;

const clickedBlock = event.target;
const clickedIndex = parseInt(clickedBlock.dataset.index);

// クリックエフェクト
clickedBlock.classList.add('clicked');
setTimeout(() => clickedBlock.classList.remove('clicked'), 300);

playerSequence.push(clickedIndex);
showMessage(`${playerSequence.length} / ${level} クリック`);

if (playerSequence.length === level) {
checkAnswer();
}
}

// 回答をチェックする関数
function checkAnswer() {
gameActive = false;
if (correctSequence.toString() === playerSequence.toString()) {
showMessage('正解！レベルクリア！');
nextLevelButton.style.display = 'inline-block';
} else {
showMessage('不正解。ゲームオーバー！');
resetGameButton.style.display = 'inline-block';
}
}

// ゲームを開始する関数
function startGame() {
level = 1;
updateLevel();
createGrid();
changeRandomBlocks();
nextLevelButton.style.display = 'none';
resetGameButton.style.display = 'none';
showMessage('順番を覚えてください。');
}

// 次のレベルに進む関数
function nextLevel() {
level++;
updateLevel();
createGrid();
changeRandomBlocks();
nextLevelButton.style.display = 'none';
showMessage('順番を覚えてください。');
}

// レベル表示を更新する関数
function updateLevel() {
levelElement.textContent = `レベル: ${level}`;
}

// メッセージを表示する関数
function showMessage(text) {
messageElement.textContent = text;
}

// イベントリスナーの設定
nextLevelButton.addEventListener('click', nextLevel);
resetGameButton.addEventListener('click', startGame);

// ページ読み込み時にグリッドを作成
window.addEventListener('load', createGrid);
</script>