记忆游戏翻转单张卡片不起作用 - JavaScript

问题描述

我创建了一个记忆游戏。大多数功能都有效，但我正在努力解决的一件事是让卡片正确翻转。这是我用来在卡片背面 (card.jpg) 和卡片正面（在 ImagesArr 数组中找到的图像名称）之间交换的函数：

// Swap out cards for shuffled images
function swapImages() {
  for(var i = 0; i < images.length; i++) {
    if(images[i].src !== "/img/card.jpg") {
      images[i].src = imagesArr[i];
    } else {
      images[i].src = "/img/card.jpg";
    }
  }
}

它可以显示隐藏的图片，但它会显示所有图片，而不仅仅是被点击的图片。我也在它上面有这个函数，它有助于翻转动画和添加一些必要的类以及调用 swapImages 函数。

// Flip the cards over on click and start the timer
function flipCards() {
  cards.forEach(card => {
    card.addEventListener("click",() => {
      card.classList.toggle("flipped");
      card.classList.toggle("chosen");
      chosenCards.push(card);
      startTimer();
      swapImages();
      checkmatch();
    });
  });
}

我觉得我需要一个 forEach 循环或类似的东西，但我不确定如何实现它或在哪里实现它。我也可能完全错了，根本不需要 forEach 循环。 TIA 寻求帮助！

解决方法

我认为您需要使用目标事件 (https://www.w3schools.com/jsref/event_target.asp)。这样程序就知道哪张卡片在另一边。根据你提供的代码，我怀疑点击所有卡片都会翻转。