Question

我正在创建一个简单的记忆卡游戏。我有使用CSS设置的结构和卡片设计，现在我只需要启用游戏的实际播放。

我需要一次只允许两次点击。如果两张卡匹配，则卡被移除。如果两张牌不匹配，则会“翻转”回来。

......我只包括游戏的第一行，即使它是4x4设置。

HTML

<div class="cardHolder">
    <div id="card1" class="card" onClick="revealBlueCard()"></div>
    <div id="card2" class="card" onClick="revealGreenCard()"></div>
    <div id="card3" class="card" onClick="revealGreenCard()"></div>
    <div id="card4" class="card" onClick="revealBlueCard()"></div>
</div>

JAVASCRIPT

    // blue cards
    var card1Ref = document.getElementById("card1");
    var card4Ref = document.getElementById("card4");
    card1Ref.addEventListener("click", revealBlueCard);
    card4Ref.addEventListener("click", revealBlueCard);

    function revealBlueCard(event){
        event.target.style.backgroundColor = "#2155a8";
        event.target.innerHTML = "<p>8</p>";
    }

    // green cards
    var card2Ref = document.getElementById("card2");
    var card3Ref = document.getElementById("card3");
    card2Ref.addEventListener("click", revealGreenCard);
    card3Ref.addEventListener("click", revealGreenCard);

    function revealGreenCard(event){
        event.target.style.backgroundColor = "#3cb260";
        event.target.innerHTML = "<p>3</p>";
    }

我仍然是Javascript的新手。我假设我使用“卡”的点击事件并应用if语句。我也想知道是否需要将数据属性应用于每张卡。

Answer 1

为什么不向blue班级和green班级的卡片添加课程。

CSS：

.blue{
  background: #2155a8;
}

.green{
  background: #3cb260
}

并且还使用事件委托（尽量避免向每张卡添加事件监听器）

document.querySelector('#cardHolder').addEventListener('click', function(evt){
  var clickedCard = evt.target;
  if(clickedCard.classList.contains('blue'){
    //do whatever for blue card
  } else if(clickedCard.classList.contains('green')){
    //do whatever for green card
  }
});

Answer 2

有一种更好的方法：使用 onclick="cardClicked(this)" 为你所有的卡。然后在js

function cardClicked(elCard) {
if (elCard.classList.contains('flipped')) {
   return;
}
    // Flip it
    elCard.classList.add('flipped');

创建一个简单的“记忆”纸牌游戏。一次只需要允许两次点击

2 个答案: