1. HTML代码示例：

2. CSS代码示例：

.card { border: 1px solid #ccc; border-radius: 5px; width: 100px; height: 100px; margin: 10px; display: inline-block; background-color: #fff; text-align: center; font-size: 32px; font-weight: bold; cursor: pointer; }

.card.selected, .card.match { background-color: #7ebf41; color: #fff; }

3. JavaScript代码示例：

const cardsArray = [ { name: 'card1', img: './images/card1.png', }, { name: 'card2', img: './images/card2.png', }, { name: 'card3', img: './images/card3.png', }, { name: 'card4', img: './images/card4.png', }, { name: 'card5', img: './images/card5.png', }, { name: 'card6', img: './images/card6.png', }, ];

const gameBoard = document.querySelector('#game-board');

function createBoard() { cardsArray.forEach(card => { const cardElement = document.createElement('div'); cardElement.classList.add('card'); cardElement.dataset.name = card.name;

const frontImage = document.createElement('img');
frontImage.src = card.img;
frontImage.alt = card.name;
frontImage.classList.add('front-face');

const backImage = document.createElement('div');
backImage.classList.add('back-face');

cardElement.appendChild(frontImage);
cardElement.appendChild(backImage);
gameBoard.appendChild(cardElement);

}); }

createBoard();

const cards = document.querySelectorAll('.card'); let hasFlippedCard = false; let lockBoard = false; let firstCard, secondCard;

function flipCard() { if (lockBoard) return; if (this === firstCard) return;

this.classList.add('selected');

if (!hasFlippedCard) { hasFlippedCard = true; firstCard = this; return; }

secondCard = this; checkMatch(); }

function checkMatch() { let isMatch = firstCard.dataset.name === secondCard.dataset.name; isMatch ? disableCards() : un