JSFiddle - React, Tailwind, and code Playground

by 2sharkp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<body>
  <div id="container">
    <header>
      <h1>Matching cards game</h1>
    </header>
    <div id="card-table">
      <span id="how-to-play">Click the cards to turn them over to find pairs.</span>
      <div id="set-of-cards">
        <div class="king card"></div>
        <div class="queen card"></div>
        <div class="king card"></div>
        <div class="queen card"></div>
      </div>
      <span id="gameover"></span>
      <br>
      <div id="buttons">
        <button type="button" id="start">New Game</button>
        <button type="button" id="reset">Reset</button>
      </div>
    </div>
    <footer>
    </footer>
  </div>
  <!--End of main container-->
</body>

CSS

/******************************************
/* SETUP                   
/*******************************************/


/* Box Model Hack */

* {
  -moz-box-sizing: border-box;
  /* Firexfox */
  -webkit-box-sizing: border-box;
  /* Safari/Chrome/iOS/Android */
  box-sizing: border-box;
  /* IE */
}


/* Clear fix hack */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clear {
  clear: both;
}

.alignright {
  float: right;
  padding: 0 0 10px 10px;
  /* note the padding around a right floated image */
}

.alignleft {
  float: left;
  padding: 0 10px 10px 0;
  /* note the padding around a left floated image */
}


/******************************************
/* BASE STYLES                   
/*******************************************/

body {
  color: #000;
  font-size: 12px;
  line-height: 1.4;
  font-family: Helvetica, Arial, sans-serif;
}


/******************************************
/* LAYOUT                   
/*******************************************/

button {
  margin: 0 15px 0 0;
}

header {
  text-align: center;
  font-size: 36px;
}

footer {
  padding: 20px 0 0 0;
  text-align: right;
}

.card {
  display: inline-block;
  width: 71px;
  height: 96px;
  margin: 20px;
  text-align: center;
  background: url("https://imageshack.com/i/pnsqYIq2p");
}

.king.selected {
  background: url("https://imageshack.com/i/plo8d5Spp");
}

.queen.selected {
  background: url("https://imageshack.com/i/plshwWpYp");
}

.matched {
  border: 2px solid green;
}

#buttons {
  margin: 20px;
}

#card-table {
  border: 2px solid black;
  margin: 0 auto;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  width: 70%;
}

#container {
  width: 960px;
  margin: auto;
}

#gameover {
  margin: 10px 0 10px 0;
}

#how-to-play {
  font-size: 26px;
  font-weight: bolder;
}

JavaScript

var moves = 0; //number of moves
var cards;
var playerChoices = []; //put the player selections in an array for comparison purposes

$(document).ready(function() {

  $('#buttons').hide();
  newGame();

  $('.card').on('click', showCard);
  $('#start').on('click', newGame);
  $('#reset').on('click', resetGame);

});

function showCard() {

  $(this).addClass('selected'); //mark the selection with the selected class

  playerChoices.push($(this)); //push the players choice onto the playerChoices array
  console.log(playerChoices);

  moves++;
  console.log(moves);

  $('#buttons').show();
  matchCards(playerChoices);

}

function matchCards(array) {

  if (playerChoices.length === 3) {
    //when the player finds the first match
    if (playerChoices[0].attr('class') === playerChoices[1].attr('class')) { //if both playerChoices have the class 
      console.log("match found at index 0 and 1 of playerchoice!");
      $(playerChoices).each(playerChoices, function(index, element) {
        $(this).addClass('matched');
      })
    }

    //Deselect the two choices that were made
    else {
      $(playerChoices).each(function(index, element) {
        $(this).removeClass('selected');
      })
      playerChoices = [];
    }
  } else if (playerChoices.length === 4) {

    //when the player gets the second match
    if (playerChoices[2].attr('class') === playerChoices[3].attr('class')) {
      console.log("match found at index 2 and 3 of playerchoice!");
      $(playerChoices).each(playerChoices, function(index, element) {
        $(this).addClass('matched');
      })
      showGameOverMessage();
    }

    //Deselect the last two choices that were made
    else {
      $(playerChoices).each(function(index, element) {
        $(this).removeClass('selected');
      })
    }
  }
}

function newGame() {
  $('#how-to-play').show();
  resetGame();
}

function resetGame() { //Listener function
  $('.card').siblings().removeClass('selected matched');
  $('#buttons').hide();
 ...