用HTML+CSS+JS写一个翻牌游戏，要求分为四个难度，分别是4张图片，16张图片，36张图片，64张图片。如果两张图片相同，则消掉，不同则重新反转回去

好的，下面是一个根据难度级别动态生成不同数量卡牌的翻牌游戏的HTML、CSS和JS代码：

HTML代码：

<div id="game"></div>

CSS代码：

.card {
  width: calc(100% / var(--cols) - 10px);
  height: calc(100% / var(--rows) - 10px);
  margin: 5px;
  perspective: 600px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #333;
  background-size: cover;
}

.card-back {
  background-color: #999;
  transform: rotateY(180deg);
  background-size: cover;
}

JS代码：

// 定义不同难度级别的卡牌数量
const levels = {
  easy: 4,
  medium: 16,
  hard: 36,
  expert: 64
};

// 生成随机的图片对
function generatePairs(numPairs) {
  const pairs = [];
  for (let i = 0; i < numPairs; i++) {
    const imgIndex = Math.floor(Math.random() * 6) + 1;
    pairs.push(imgIndex);
    pairs.push(imgIndex);
  }
  return pairs;
}

// 洗牌函数
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]];
  }
  return array;
}

// 根据难度级别生成卡牌
function generateCards(numCards) {
  const pairs = generatePairs(numCards / 2);
  const shuffledPairs = shuffleArray(pairs);
  const game = document.getElementById('game');
  game.style.setProperty('--cols', Math.sqrt(numCards));
  game.style.setProperty('--rows', Math.sqrt(numCards));
  for (let i = 0; i < numCards; i++) {
    const card = document.createElement('div');
    card.classList.add('card');
    const cardInner = document.createElement('div');
    cardInner.classList.add('card-inner');
    const cardFront = document.createElement('div');
    cardFront.classList.add('card-front');
    cardFront.style.backgroundImage = `url('img/${shuffledPairs[i]}.jpg')`;
    const cardBack = document.createElement('div');
    cardBack.classList.add('card-back');
    cardBack.style.backgroundImage = `url('img/back.jpg')`;
    cardInner.appendChild(cardFront);
    cardInner.appendChild(cardBack);
    card.appendChild(cardInner);
    game.appendChild(card);
    card.addEventListener('click', function() {
      card.classList.add('is-flipped');
      const flippedCards = document.querySelectorAll('.card.is-flipped');
      if (flippedCards.length === 2) {
        const card1 = flippedCards[0];
        const card2 = flippedCards[1];
        const front1 = card1.querySelector('.card-front');
        const front2 = card2.querySelector('.card-front');
        if (front1.style.backgroundImage === front2.style.backgroundImage) {
          card1.removeEventListener('click', flipCard);
          card2.removeEventListener('click', flipCard);
        } else {
          setTimeout(function() {
            card1.classList.remove('is-flipped');
            card2.classList.remove('is-flipped');
          }, 1000);
        }
      }
    });
  }
}

// 根据难度级别开始游戏
function startGame(level) {
  const numCards = levels[level];
  generateCards(numCards);
}

// 开始游戏
startGame('easy');

在js代码中，我们首先定义了不同难度级别的卡牌数量，然后定义了两个关键函数：`generatePairs`和`shuffleArray`。`generatePairs`用于生成随机的图片对，`shuffleArray`用于洗牌。接着，我们定义了一个`generateCards`函数，用于根据难度级别动态生成不同数量的卡牌。最后，我们定义了一个`startGame`函数，根据难度级别开始游戏，这里我们默认开始一个简单级别的游戏。

当用户点击卡牌时，我们会给卡牌添加`is-flipped`类，同时查询所有处于翻牌状态的卡牌。如果当前已经有两张卡牌处于翻牌状态，则会进行匹配，如果两张卡牌相同，则移除点击事件，否则等待1秒后重新翻回去。