Post
Ask Question

How to Develop Pairing Game in Javascript

Introduction

 
In this blog, you will learn how to create a pairing game in JavaScript.
 
Step 1
 
First, open a Sublime Text editor, 
  • Open start -> Sublime Text Editor.
  • Go to file -> File -> New File
  • Name of File -> Weather app.html.
Now let's follow the steps for our game project.
 
Step 2
 
Now, I have add css styles inside the <style> tag.
  1. body,  
  2. p,  
  3. h5 {  
  4.   padding: 0;  
  5.   margin: 0;  
  6.   font-family: 'indie flower'  
  7. }  
  8.   
  9. body {  
  10.   width: 100hw;  
  11.   height: 100vh;  
  12.   background: url('../libs//img//background.png') no-repeat center  
  13. }  
  14.   
  15. .main {  
  16.   position: absolute;  
  17.   width: 400px;  
  18.   height: 600px;  
  19.   top: 50%;  
  20.   left: 50%;  
  21.   margin: -300px -200px;  
  22. }  
  23.   
  24. .top {  
  25.   width: 100%;  
  26.   height: 18%;  
  27.   background: #9f392d;  
  28.   position: absolute;  
  29.   color: #520b03  
  30. }  
  31.   
  32. .bottom {  
  33.   position: absolute;  
  34.   width: 100%;  
  35.   height: 82%;  
  36.   top: 18%;  
  37.   background: #9f392d;  
  38. }  
  39.   
  40. .board {  
  41.   width: 26%;  
  42.   height: 90%;  
  43.   margin: 2% 0 0 2%;  
  44.   background: #f9bbb4;  
  45.   float: left;  
  46. }  
  47.   
  48. .board h5 {  
  49.   width: 100%;  
  50.   height: 25%;  
  51.   font-size: 23px;  
  52.   text-align: center;  
  53. }  
  54.   
  55. .board p {  
  56.   width: 100%;  
  57.   height: 75%;  
  58.   font-size: 4.5em;  
  59.   text-align: center  
  60. }  
  61.   
  62. .mes {  
  63.   width: 44.1%;  
  64.   height: 90%;  
  65.   background: #f9bbb4;  
  66.   margin: 2% 0 0 0;  
  67.   float: left;  
  68.   font-size: 2.5em;  
  69.   padding-top: 15px;  
  70.   text-align: center;  
  71. }  
  72.   
  73. .mes div {  
  74.   font-size: 0.70em;  
  75.   color: #008a00  
  76. }  
  77.   
  78. .time {  
  79.   margin: 2% 0 0 0;  
  80. }  
  81.   
  82. .box {  
  83.   width: 96%;  
  84.   height: 98.5%;  
  85.   background: #f9bbb4;  
  86.   margin: 0.3% 0 0 2%;  
  87. }  
  88.   
  89. .placer {  
  90.   width: 33.3343%;  
  91.   height: 25%;  
  92.   float: left;  
  93. }  
  94.   
  95. .holder {  
  96.   width: 98%;  
  97.   height: 97.8%;  
  98.   margin: 1.5%;  
  99.   border: 1px solid #9f392d;  
  100.   transform-style: preserve-3d;  
  101.   transition: all 0.5s ease;  
  102.   border-radius: 3px;  
  103. }  
  104.   
  105. .flip {  
  106.   transform: rotateY(180deg)  
  107. }  
  108.   
  109. .front {  
  110.   position: absolute;  
  111.   width: 100%;  
  112.   height: 100%;  
  113.   background: #fed4d1;  
  114.   transition: all 0.5s ease;  
  115. }  
  116.   
  117. .back {  
  118.   position: absolute;  
  119.   width: 100%;  
  120.   height: 100%;  
  121.   transform: rotateY(180deg);  
  122.   transition: all 0.5s ease;  
  123.   backface-visibility: hidden;  
  124. }  
  125.   
  126. .addSc {  
  127.   animation: enable 0.3s linear  
  128. }  
  129.   
  130. .timeStyle {  
  131.   animation: timer 0.3s linear  
  132. }  
  133.   
  134.   
  135. @keyframes enable {  
  136.   0% {  
  137.     transform: scale(1);  
  138.   }  
  139.   
  140.   60% {  
  141.     color: #00cc03;  
  142.     transform: scale(1.2);  
  143.   }  
  144.   
  145.   100% {  
  146.     transform: scale(1);  
  147.   }  
  148. }  
  149.   
  150. @keyframes timer {  
  151.   0% {  
  152.     transform: scale(1);  
  153.   }  
  154.   
  155.   60% {  
  156.     color: #0062c4;  
  157.     transform: scale(1.2);  
  158.   }  
  159.   
  160.   100% {  
  161.     transform: scale(1);  
  162.   }  
  163. } 
