記憶遊戲 - 如何在警報彈出前顯示兩張卡圖像

我已經使用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的情況下這樣做。

來源

2016-11-07 Lupeman1

的可能的複製[爲什麼我的javascript代碼不能從頂部處理到底編碼？]（http://stackoverflow.com/questions/40337451/why-my-javascript-code-not-process-from-從上到下編碼） –

您希望延遲isMatch檢查，直到UI完成更新並且用戶已經完成鼠標移動。

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

來源

2016-11-07 06:36:35 elfan

Elfan！非常感謝。它一直困擾着我很久，我試圖找到的所有解決方案都非常複雜，幾乎總是涉及到JQuery。感謝您的簡單回答 - 非常感謝！ – Lupeman1

記憶遊戲 - 如何在警報彈出前顯示兩張卡圖像

回答

相關問題