Resilient-Labs · JacinthaDev · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Aug 15, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,22 +1,24 @@
-# ♠️ Week08 Bootcamp2019a Project: Matching Card Game
-
-### Goal: Make a 10 card memory game - users must be able to select two cards and check if they are a match. If they are a match, they stay flipped. If not, they flip back over. Game is done when all cards are matched and flipped over. Example: http://www.fruit-burst.co.uk/fun-and-games/pairs-game 
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# ♠️ Matching Card Game
+<img width="811" alt="memory" src="https://github.com/JacinthaDev/memory-game/assets/129231721/fc81148b-e682-4b8e-a5ae-152efe185dc7">
+
+Checkout this project here!: https://memorygame-rc.netlify.app
+
+
+# About this project
+This project is a memory card game. 
+
+
+## How It's Made:
+Tech used: HTML, CSS, JavaScript, 
+
+
+## Lessons Learned:
+This project was an exercise of my ability to think of game logic. It was challenging but also fun to create a game in the process.
+
+### Examples:
+Take a look at similar projects!
+
+Tic-Tac-Toe: https://github.com/JacinthaDev/Tic-Tac-Toe/tree/answer
+
+Avatar The Last Airbender Slot Machine: https://github.com/JacinthaDev/Slot-Machine/tree/answer
+
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,71 @@
+/* Help of chatGPT for layout and to flip the cards  */
+
+*{
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html{
+  font-size: 62.5%;
+}
+
+body {
+  display: flex;
+  justify-content: center; 
+  align-items: center;    
+  min-height: 100vh;       
+  background-color: #f5f5f5; 
+}
+
+img{
+  height: 115px;
+  width: 115px;
+}
+
+.board {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); 
+  gap: 1rem;  
+}
+
+.game-container {
+  display: flex;
+  flex-direction: column; /* To stack children vertically */
+  align-items: center;    /* Center children horizontally */
+  gap: 20px;              /* Add a gap between board and score div */
+}
+
+.score {
+  width: 100%; 
+  text-align: center;
+}
+
+p{
+  margin-bottom: 1rem ;
+  font-size: 2rem;
+}
+
+
+.card {
+  transform-style: preserve-3d;
+  transition: transform 0.5s;
+  cursor: pointer;
+}
+
+.card.flipped {
+  pointer-events: none;  /* This will disable click events on flipped cards */
+  transform: rotateY(180deg);
+}
+
+.card::before {
+  content: '';  /* Empty content for the pseudo-element */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
+}
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/apple.png b/imgs/apple.png
diff --git a/imgs/avocado.jpeg b/imgs/avocado.jpeg
diff --git a/imgs/card.png b/imgs/card.png
diff --git a/imgs/cherry.jpeg b/imgs/cherry.jpeg
diff --git a/imgs/mango.jpeg b/imgs/mango.jpeg
diff --git a/imgs/mango2.jpeg b/imgs/mango2.jpeg
diff --git a/imgs/memory.png b/imgs/memory.png
diff --git a/imgs/orange.jpeg b/imgs/orange.jpeg
diff --git a/imgs/pear.jpeg b/imgs/pear.jpeg
diff --git a/imgs/strawberry.jpeg b/imgs/strawberry.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Memory Card Game</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <div class="game-container">
+    <div class="board">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+      <img src="imgs/card.png" class="card">
+    </div>
+
+
+    <div class="score">
+        <p></p>
+        <button id="resetButton">Reset Game</button>
+    </div>
+  </div>
+
+
+  <script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,85 @@
+// Coded along to https://www.youtube.com/watch?v=DABkhfsBAWw&ab_channel=CodingNepal for help with the logic
+
+let cards = document.querySelectorAll('.card')
+document.querySelector('#resetButton').addEventListener('click', reset)
+
+//add event listeners to each card
+cards.forEach(card => {
+  card.addEventListener('click', flipCard)
+})
+
+//make an array of img SRCs and copy it since we need 2 of each
+let imgArray = ["imgs/cherry.jpeg", "imgs/avocado.jpeg", "imgs/apple.png", "imgs/mango.jpeg", "imgs/mango2.jpeg", "imgs/orange.jpeg", "imgs/pear.jpeg", "imgs/strawberry.jpeg"]
+imgArray = [...imgArray, ...imgArray]
+
+let card1, card2
+let score=0
+
+function flipCard(e) {
+  let clickedCard = e.target
+  console.log(clickedCard)
+
+  if (!clickedCard.imgSrc) {
+      //assign an image if it doesn't have one already
+      let number = Math.round(Math.random() * (imgArray.length-1)) //randomize how imgs are selected from array
+      clickedCard.imgSrc = imgArray[number]
+      imgArray.splice(number, 1) //remove that img from the array to avoid repeats 
+
+  }
+
+  //full path to the img
+  clickedCard.src = clickedCard.imgSrc
+
+  //flip over each clicked card 
+  if (clickedCard !== card1) {
+      clickedCard.classList.add('flipped')
+
+      if (!card1) {
+          return card1 = clickedCard
+      }
+
+      card2 = clickedCard
+      checkMatch()
+  }
+}
+
+  //check for a match
+  function checkMatch() {
+    if(card1.src === card2.src){
+      score ++
+
+        //Make it so you cannot click the same card twice
+        card1.removeEventListener('click', flipCard)
+        card2.removeEventListener('click', flipCard)
+
+        document.querySelector('p').innerText = `Score = ${score}`
+
+        if (score === 8){
+          setTimeout(() => alert('You Won. Game will reset after you click ok'), 1000)
+          setTimeout(() => location.reload(), 3000)
+        }
+
+        // Clear card1 and card2
+        card1 = null
+        card2 = null
+
+    } else { //flip cards back
+        setTimeout(() => {
+            card1.classList.remove('flipped')
+            card2.classList.remove('flipped')
+
+            // Reset the images to the question mark
+            card1.src = "imgs/card.png"
+            card2.src = "imgs/card.png"
+
+            // Clear card1 and card2
+            card1 = null
+            card2 = null
+        }, 1200)
+    }
+}
+
+
+function reset() {
+  location.reload()
+}