卡片配对游戏中如何实现数组内图片的匹配逻辑？

首先调整卡片渲染代码，给每张卡片添加自定义标识属性，比直接读取src比对更稳妥，修改后的渲染代码如下：

const container = document.querySelector(".Soprano-game");
// 这里替换为你自己写的数组打乱函数的返回结果
const shuffledCards = 你的打乱函数(cardsArray);

for (let i of shuffledCards) {
  const code = `
  <div class="Soprano-card" data-name="${i.name}">
    <div class="Back-card">
      <img class="Soprano_image" src="assets/img/Characters/${i.img}" alt="Characters">
    </div>
    <div class="front-card">
      <img class="Soprano_image" src="assets/img/Sopranos-Title.jpg" alt="Sopranos-Title">
    </div>
  </div>
  `;
  container.innerHTML += code;
}

接下来实现核心匹配逻辑：

• 首先定义全局状态变量，存储选中卡片、防止重复点击的锁

// 存储当前选中的两张卡片
let selectedCards = [];
// 点击锁，匹配判断完成前禁止点击其他卡片，避免逻辑混乱
let lockBoard = false;

• 绑定点击事件，实现翻转、匹配判断逻辑

// 给所有卡片绑定点击事件
document.querySelectorAll('.Soprano-card').forEach(card => {
  card.addEventListener('click', flipCard);
});

// 卡片翻转逻辑
function flipCard() {
  // 面板锁住时、点击已选中的同一张卡片时直接返回不执行操作
  if (lockBoard) return;
  if (this === selectedCards[0]) return;

  // 你需要提前在CSS中写好flipped类对应的翻转动画
  this.classList.add('flipped');
  // 将当前选中的卡片存入数组
  selectedCards.push(this);

  // 选中两张卡片后触发匹配判断
  if (selectedCards.length === 2) {
    checkForMatch();
  }
}

// 匹配判断逻辑
function checkForMatch() {
  // 先锁住面板，禁止后续点击
  lockBoard = true;
  // 比对两张卡片的name标识
  const isMatch = selectedCards[0].dataset.name === selectedCards[1].dataset.name;

  isMatch ? matchSuccess() : matchFail();
}

// 匹配成功处理：移除卡片点击事件，避免重复触发
function matchSuccess() {
  selectedCards[0].removeEventListener('click', flipCard);
  selectedCards[1].removeEventListener('click', flipCard);
  resetBoard();
}

// 匹配失败处理：延迟1秒后把两张卡片翻回正面
function matchFail() {
  setTimeout(() => {
    selectedCards[0].classList.remove('flipped');
    selectedCards[1].classList.remove('flipped');
    resetBoard();
  }, 1000);
}

// 重置面板状态，方便下一次点击
function resetBoard() {
  selectedCards = [];
  lockBoard = false;
}

• 附翻转动画参考CSS，你可以根据需求调整样式参数：

.Soprano-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  cursor: pointer;
}
.Soprano-card.flipped {
  transform: rotateY(180deg);
}
.Back-card, .front-card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.Back-card {
  transform: rotateY(180deg);
}

内容的提问来源于stack exchange，提问作者user16217445