JavaScript Pairs Game | Pairs Game Source Code

JavaScript Pairs Game | Pairs Game Source Code

JavaScript Pairs Game | Pairs Game Source Code


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a  Pairs Game. We use HTML, Css, and javascript for this  Pairs Game I Hope you enjoy our blog so let's start with a basic HTML structure for a  Pairs Game.

HTML code

 <div class="wrapper">  
  <h1>JavaScript pairs Game</h1>  
  <h3>Click any card to begin</h3>  
  <p><span id="seconds">00</span>:<span id="tens">00</span></p>  
  <p id ="text"></p>  
  <div id="container">  
  </div>  
 </div>  
There is all the HTML code for the Pairs Game. Now, you can see output without CSS, then we write css & javascript for the Pairs Game.
output
JavaScript Pairs Game | Pairs Game Source Code

CSS Code

 /* Variabes */  
 /* Mixin's */  
  body {  
       background: #82d2e5;  
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
       height: 100%;  
       color: #fff;  
       text-align: center;  
 }  
  h1, h2 {  
       font-family: 'Roboto', sans-serif;  
       font-weight: 100;  
       font-size: 2.6em;  
       text-transform: uppercase;  
 }  
  h3 {  
       font-family: 'Roboto', sans-serif;  
       font-weight: 100;  
       font-size: 1.4em;  
       text-transform: uppercase;  
 }  
  #seconds, #tens {  
       font-size: 2em;  
 }  
  button {  
       -moz-border-radius: 5px;  
       -webkit-border-radius: 5px;  
       border-radius: 5px;  
       -khtml-border-radius: 5px;  
       background: #82d2e5;  
       color: #fff;  
       border: solid 1px #fff;  
       text-decoration: none;  
       cursor: pointer;  
       font-size: 1.2em;  
       padding: 18px 10px;  
       width: 180px;  
       margin: 10px;  
       outline: none;  
 }  
  button:hover {  
       -webkit-transition: all 0.5s ease-in-out;  
       -moz-transition: all 0.5s ease-in-out;  
       transition: all 0.5s ease-in-out;  
       background: #fff;  
       border: solid 1px #fff;  
       color: #82d2e5;  
 }  
  #container {  
       width: 630px;  
       margin: 10px auto;  
 }  
  #container:after {  
       content: "";  
       display: table;  
       clear: both;  
 }  
  [data-view="card"] {  
       transform: rotateY(180deg);  
       width: 100px;  
       height: 140px;  
       border: solid 1px #d3cece;  
       border-radius: 5px;  
       float: left;  
       margin: 10px;  
       cursor: pointer;  
       background: linear-gradient(135deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), linear-gradient(225deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px) 0 64px;  
       background-color: #f3f3f3;  
       background-size: 64px 128px;  
 }  
  .flipped {  
       transition: 0.6s;  
       transform-style: preserve-3d;  
       position: relative;  
       transform: rotateY(0deg);  
 }  
  .reverse {  
       transition: 0.6s;  
       transform-style: preserve-3d;  
       position: relative;  
       transform: rotateY(180deg);  
 }  
  .correct {  
       opacity: 0.5;  
       cursor: default;  
       transform-style: preserve-3d;  
       position: relative;  
       transform: rotateY(0deg);  
 }  
 /* Icons */  
  .correct[data-item="sass"], .flipped[data-item="sass"] {  
       background: url("https://cathydutton.co.uk/images/tech/sass.jpg") left center no-repeat #fff;  
       background-size: contain;  
 }  
  .correct[data-item="gulp"], .flipped[data-item="gulp"] {  
       background: url("https://cathydutton.co.uk/images/tech/gulp.jpg") left center no-repeat #fff;  
       background-size: contain;  
 }  
  .correct[data-item="grunt"], .flipped[data-item="grunt"] {  
       background: url("https://cathydutton.co.uk/images/tech/grunt.jpg") left center no-repeat #fff;  
       background-size: contain;  
 }  
  .correct[data-item="git"], .flipped[data-item="git"] {  
       background: url("https://cathydutton.co.uk/images/tech/git.jpg") left center no-repeat #fff;  
       background-size: contain;  
 }  
  .correct[data-item="css"], .flipped[data-item="css"] {  
       background: url("https://cathydutton.co.uk/images/tech/css.jpg") left center no-repeat #fff;  
       background-size: contain;  
 }  

Here is our updated output CSS.

output
JavaScript Pairs Game | Pairs Game Source Code

Javascript code 

 var myCards = document.getElementById('container');  
 var resultsArray = [];  
 var counter = 0;  
 var text = document.getElementById('text');  
 var seconds = 00;   
 var tens = 00;   
 var appendTens = document.getElementById("tens");  
 var appendSeconds = document.getElementById("seconds");  
 var Interval ;  
 var images = [  
  'sass',   
  'git',   
  'gulp',   
  'css',   
  'grunt'  
 ];  
 var clone = images.slice(0); // duplicate array  
 var cards = images.concat(clone); // merge to arrays   
 // Shufffel function  
 function shuffle(o){  
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i],  o[i] = o[j], o[j] = x);  
  return o;  
 }  
 shuffle(cards);  
 for (var i = 0; i < cards.length; i++) {  
  card = document.createElement('div');  
  card.dataset.item = cards[i];  
  card.dataset.view = "card";  
  myCards.appendChild(card);  
  card.onclick = function () {  
   if (this.className != 'flipped' && this.className != 'correct'){  
     this.className = 'flipped';  
     var result = this.dataset.item;  
     resultsArray.push(result);  
     clearInterval(Interval);  
     Interval = setInterval(startTimer, 10);  
   }  
   if (resultsArray.length > 1) {  
    if (resultsArray[0] === resultsArray[1]) {  
     check("correct");  
     counter ++;  
     win();  
     resultsArray = [];  
    } else {  
     check("reverse");  
     resultsArray = [];  
    }  
   }  
  }  
 };  
 var check = function(className) {  
  var x = document.getElementsByClassName("flipped");  
  setTimeout(function() {  
   for(var i = (x.length - 1); i >= 0; i--) {  
    x[i].className = className;  
   }  
  },500);  
 }  
 var win = function () {  
  if(counter === 5) {  
   clearInterval(Interval);  
   text.innerHTML = "Your time was " + seconds + ":" + tens;  
  }   
 }  
 function startTimer () {  
  tens++;   
  if(tens < 9){  
   appendTens.innerHTML = "0" + tens;  
  }  
  if (tens > 9){  
   appendTens.innerHTML = tens;  
  }   
  if (tens > 99) {  
   seconds++;  
   appendSeconds.innerHTML = "0" + seconds;  
   tens = 0;  
   appendTens.innerHTML = "0" + 0;  
  }  
  if (seconds > 9){  
   appendSeconds.innerHTML = seconds;  
  }  
 }  
Final output
JavaScript Pairs Game | Pairs Game Source Code


JavaScript Pairs Game | Pairs Game Source Code
Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Pairs Game. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

2 Comments

  1. Hey salut Anki j'espère que tu vas bien. Euh j'voudrais te demander dans ton css tu fais appel à des sélecteurs dont tu n'as pas fais référence dans le html. Par exple le sélecteur button, la classe flipped et autres comment ça se fait ? Tu peux m'aiclaicir stp ? Merci d'avance.

    ReplyDelete
  2. Salut j'espère que tu vas bien. Euh le code html n'est pas complet pourtant tu dis qu'il est complet.

    ReplyDelete

Post a Comment

Previous Post Next Post