CODEWITHSUNDEEP
javascriptandroidhtml
nattie87
nattie87

Reputation: 115

Flipping cards in a memory game

I am building a memory game and I can't work out how to flip my cards when you pick two? At the moment my cards are static and when you click on two I have an alert box that says either "You have a match" or "Sorry no match".

  1. How do I flip my card over?

  2. Where do I put my image for the cards back? I've tried to put it in my Main Javascript file but it's not working?

Any ideas?

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

Upvotes: 1

Views: 1197

Answers (1)

user774375
user774375

Reputation: 76

try this:

cover   cover
card    card

animate the width of the cover to 0, at the same time animate the width of the card to their width.

Or use jquery, is easier: https://nnattawat.github.io/flip/

Upvotes: 1

Related Questions