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;
}
/* 入力フォームのスタイル */
#input-container {
margin-bottom: 10px;
}
input[type="number"]{
width:60px;
}
</style>

<div id="input-container">
<label for="blocks-input">記憶するブロックの数：</label>
<input type="number" id="blocks-input" value="3">
<button id="start-game">ゲーム開始</button>
</div>
<div id="game-container"></div>
<div id="message"></div>
<button id="show-answer" style="display: none;">正解を見る</button>

<script>
// DOM要素の取得
const gameContainer = document.getElementById('game-container');
const messageElement = document.getElementById('message');
const showAnswerButton = document.getElementById('show-answer');
const blocksInput = document.getElementById('blocks-input');
const startGameButton = document.getElementById('start-game');

let blocksToChange = 3;
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 < blocksToChange; i++) {
let randomIndex = Math.floor(Math.random() * 9);
correctSequence.push(randomIndex);
}

currentBlockIndex = 0;
changeNextBlock();
}

// 次のブロックの色を変える関数
function changeNextBlock() {
showAnswerButton.style.display = 'none';
startGameButton.style.display = 'none';
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('記憶したブロックをクリックしてください');
startGameButton.style.display = 'inline-block';
showAnswerButton.style.display = 'inline-block';
}
}

// ブロックがクリックされたときの処理
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} / ${blocksToChange} クリック`);

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

// 回答をチェックする関数
function checkAnswer() {
gameActive = false;
if (correctSequence.toString() === playerSequence.toString()) {
showMessage('正解！');

} else {
showMessage('不正解！');
}
}

// 正解のパターンを表示する関数
function showAnswer() {
showAnswerButton.style.display = 'none';
startGameButton.style.display = 'none';
gameActive = false;
showMessage('正解のパターンを表示します');
const blocks = document.querySelectorAll('.block');
let index = 0;
showAnswerButton.style.display = 'none';

function flashNextBlock() {
if (index < correctSequence.length) {
blocks[correctSequence[index]].style.backgroundColor = '#ffff00';
setTimeout(() => {
blocks[correctSequence[index]].style.backgroundColor = '#ffffff';
index++;
setTimeout(flashNextBlock, 200);
}, 800);
} else {
showMessage('記憶したブロックをクリックしてください');
playerSequence = [];
gameActive = true;
startGameButton.style.display = 'inline-block';
showAnswerButton.style.display = 'inline-block';
}
}

flashNextBlock();
}

// ゲームを開始する関数
function startGame() {
blocksToChange = parseInt(blocksInput.value);
if (isNaN(blocksToChange) || blocksToChange < 1 || blocksToChange > 30) {
showMessage('入力できる数値は1～30までです');
return;
}
createGrid();
changeRandomBlocks();
}

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

// イベントリスナーの設定
showAnswerButton.addEventListener('click', showAnswer);
startGameButton.addEventListener('click', startGame);

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