Add timer, play-again button and user's message

AliQassab · Oct 9, 2023 · 98ef59e · 98ef59e
1 parent b223330
commit 98ef59e
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,44 @@
 # Matching Game
 
-This is a memory-matching game of 8 pairs of cards, and the objective is to match all the pairs by flipping the cards over. The game has a Reset button to shuffle the cards again.
+This is a simple web-based memory-matching game implemented in HTML, CSS, and JavaScript.
 
-## ## Technologies Used
+## Table of Contents
 
-- HTML
-- CSS
-- JavaScript
-- Font Awesome
+- [Description](#description)
+- [Game Features](#game-features)
+- [How to Play](#how-to-play)
+- [Screenshots](#screenshots)
+- [Installation](#installation)
 
-## Usage
 
-The game is played by clicking on cards to flip them over. If two cards match, they stay flipped over. If they do not match, they are flipped back over. The game is won when all 8 pairs have been matched. The Reset button shuffles the cards and restarts the game.
+## Description
 
-### Styling
+Matching Game is a classic memory game where the player is presented with a grid of cards, each containing an image. The goal is to find pairs of matching cards by flipping them over two at a time. The game is won when all pairs have been successfully matched.
 
-The game is styled using CSS, including styles for the game container, cards, and the Reset button. The styles include a gradient background, border radius, box shadow, and animation effects. The styles also include media queries for responsive design on different screen sizes.
+## Game Features
+
+- 8 pairs of cards for a total of 16 cards.
+- A countdown timer to add a challenge.
+- A "You won!" message when all pairs are matched.
+- A "Play Again" button to reset the game.
+- A "Reset" button to restart the game at any time.
+
+## How to Play
+
+1. Click on a card to reveal its image.
+2. Click on another card to see if it matches the first card.
+3. If the two cards match, they will remain face up.
+4. If the two cards do not match, they will be flipped face down again.
+5. Continue until all card pairs are matched.
+6. If the timer runs out before all pairs are matched, you lose the game.
+
+## Screenshots
+
+![Game Screenshot](./img/matching-game.png)
+
+## Installation
+
+1. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/Qassab/Matching-Game.git
diff --git a/img/matching-game.png b/img/matching-game.png
diff --git a/index.html b/index.html
@@ -1,20 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
     <title>Matching Game</title>
-</head>
-<body>
-  <h1>Matching Game</h1>
+  </head>
+  <body>
+    <h1>Matching Game</h1>
+
     <div class="container">
-       <ul class="cards">
-
-       </ul> 
-       <button class="btn">Reset</button>
+      <div class="message-container">
+        <h2 class="message">you win</h2>
+        <button class="btn play-again ">play again</button>
+      </div>
+      <div class="timer">1:00</div>
+
+      <ul class="cards"></ul>
+      <button class="btn ">Reset</button>
     </div>
-  <script src="main.js"></script>  
-</body>
-</html>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -9,6 +9,9 @@ const images = [
   "./img/img-8.png",
 ];
 
+let timerInterval=null
+let secondsRemaining = 60; 
+
 const shuffleArray = (array) => {
   return array.sort(() => (Math.random() > 0.5 ? 1 : -1));
 };
@@ -29,36 +32,33 @@ const renderCards = () => {
     `;
     cardList.insertAdjacentHTML("afterbegin", markup);
   });
+  updateTimer();
 };
 renderCards();
 
 let cardOne, cardTwo;
 let disableCard = false;
-function flipCard(e) {
-  const card = e.target.closest(".card");
-  if (!card) return;
-  if (card !== cardOne && !disableCard) {
-    card.classList.add("flip");
-    if (!cardOne) {
-      return (cardOne = card);
-    }
-    cardTwo = card;
-    disableCard = true;
-    const imgOne = cardOne.querySelector("img").src;
-    const imgTwo = cardTwo.querySelector("img").src;
-    matchCards(imgOne, imgTwo);
-  }
+let matchedPairs = 0;
+
+function displayResultMessage(isWin) {
+  const message = document.querySelector(".message");
+  const messageContainer = document.querySelector(".message-container");
+  message.textContent = isWin ? "You won!" : "You lost!";
+  message.style.display = "block";
+  messageContainer.style.display = "flex";
+
 }
 
-let imgMatched = 0;
 const matchCards = (img1, img2) => {
   if (img1 === img2) {
-    imgMatched++;
-    if (imgMatched == 8) {
-      setTimeout(() => {
-        resetAllCards();
-      }, 2000);
+    matchedPairs++;
+
+    if (matchedPairs == 8) {
+
+      clearInterval(timerInterval); 
+      displayResultMessage(true);
     }
+
     cardOne.removeEventListener("click", flipCard);
     cardTwo.removeEventListener("click", flipCard);
     cardOne = cardTwo = "";
@@ -76,15 +76,70 @@ const matchCards = (img1, img2) => {
     }, 1000);
   }
 };
+let gameOver = false;
 
 const resetAllCards = () => {
-  imgMatched = 0;
+  matchedPairs = 0;
   cardOne = cardTwo = "";
   cardList.innerHTML = "";
   random.sort(() => (Math.random() > 0.5 ? 1 : -1));
   renderCards();
+
+  // Clear the timer
+  clearInterval(timerInterval);
+  timerInterval = null;
+  secondsRemaining = 60; 
+  updateTimer();
+    gameOver = false;
+  const messageContainer = document.querySelector(".message-container");
+  messageContainer.style.display = "none";
+
+
 };
+
+function updateTimer() {
+  const timerDisplay = document.querySelector(".timer");
+
+  const minutes = Math.floor(secondsRemaining / 60);
+  const seconds = secondsRemaining % 60;
+
+  // Display the time in MM:SS format
+  timerDisplay.textContent = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+}
+function flipCard(e) {
+  if (gameOver) return; 
+  const card = e.target.closest(".card");
+  if (!card) return;
+
+  // Check if the timer is not running and the game has not been won or lost
+  if (timerInterval === null && matchedPairs !== 8) {
+    timerInterval = setInterval(() => {
+      secondsRemaining--;
+      if (secondsRemaining <= 0) {
+        clearInterval(timerInterval);
+        displayResultMessage(false); 
+         gameOver = true; 
+      }
+      updateTimer();
+    }, 1000);
+  }
+
+  // Rest of your flipCard logic
+  if (card !== cardOne && !disableCard) {
+
+    card.classList.add("flip");
+    if (!cardOne) {
+      return (cardOne = card);
+    }
+    cardTwo = card;
+    disableCard = true;
+    const imgOne = cardOne.querySelector("img").src;
+    const imgTwo = cardTwo.querySelector("img").src;
+    matchCards(imgOne, imgTwo);
+  }
+}
+
 cardList.addEventListener("click", flipCard);
 
-const resetButton = document.querySelector(".btn");
-resetButton.addEventListener("click", resetAllCards);
+const resetButton = document.querySelectorAll(".btn");
+resetButton.forEach((btn) => btn.addEventListener("click", resetAllCards));