HTML code to display Pairing Game
 
Now we insert a new HTML Page on this pairing game. The code is given below.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  7.   <title>Pairing Game</title>  
  8.   <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">  
  9.   <link href="css/bootstrap.css" rel="stylesheet">  
  10.   <link href="css/style.css" rel="stylesheet">  
  11. </head>  
  12. <body>  
  13.   <div class='main'>  
  14.     <div class='top'>  
  15.       <div class='board score'>  
  16.         <h5>Score</h5>  
  17.         <p class='sc'>0</p>  
  18.       </div>  
  19.       <div class='mes'>Start</div>  
  20.       <div class='board time'>  
  21.         <h5>Seconds</h5>  
  22.         <p class='second'>30</p>  
  23.       </div>  
  24.     </div>  
  25.     <div class='bottom'>  
  26.       <div class='box'></div>  
  27.     </div>  
  28.   </div>  
  29.   <audio data-key='select' src='libs/sounds/bounce.mp3'></audio>  
  30.   <audio data-key='wrong' src='libs/sounds/wrong.mp3'></audio>  
  31.   <audio data-key='correct' src='libs/sounds/correct.mp3'></audio>  
  32.   <audio data-key='seconds' src='libs/sounds/seconds.mp3'></audio>  
  33.   <audio data-key='yay' src='libs/sounds/yay.mp3'></audio>  
  34.   <audio data-key='lose' src='libs/sounds/lose.mp3'></audio>  
  35. </body>  
  36. <script src='./js/script.js'></script>  
  37.   
  38. </html> 
Step 3
 
