JavaScript神経衰弱のソースコード

<style>
/* ゲームボードのスタイル */
.game-board {
display: flex;
flex-wrap: wrap;
width: 580px;
}
/* カードのスタイル */
.card {
width: 92px;
height: 109px;
margin: 5px;
background-image: url('card-back.png');
cursor: pointer;
}
/* めくられたカードのスタイル */
.card.flipped {
background-image: none;
}
/* マッチしたカードのスタイル */
.card.matched {
cursor: default;
}
</style>
<div class="game-board" id="gameBoard"></div>

<script>
// 使用するカードの配列
const cards = [
'spadeA', 'spade2', 'spade3', 'spade4', 'spade5',
'heartA', 'heart2', 'heart3', 'heart4', 'heart5'
];

let flippedCards = []; // 現在めくられているカードを保持する配列
let matchedPairs = 0; // マッチしたペアの数

// 配列をシャッフルする関数
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

// ゲームボードを作成する関数
function createGameBoard() {
const gameBoard = document.getElementById('gameBoard');
shuffleArray(cards);

cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.cardType = card;
cardElement.dataset.index = index;
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}

// カードをめくる関数
function flipCard() {
if (flippedCards.length < 2 && !this.classList.contains('flipped') && !this.classList.contains('matched')) {
this.classList.add('flipped');
this.style.backgroundImage = `url('${this.dataset.cardType}.png')`;
flippedCards.push(this);

if (flippedCards.length === 2) {
setTimeout(checkMatch, 300);
}
}
}

// カードのマッチをチェックする関数
function checkMatch() {
const [card1, card2] = flippedCards;
const type1 = card1.dataset.cardType;
const type2 = card2.dataset.cardType;

// スペードとハートの同じ数字（または文字）がマッチ
if (type1[0] !== type2[0] && type1.slice(5) === type2.slice(5)) {
card1.classList.add('matched');
card2.classList.add('matched');
matchedPairs++;
if (matchedPairs === 5) {
alert('おめでとうございます！ゲームクリアです！');
}

// マッチしなかった場合、カードを裏返す
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
card1.style.backgroundImage = 'url("card-back.png")';
card2.style.backgroundImage = 'url("card-back.png")';
}, 300);
}
flippedCards = []; // めくられたカードをリセット
}

// ゲームの初期化
createGameBoard();
</script>