翻转卡片记忆游戏

Question

我建立一个记忆游戏，我无法工作，如何当你选择两个翻转我的卡？目前，我的卡片是静态的，当您点击两张卡时，我有一个提示框，显示“您有匹配”或“抱歉不匹配”。

1. 如何翻转我的卡片？

2. 我应该把我的形象的卡片回来吗？我试过把它放在 我的主J​​avascript文件中，但它不工作？

任何想法？

  //var cardOne = "queen"; 
      //var cardTwo = "king"; 
      //var cardThree = "queen"; 
      //var cardFour = "king"; 

      //console.log("hello"); 

      //f (cardTwo === cardFour) {alert ("You found a match!")} 
       //else {alert ("Sorry, try again")} 
     var gameBoard = document.getElementById("game-board"); 
     var cards = ["queen", "queen", "king", "king"]; 
     var cardInPlay = []; 

      var createBoard = function() { 
for (var i = 0; i < cards.length; i++) { 
    var newCard = document.createElement('div'); 
    newCard.className = "card"; 
    newCard.setAttribute('data-card', cards[i]); 
    newCard.addEventListener('click', isTwoCards); 
    gameBoard.appendChild(newCard); 

    } 
}; 



     function isTwoCards() { 
       cardInPlay.push(this.getAttribute('data-card')); 
       if (cardInPlay.length === 2) { 
        isMatch(cardInPlay); 
        cardInPlay = []; 

     } 
     }; 
     var isMatch = function(array){ 
(array[0] === array[1]) ? alert("You found a match!") : alert("Sorry, try again."); 
    }; 


createBoard(); 

Answer 1

试试这个：

cover cover 
 
card card

动画盖的宽度为0，同时该卡的宽度动画到它们的宽度。

或者使用jQuery，更容易： https://nnattawat.github.io/flip/