Here you can use some JavaScript  along with HTML code. Just follow the steps to see how to create this pairing game.
  1. const fruits = ['carrot', 'cherry', 'apple', 'pineapple', 'pumpkin', 'strawberry']  
  2. const box = document.querySelector('.box')  
  3. const mes = document.querySelector('.mes')  
  4. const score = document.querySelector('.sc')  
  5. const second = document.querySelector('.second')  
  6. const sec = document.querySelector('audio[data-key="seconds"]')  
  7. const select = document.querySelector('audio[data-key="select"]')  
  8. const wrong = document.querySelector('audio[data-key="wrong"]')  
  9. const correct = document.querySelector('audio[data-key="correct"]')  
  10. const yay = document.querySelector('audio[data-key="yay"]')  
  11. const lose = document.querySelector('audio[data-key="lose"]')  
  12. let tim;  
  13. let timer;  
  14.   
  15. fruits.push(...fruits)  
  16.   
  17. function shuffle(arr) {  
  18.   var val1 = arr.length, temp, index;  
  19.   while (val1 > 0) {  
  20.     index = Math.floor(Math.random() * val1);  
  21.     val1--;  
  22.     temp = arr[val1];  
  23.     arr[val1] = arr[index];  
  24.     arr[index] = temp;  
  25.   }  
  26.   return arr;  
  27. }  
  28.   
  29. window.onload = init;  
  30.   
  31. function init() {  
  32.   var divs = (shuffle(fruits))  
  33.   for (var x = 0; x < divs.length; x++) {  
  34.     box.innerHTML += `  
  35.       <div class='placer ${x}'>  
  36.         <div class='holder ${divs[x]}'>  
  37.           <div class='front'></div>  
  38.           <img  class='back' src='libs/img/${divs[x]}.png'>  
  39.         </div>  
  40.       </div>  
  41.     `  
  42.   }  
  43.   showBox();  
  44. }  
  45.   
  46. function showBox() {  
  47.   mes.addEventListener('click', ready)  
  48. }  
  49.   
  50. function ready() {  
  51.   var a = box.children;  
  52.   this.innerHTML = 'Ready!'  
  53.   tim = new Date().getTime() + 30000  
  54.   timer = setInterval(setDate, 1000)  
  55.   for (var x = 0; x < a.length; x++) {  
  56.     a[x].addEventListener('click', click);  
  57.   }  
  58. }  
  59.   
  60.   
  61. function click() {  
  62.   var b = this.firstElementChild;  
  63.   b.classList.add('flip');  
  64.   evaluator(this);  
  65. }  
  66.   
  67. var selectedBox = [];  
  68. function evaluator(a) {  
  69.   select.play()  
  70.   
  71.   if (a.classList[1] === undefined) {  
  72.     return  
  73.   }  
  74.   
  75.   selectedBox.push(a);  
  76.   
  77.   if (selectedBox.length === 1) {  
  78.     mes.innerHTML = "Be sure!";  
  79.   }  
  80.   
  81.   if (selectedBox.length === 2) {  
  82.     if (selectedBox[0].firstElementChild.classList[1] == selectedBox[1].firstElementChild.classList[1]) {  
  83.       removePic(selectedBox)  
  84.       selectedBox = [];  
  85.     } else {  
  86.       hidePic(selectedBox);  
  87.       selectedBox = [];  
  88.     }  
  89.   }  
  90. }  
  91.   
  92. var scoreCard = 1;  
  93. function scoreBoard() {  
  94.   score.innerHTML = scoreCard++;  
  95.   score.classList.add('addSc')  
  96.   if (scoreCard === 7) {  
  97.     endGame()  
  98.   }  
  99.   removeCss(score, 'addSc')  
  100. }  
  101.   
  102. function endGame() {  
  103.   setTimeout(function () {  
  104.     mes.innerHTML = `  
  105.       <div>You win!</div>  
  106.       <div>Start again.</div>  
  107.     `  
  108.     clearInterval(timer)  
  109.     var a = box.children  
  110.     for (var x = 0; x < a.length; x++) {  
  111.       a[x].removeEventListener('click', click);  
  112.     }  
  113.     mes.addEventListener('click', reset)  
  114.     yay.play()  
  115.   }, 700)  
  116. }  
  117.   
  118. function reset() {  
  119.   window.location.reload(true)  
  120. }  
  121.   
  122. function removeCss(element, cssName) {  
  123.   setTimeout(function () {  
  124.   
  125.     element.classList.remove(cssName)  
  126.   }, 700)  
  127. }  
  128.   
  129.   
  130. function removePic(a) {  
  131.   a[0].classList.remove(a[0].classList[1])  
  132.   a[1].classList.remove(a[1].classList[1])  
  133.   setTimeout(function () {  
  134.     correct.play()  
  135.     mes.innerHTML = 'Great Job!';  
  136.     scoreBoard();  
  137.   }, 700)  
  138. }  
  139.   
  140. function hidePic(a) {  
  141.   setTimeout(function () {  
  142.     for (var x = 0; x < 2; x++) {  
  143.       a[x].firstElementChild.classList.remove('flip')  
  144.     }  
  145.     mes.innerHTML = "Wrong!";  
  146.     wrong.play()  
  147.   }, 700)  
  148. }  
  149.   
  150.   
  151. function setDate() {  
  152.   var newTime = new Date().getTime()  
  153.   var remainingTime = tim - newTime  
  154.   var remTime = Math.ceil(remainingTime / 1000)  
  155.   second.innerHTML = remTime  
  156.   second.classList.add('timeStyle')  
  157.   mes.removeEventListener('click', ready)  
  158.   sec.play()  
  159.   if (remTime === 0) {  
  160.     mes.innerHTML = `  
  161.       <div>You lose!</div>  
  162.       <div>Play again.</div>  
  163.     `  
  164.     clearInterval(timer)  
  165.     var a = box.children  
  166.     for (var x = 0; x < a.length; x++) {  
  167.       a[x].removeEventListener('click', click);  
  168.     }  
  169.     lose.play()  
  170.     mes.addEventListener('click', reset)  
  171.   }  
  172.   removeCss(second, 'timeStyle')  
  173. } 

Output 

 
Now, you can right-click on the sublime text window stage. A dialog box appears, select->open a new browser.
 
 
 
 
 

Conclusion

 
Hope you found this blog interesting. We have created a pairing game using JavaScript. Thanks for reading.
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage