javascript - 在内存游戏中翻牌

标签 javascript android html

我正在构建一个内存游戏,但我不知道如何在你选择两张牌时翻转我的牌?目前我的卡片是静态的,当你点击两个时,我会看到一个警告框,上面写着“你有匹配”或“抱歉没有匹配”。

  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/

关于javascript - 在内存游戏中翻牌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38391024/

相关文章:

javascript - VueJS - 在 v-for 循环中触发方法

javascript 根据表单输入将用户重定向到目录

javascript - 如果比较错误,尝试使 keydown 数字变成红色

android - 无法在 adb shell getevent 上获得鼠标点击坐标

android - 无法在打开的 Spinner 上通知 DataSetChanged()

javascript - 如何暂停和恢复用 vanilla javascript 编写的简单贪吃蛇游戏?

javascript - SVG 输入字段

java - 在 ListView 中选择项目的最佳方法是什么?

html - 如何使表格移动友好?

javascript - Jquery MouseOver 事件 - child 不可见