Question

我已经用JavaScript编写了一个内存游戏代码。我的问题是，我无法弄清楚为什么所选择的两张卡都没有显示在警报之前（说它们是相同的/或者它们不相匹配）会弹出。我很困惑，因为警报在isMatch函数中，该函数在单击两张卡后运行（isTwoCards函数）。

var isTwoCards = function(){
    if (this.getAttribute('data-card') === 'king') {
        this.innerHTML = '<img src="King.png" class = "myImgClass" alt="King"/>';   
    } else {
        this.innerHTML = '<img src="Queen.png" class = "myImgClass" alt="Queen" />';
    }
    cardsInPlay.push(this.getAttribute('data-card'));
    if (cardsInPlay.length === 2) {
        isMatch(cardsInPlay);
    }
};

var isMatch = function() {
    if (cardsInPlay[0] !== cardsInPlay[1]) {
        alert('Sorry, try again.');
        cardElement.className = "";
    } else {
        alert('You found a match!')
    };
    cardsInPlay = [];
}

以下是整个代码：http://codepen.io/Lupeman/pen/GNgXrm

任何帮助都会非常感激，因为它让我疯了！我想在没有JQuery的情况下这样做。

Answer 1

您可能希望延迟isMatch检查，直到用户界面完成更新并且用户已完成鼠标操作。

if (cardsInPlay.length === 2) {
    setTimeout(function() {
        isMatch(cardsInPlay);
    }, 1000);
}

记忆游戏 - 如何在警报弹出之前显示两张卡片图像

1 个答案: