在记忆游戏中翻牌

Flipping cards in a memory game

本文关键字:记忆游戏      更新时间:2023-09-26

我正在构建一个记忆游戏,当你选择两个时,我无法弄清楚如何翻转我的牌?目前我的卡片是静态的,当您单击两个时,我有一个警告框,上面写着"您有匹配项"或"抱歉没有匹配项"。

  1. 如何翻转我的卡?

  2. 我应该把卡片的图像放在哪里?我试着把它放进去我的主Javascript文件,但它不起作用?

有什么想法吗?

            //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();

试试这个:

cover   cover
card    card

将封面的宽度动画化为 0,同时将卡的宽度设置为其宽度。

或者使用 jquery,更容易:https://nnattawat.github.io/flip/