AdvancedCSS2023 · github-classroom · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/README.md b/README.md
@@ -1 +1,11 @@
-[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10911957&assignment_repo_type=AssignmentRepo)
+
+# assignment-2---css-games-group_12
+
+
+The project is a memory card game where the player needs to match pairs of cards with identical images. It first defines a function to handle the clicking of checkboxes, which checks if two checkboxes have been clicked and matches the images on the cards. If they match, the checkboxes remain checked, and if they don't match, they become unchecked after a second. The code then shuffles an array of image URLs and assigns them to the cards, creating randomized cards for the game.
+
+This game is useful because it creates an interactive game that can provide entertainment and cognitive stimulation for users. Memory games are also a popular way to improve memory and concentration skills. This game is targeted at a younger audience.
+
+The game is built using only html, css and javascript.
+
+The project is be public and can be found at [https://github.com/AdvancedCSS2023/assignment-2---css-games-group_12](https://github.com/AdvancedCSS2023/assignment-2---css-games-group_12) For help feel free to contact any of the repository contributors. This game is made by a group of web development students at NTNU Gjovik. The group consists of Petter, Emil and Tobias.
diff --git a/images/african-background.jpeg b/images/african-background.jpeg
diff --git a/images/african-village.jpeg b/images/african-village.jpeg
diff --git a/images/plane.jpeg b/images/plane.jpeg
diff --git a/images/replay.png b/images/replay.png
diff --git a/images/university.jpeg b/images/university.jpeg
diff --git a/images/water.jpeg b/images/water.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!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" />
+    <title>Memory game</title>
+    <link rel="stylesheet" href="styles/styling.css">
+  </head>
+
+  <body>
+    <h1 class="page__title">African Themed Memory Game</h1>
+
+    <div class="game-container">
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card1" />
+        <label for="card1" class="card__label">
+          <img
+            src="./images/african-village.jpeg"
+            alt="Card 1"
+            class="card__img"
+          />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card2" />
+        <label for="card2" class="card__label">
+          <img
+            src="./images/african-village.jpeg"
+            alt="Card 1"
+            class="card__img"
+          />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card3" />
+        <label for="card3" class="card__label">
+          <img src="./images/plane.jpeg" alt="Card 2" class="card__img" />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card4" />
+        <label for="card4" class="card__label">
+          <img src="./images/plane.jpeg" alt="Card 2" class="card__img" />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card5" />
+        <label for="card5" class="card__label">
+          <img src="./images/university.jpeg" alt="Card 3" class="card__img" />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card6" />
+        <label for="card6" class="card__label">
+          <img src="./images/university.jpeg" alt="Card 3" class="card__img" />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card7" />
+        <label for="card7" class="card__label">
+          <img src="./images/water.jpeg" alt="Card 4" class="card__img" />
+        </label>
+      </div>
+      <div class="card">
+        <input type="checkbox" class="card__checkbox" id="card8" />
+        <label for="card8" class="card__label">
+          <img src="./images/water.jpeg" alt="Card 4" class="card__img" />
+        </label>
+      </div>
+    </div>
+
+
+    <a href="#" onclick="location.href = location.href + '?t=' + Date.now()">
+      <img src="/images/replay.png" id="replay" alt="Play Again Icon" />
+    </a>
+
+    <script src="/script.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,69 @@
+// Select all elements with the class 'card-checkbox' and store them in the 'checkboxes' variable
+const checkboxes = document.querySelectorAll('.card__checkbox');
+// Create variables 'firstCard' and 'secondCard'
+let firstCard, secondCard;
+
+// Defining 'handleCheck' and making a function out of it
+function handleCheck() {
+    // If the clicked checkbox is not the same as 'firstCard', then put 'secondCard' to the clicked checkbox
+    if (this !== firstCard) {
+        secondCard = this;
+
+        // Making an if statement when both 'firstCard' and 'secondCard are defined
+        if (firstCard && secondCard) {
+             // and if the images of both 'firstCard' and 'secondCard' are the same
+            if (firstCard.nextElementSibling.querySelector('img').src === secondCard.nextElementSibling.querySelector('img').src) {
+                // Set both checkboxes to checked and reset both 'firstCard' and 'secondCard' to null
+                firstCard.checked = true;
+                secondCard.checked = true;
+                firstCard = null;
+                secondCard = null;
+                // If the cards are different, then uncheck the checkboxes and reset them to null after 1000ms/1 second
+            } else {
+                   // If 'firstCard' is not defined, set it to the clicked checkbox
+                setTimeout(() => {
+                    firstCard.checked = false;
+                    secondCard.checked = false;
+                    firstCard = null;
+                    secondCard = null;
+                }, 1000);
+            }
+        } else {
+            firstCard = this;
+        }
+    }
+}
+
+// Add event listeners to all checkboxes, and making a click function on the 'handleCheck'.
+checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
+// Select all elements with the class 'card-label' and store them in the 'cards' variable
+const cards = document.querySelectorAll('.card__label');
+// Create an array of image URLs
+const imgUrls = [ './images/african-village.jpeg',  './images/plane.jpeg',  './images/university.jpeg', './images/water.jpeg'];
+
+// This code shuffels the order of the cards at random (the array), by defining the 'shuffle' function.
+function shuffle(array) {
+  let currentIndex = array.length;
+  let temporaryValue, randomIndex;
+
+  while (currentIndex !== 0) {
+    // pick a random index from 0 to currentINdex -1
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+     // Swap the element at the current index with the element at the random index
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+// Return the shuffled array
+  return array;
+}
+// Calling the 'shuffel' function with the 'imgUrls' array as argument, which shuffles the array in place
+shuffle(imgUrls);
+
+// Set the 'src' attribute of each image in the 'cards' array to a shuffled image URL
+// The modulus operator (%) ensures that the shuffled URL are repeated if there are more cards than URL
+for (let i = 0; i < cards.length; i++) {
+  cards[i].querySelector('img').src = imgUrls[i % imgUrls.length];
+}
+
diff --git a/styles/_animations.scss b/styles/_animations.scss
@@ -0,0 +1,11 @@
+@keyframes hover-jump {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
@@ -0,0 +1,9 @@
+$background-color-brown: #4b2e2e;
+$border-container-color-gold: goldenrod;
+$card-boarder-black: black;
+$card-background-grey: #aaa;
+$card-hover-white: rgb(69, 61, 61);
+$card-label-color-white: rgba(255, 255, 255, 0.8);
+$standard-border-radius: 10px;
+$standard-width: 100%;
+$standard-height: 100%;
diff --git a/styles/styling.css b/styles/styling.css
@@ -0,0 +1,165 @@
+@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");
+@keyframes hover-jump {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes hover-jump {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  text-align: center;
+  background-color: #4b2e2e;
+}
+
+.game-container {
+  border: solid goldenrod;
+  max-width: 80%;
+  max-height: 100%;
+  margin: auto;
+  background-image: url(../images/african-background.jpeg);
+  background-repeat: round;
+  border-radius: 10px;
+}
+
+.page__title {
+  text-align: center;
+  margin-top: 50px;
+  font-size: 40px;
+  font-family: "Nabla", cursive;
+  margin-bottom: 2em;
+}
+
+.card {
+  width: 200px;
+  height: 200px;
+  margin: 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  position: relative;
+  background: #aaa;
+  margin: 2em;
+  border: solid black;
+  background: #aaa;
+  margin: 2em;
+  border: solid black;
+}
+
+.card__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.card__checkbox {
+  display: none;
+}
+
+.card:hover {
+  background-color: rgb(69, 61, 61);
+}
+
+.card:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.card:hover:after {
+  opacity: 1;
+}
+
+.card__label {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.card__label::after {
+  background: rgba(255, 255, 255, 0.8);
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.card__label img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 2;
+}
+
+.card__checkbox:checked + label img {
+  opacity: 1;
+}
+
+.card__checkbox:checked ~ .card-checkbox:checked + label img {
+  opacity: 1;
+}
+
+.matched {
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .game-container {
+    max-width: 500px;
+    margin: 0 auto;
+  }
+}
+img#replay {
+  display: block;
+  margin: 2% auto;
+  max-height: 30%;
+  max-width: 30%;
+  cursor: pointer;
+  margin: 2% auto;
+}
+
+img#replay:hover {
+  animation: hover-jump 1s infinite;
+}/*# sourceMappingURL=styling.css.map */
diff --git a/styles/styling.css.map b/styles/styling.css.map