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. }
  9. body {
  10. width: 100hw;
  11. height: 100vh;
  12. background: url('../libs//img//background.png') no-repeat center
  13. }
  15. .main {
  16. position: absolute;
  17. width: 400px;
  18. height: 600px;
  19. top: 50%;
  20. left: 50%;
  21. margin: -300px -200px;
  22. }
  24. .top {
  25. width: 100%;
  26. height: 18%;
  27. background: #9f392d;
  28. position: absolute;
  29. color: #520b03
  30. }
  32. .bottom {
  33. position: absolute;
  34. width: 100%;
  35. height: 82%;
  36. top: 18%;
  37. background: #9f392d;
  38. }
  40. .board {
  41. width: 26%;
  42. height: 90%;
  43. margin: 2% 0 0 2%;
  44. background: #f9bbb4;
  45. float: left;
  46. }
  48. .board h5 {
  49. width: 100%;
  50. height: 25%;
  51. font-size: 23px;
  52. text-align: center;
  53. }
  55. .board p {
  56. width: 100%;
  57. height: 75%;
  58. font-size: 4.5em;
  59. text-align: center
  60. }
  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. }
  73. .mes div {
  74. font-size: 0.70em;
  75. color: #008a00
  76. }
  78. .time {
  79. margin: 2% 0 0 0;
  80. }
  82. .box {
  83. width: 96%;
  84. height: 98.5%;
  85. background: #f9bbb4;
  86. margin: 0.3% 0 0 2%;
  87. }
  89. .placer {
  90. width: 33.3343%;
  91. height: 25%;
  92. float: left;
  93. }
  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. }
  105. .flip {
  106. transform: rotateY(180deg)
  107. }
  109. .front {
  110. position: absolute;
  111. width: 100%;
  112. height: 100%;
  113. background: #fed4d1;
  114. transition: all 0.5s ease;
  115. }
  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. }
  126. .addSc {
  127. animation: enable 0.3s linear
  128. }
  130. .timeStyle {
  131. animation: timer 0.3s linear
  132. }
  135. @keyframes enable {
  136. 0% {
  137. transform: scale(1);
  138. }
  140. 60% {
  141. color: #00cc03;
  142. transform: scale(1.2);
  143. }
  145. 100% {
  146. transform: scale(1);
  147. }
  148. }
  150. @keyframes timer {
  151. 0% {
  152. transform: scale(1);
  153. }
  155. 60% {
  156. color: #0062c4;
  157. transform: scale(1.2);
  158. }
  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>
  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;
  15. fruits.push(...fruits)
  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. }
  29. window.onload = init;
  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. }
  46. function showBox() {
  47. mes.addEventListener('click', ready)
  48. }
  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. }
  61. function click() {
  62. var b = this.firstElementChild;
  63. b.classList.add('flip');
  64. evaluator(this);
  65. }
  67. var selectedBox = [];
  68. function evaluator(a) {
  69. select.play()
  71. if (a.classList[1] === undefined) {
  72. return
  73. }
  75. selectedBox.push(a);
  77. if (selectedBox.length === 1) {
  78. mes.innerHTML = "Be sure!";
  79. }
  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. }
  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. }
  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. }
  118. function reset() {
  119. window.location.reload(true)
  120. }
  122. function removeCss(element, cssName) {
  123. setTimeout(function () {
  125. element.classList.remove(cssName)
  126. }, 700)
  127. }
  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. }
  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. }
  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.