Unable to flip more than one elements

140
April 01, 2018, at 9:49 PM

This is what I am doing:

I am developing a memory game, in which the user has to match deck contents. Whenever a user clicks on a deck content, it is flipped revealing the icon the card is holding. There will be two cards with the same icon that the user has to match.

I am unable to click on more than one element (I am only able to flip one element).

Below is my code:

$(document).ready(function() { 
            $(".deck-content").flip({ 
                trigger: 'manual' 
            }); 
            var i = 1; 
            var clickCount = 1; 
            var cardVal1 = ''; 
            var cardVal2 = ''; 
 
            $(".flip").click(function() { 
                    if (i <=2) { //i should be max 2 because the match is to be done to two elements 
                        if (i === 1) {      //check if its the first flip 
                            $(this).closest(".deck-content").flip(true); 
                            cardVal1 = $(this).val(); 
                            i++; 
                            clickCount++; 
                        } else if ((clickCount === 2) && ($(this).val() !== cardVal1)) {  //checks if its the second flip and the second flip is not the first element again. 
                            $(this).closest(".deck-content").flip(true); 
                            cardVal2 = $(this).val(); 
                            clickCount++; 
                        } 
                        if (cardVal1 === cardVal2) {  //checks if both the flips match 
                            $(this).prev().remove(); 
                        } 
                      } 
                    }); 
 
                $(".unflip").click(function() {  //used to unflip 
                    $(this).closest(".deck-content").flip(false); 
                }); 
            });
@media only screen and (max-width: 1370px){ 
     body{ 
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); 
    } 
     .container{ 
         width: 1370px; 
         margin-left: auto; 
         margin-right: auto; 
         text-align: center; 
         margin-top: 20px; 
    } 
     ul{ 
         list-style-type: none; 
         margin: 0 auto; 
         text-align: center; 
    } 
     .heading-wrap{ 
         padding: 20px 10px 20px 10px; 
         background-color: rgba(0,0,10,0.4); 
    } 
     h1{ 
         text-align: center; 
    } 
     .heading-style{ 
         color: rgb(140,100,80); 
    } 
     li{ 
         columns: 4; 
         vertical-align: top; 
    } 
     .stars{ 
         text-align: center; 
         font-size: 30px; 
    } 
     section.playground{ 
         margin-left: 28%; 
         margin-right: 28%; 
         text-align: center; 
    } 
     .fa-prop-cover{ 
         font-size:70px; 
         text-align: center; 
         display: inline-block; 
         margin-top: 20px; 
         margin-right: 20px; 
    } 
     .deck-content{ 
         text-align: center; 
         width: 120px; 
         height: 120px; 
         border: 1px solid; 
         box-sizing: border-box; 
         vertical-align: middle; 
         display: inline; 
         margin: 20px 20px 20px 20px; 
         cursor: pointer; 
         color: rgb(150,150,150); 
    } 
} 
 @media only screen and (min-width: 1371px) and (max-width: 1600){ 
     body{ 
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); 
    } 
     .container{ 
         width: 1500px; 
         margin-left: auto; 
         margin-right: auto; 
         text-align: center; 
         margin-top: 20px; 
    } 
     ul{ 
         list-style-type: none; 
         margin: 0 auto; 
         text-align: center; 
    } 
     .heading-wrap{ 
         padding: 20px 10px 20px 10px; 
         background-color: rgba(0,0,10,0.4); 
    } 
     h1{ 
         text-align: center; 
    } 
     .heading-style{ 
         color: rgb(140,100,80); 
    } 
     li{ 
         columns: 4; 
         vertical-align: top; 
    } 
     .stars{ 
         text-align: center; 
         font-size: 30px; 
    } 
     section.playground{ 
         margin-left: 28%; 
         margin-right: 28%; 
         text-align: center; 
    } 
     .fa-prop-cover{ 
         font-size:70px; 
         text-align: center; 
         display: inline-block; 
         vertical-align: middle; 
         margin-top: 20px; 
         margin-right: 30px; 
    } 
     .fa-prop{ 
         font-size:70px; 
         text-align: center; 
         display: inline-block; 
         vertical-align: middle; 
         margin-top: 20px; 
    } 
     .deck-content{ 
         text-align: center; 
         width: 120px; 
         height: 120px; 
         border: 1px solid; 
         box-sizing: border-box; 
         vertical-align: middle; 
         display: inline; 
         margin: 20px 20px 20px 20px; 
         cursor: pointer; 
         color: rgb(150,150,150); 
    } 
} 
 @media only screen and (min-width: 1601px) and (max-width: 1920px){ 
     body{ 
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg"); 
    } 
     .container{ 
         width: 1800px; 
         margin-left: auto; 
         margin-right: auto; 
         text-align: center; 
         margin-top: 20px; 
    } 
     ul{ 
         list-style-type: none; 
         margin: 0 auto; 
         text-align: center; 
    } 
     .heading-wrap{ 
         padding: 20px 10px 20px 10px; 
         background-color: rgba(0,0,10,0.4); 
    } 
     h1{ 
         text-align: center; 
    } 
     .heading-style{ 
         color: rgb(140,100,80); 
    } 
     li{ 
         columns: 4; 
         vertical-align: top; 
    } 
     .stars{ 
         text-align: center; 
         font-size: 30px; 
    } 
     section.playground{ 
         margin-left: 28%; 
         margin-right: 28%; 
         text-align: center; 
    } 
     .fa-prop-cover{ 
         font-size:70px; 
         text-align: center; 
         display: inline-block; 
         vertical-align: middle; 
         margin-top: 20px; 
         margin-right: 30px; 
    } 
     .fa-prop{ 
         font-size:70px; 
         text-align: center; 
         display: inline-block; 
         vertical-align: middle; 
         margin-top: 20px; 
    } 
     .deck-content{ 
         text-align: center; 
         width: 120px; 
         height: 120px; 
         border: 1px solid; 
         box-sizing: border-box; 
         vertical-align: middle; 
         display: inline; 
         margin: 20px 20px 20px 20px; 
         cursor: pointer; 
         color: rgb(150,150,150); 
    } 
} 
 
<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="utf-8"> 
      <title>Memory Game!</title> 
      <meta name="description" content="Memory Game"> 
      <meta name="author" content="Gaurav Thantry"> 
      <meta name="keywords" content="html,css,javascript"> 
      <meta name="viewport" content="width=device-width,initial-scale=1"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
      <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
      <link rel="stylesheet" href="css/app.css"> 
      <script src="js/app.js"></script> 
   </head> 
   <body> 
      <section class="container"> 
         <header class="heading"> 
            <h1 class="heading-style"><span class="heading-wrap">The Memory Game!</span></h1> 
         </header> 
         <br/> 
         <section class="scorecard"> 
            <section class="stars"> 
               <i class="fa fa-star"></i> 
               <i class="fa fa-star"></i> 
               <i class="fa fa-star"></i> 
            </section> 
         </section> 
         <section class="playground"> 
            <section class="row"> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip" ></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-anchor fa-prop unflip" value="anchor"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i> 
                  </section> 
               </section> 
            </section> 
            <section class="row"> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-angellist fa-prop unflip" value="angellist"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bug fa-prop unflip" value="bug"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-cubes fa-prop unflip" value="cubes"></i> 
                  </section> 
               </section> 
            </section> 
            <section class="row"> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-anchor fa-prop unflip" value="anchor"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i> 
                  </section> 
               </section> 
            </section> 
            <section class="row"> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-angellist fa-prop unflip" value="angellist"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-bug fa-prop unflip" value="bug"></i> 
                  </section> 
               </section> 
               <section class="col-xs-3 deck-content"> 
                  <section class="front"> 
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i> 
                  </section> 
                  <section class="back"> 
                     <i class="fa fa-cubes fa-prop unflip" value="cubes"></i> 
                  </section> 
               </section> 
            </section> 
         </section> 
      </section> 
   </body> 
</html>

Answer 1

You can try this:

    $(document).ready(function() {
    $(".deck-content").flip({
        trigger: 'manual'
    });
    var i = 1;
    var clickCount = 1;
    var cardVal1 = '';
    var cardVal2 = '';
    $(".flip").click(function() {
        if (i <=2) { //i should be max 2 because the match is to be done to two elements
            if (i === 1) {      //check if its the first flip
                $(this).closest(".deck-content").flip(true);
                cardVal1 = $(this).val();
                i++;
                clickCount++;
            } else if ((i === 2) ) {  //checks if its the second flip and the second flip is not the first element again.
                $(this).closest(".deck-content").flip(true);
                cardVal2 = $(this).val();
                clickCount++;
                i++;
            }
            if (cardVal1 === cardVal2) {  //checks if both the flips match
                $(this).prev().remove();
            }
        }
    });
    $(".unflip").click(function() {  //used to unflip
        $(this).closest(".deck-content").flip(false);
        i--;
    });
});

You need to change i value if you make unflip too. And in your condition:

} else if ((clickCount === 2) && ($(this).val() !== cardVal1))

I think that you don't need to check if is value same as first click because you have setup for second click make unflip event.

Answer 2

Your current code has a bit more problems than just only being able to flip one. For maximum usability, a memory game would rather let you draw 2 cards, and then revert them automatically, and not wait for another card to be clicked on the manually unflip them, that would be well, to easy to cheat ;)

Personally, I wouldn't really work with a fixed HTML to create such a deck. An alternative solution how to do it, would be the following way

const cards = ['ༀ', 'མ', 'ྦྷ', 'ཡ', 'ᎃ']; 
 
// based on the cards, will return a promise that contains 2 versions of each card 
async function createMemoryDeck( cards ) { 
  return cards.concat( cards ); 
} 
 
// will shuffle the deck and return a promise with a shuffled deck 
async function shuffleDeck( deck ) { 
  let copy = deck.slice(); 
  let shuffled = []; 
  while (copy.length !== 0) { 
    let i = parseInt(Math.random() * copy.length); 
    shuffled.push( copy.splice(i, 1)[0] ); 
  } 
  return shuffled; 
} 
 
// resets the card to non flipped (argument based) 
function resetCards() { 
  for (let i = 0; i < arguments.length; i++) { 
    arguments[i].classList.remove('flipped'); 
    arguments[i].innerHTML = '&nbsp;'; 
  } 
} 
 
// checks if the user won the game, if he has, adds a button to restart the game 
function validateWin() { 
  if (document.querySelectorAll('.deck-item').length === document.querySelectorAll('.solved').length) { 
    // the player guessed all cards 
    let container = document.querySelector('#container'); 
    clearContainer( container ); 
    let button = document.createElement('button'); 
    button.type = 'button'; 
    button.innerHTML = 'Won, click to start a new game'; 
    button.addEventListener('click', () => startNew( cards ) ); 
    container.appendChild( button ); 
  } 
} 
 
// validates if there are 2 cards flipped, if yes, checks if the cards are the same 
// if not, flips the cards back after 1 second 
function validateCards() { 
  var l = document.querySelectorAll('.flipped'); 
  if (l.length !== 2) { 
    return; 
  } 
  // 2 matching items 
  if (l[0].innerHTML === l[1].innerHTML) { 
    l[0].classList.add('solved'); 
    l[1].classList.add('solved'); 
  } 
  setTimeout( () => { 
    resetCards( ...l ); 
    validateWin(); 
  }, 1000 ); 
} 
 
// if 2 cards are already flipped, it will reset them 
function ensureFlipped() { 
  var l = document.querySelectorAll('.flipped'); 
  if (l.length === 2) { 
    resetCards( ...l ); 
  } 
} 
 
// creates a closure with the card, and returns an event handler 
function handleClick( card ) { 
  return (e) => { 
    let target = e.target; 
    if (target.classList.contains('solved')) { 
      return; 
    } 
    if (target.classList.contains('flipped')) { 
      // when flipped, shouldn't allow to flip it back 
      return; 
    } 
    ensureFlipped(); 
    target.innerHTML = card; 
    target.classList.add('flipped'); 
    validateCards(); 
  } 
} 
 
// clears a given container 
function clearContainer( container ) { 
  for (let i = container.childNodes.length; --i; ) { 
    container.removeChild( container.childNodes[i] ); 
  } 
} 
 
// creates the html element for the decks 
async function createDeck( deck ) { 
  const target = document.querySelector('#container'); 
  clearContainer( target ); 
  for (let card of deck) { 
    let span = document.createElement('span'); 
    span.className = 'deck-item'; 
    span.addEventListener( 'click', handleClick( card ) ); 
    target.appendChild( span ); 
  } 
} 
 
// starts a new game 
function startNew( cards ) { 
  createMemoryDeck( cards ).then( shuffleDeck ).then( createDeck ); 
} 
 
// initialize the game 
startNew( cards );
#container { 
  position: absolute; 
  width: 80%; 
  margin-left: 10%; 
} 
.deck-item { 
  background-color: silver; 
  border: solid #333 1px; 
  border-radius: 5px; 
  font-size: 4em; 
  text-align: center; 
  vertical-align: middle; 
  width: 100px; 
  height: 100px; 
  display: inline-block; 
  margin: 3px; 
} 
.deck-item.flipped, .deck-item.solved { 
  background-color: white; 
} 
.solved { 
  color: darkgreen; 
  border: solid transparent 1px; 
}
<div id="container"> 
</div>

Rent Charter Buses Company
READ ALSO
Sass styles don&#39;t work on localhost

Sass styles don't work on localhost

I struggle with following issue related proccessing Sass styles:

151
Navigation On webpage with multiple tabs

Navigation On webpage with multiple tabs

Refer the codepen--- I want to have a navigation bar in the left(blue for all tabs)When I login to this page the default tab to be activated is the home tab and only its content should be displayed in the right

143
Get dates between dataTimePicker C# MySql (using different date formats)

Get dates between dataTimePicker C# MySql (using different date formats)

I'm currently having hard time getting the dates between two dateTimePickers

175
create a function and create a procedure

create a function and create a procedure

Hi i`m new in MySQL and i need some help !

151