Feedback

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -1 +1,23 @@
-[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10840104&assignment_repo_type=AssignmentRepo)
+# Assignment 2 - Tiny CSS game
+
+## What the project does?
+### Maze game
+The project consists of a maze game where a character controlled by a mouse cursor must try to find their way through the maze and to the goal in the center.
+If the player touches any of the walls or gets run over by an enemy ghost, then the player is forced to start over. By reaching the center, you win the game. 
+
+## Why the project is useful?
+The project is useful to us students as we learn creative ways of utilizing CSS and its great capabilities. That allows us to expand our knowledge within the field. This assignment also makes us more familiar with structuring a project for this purpose. 
+The game is useful for users too because it can help improve their concentration, problem solving skills, and reaction time. Additionally, it can be a fun and entertaining way to spend leisure time. 
+
+## How to start playing the game?
+Simply clone or download this repository and open index.html in your browser.
+
+## Which technology is used:
+* The technologies used in this game include HTML, CSS/SASS (SCSS variables), and JS for regulating audio.
+* Retrieved background gradient from this CSS background builder tool: https://www.magicpattern.design/tools/css-backgrounds
+* Royalty free sound effect was retrieved from: https://mixkit.co/free-sound-effects/game/
+* Royalty free music from: https://pixabay.com/music/search/arcade%20game/?manual_search=1&order=None
+* Icons from: https://fontawesome.com/
+
+## Who maintains and contributes to the project
+Maja Celin Brunsvik, Johannes Aas og Sabrina Altahrawi

assets/styles/_colors.scss

@@ -0,0 +1,38 @@
+// Descriptive Colors
+$white: #fff;
+$black: #000000;
+$deep-purple: #150e1a;
+$dark-purple: #241346;
+$purple: #b535fa;
+$red: #ee0000;
+$green: #079212;
+$orange: #cf4200;
+$blue: #0061cf;
+$light-orange: #ff9d2d;
+$magneta: #f82dff;
+
+// Functional Colors
+$maze__primary: $deep-purple;
+$maze__secondary: $dark-purple;
+$maze__accent: $purple;
+$maze__victory: $green;
+$maze__gameover: $black;
+$maze__text--victory: $white;
+$maze__text--game-over: $red;
+$text__primary: $purple;
+$ghost__one: $orange;
+$ghost__two: $blue;
+$ghost__three: $light-orange;
+$ghost__four: $magneta;
+$ghost__five: $red;
+$ghost__eyes: $black;
+
+// gradient mixin
+//gradient generated from: https://www.magicpattern.design/tools/css-backgrounds
+@mixin background__gradient { 
+    background-color: #000000;
+    opacity: 1;
+    background-image: radial-gradient(#979be9 1.4500000000000002px, transparent 1.4500000000000002px), radial-gradient(#979be9 1.4500000000000002px, #252525 1.4500000000000002px);
+    background-size: 58px 58px;
+    background-position: 0 0,29px 29px;
+}

assets/styles/_keyframes.scss

@@ -0,0 +1,105 @@
+
+@keyframes moving-eyes {
+    0% {
+        transform: translateX(-1.5px);
+    }
+    50% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(1.5px);
+    }
+}
+
+@keyframes ghost-movement {
+    25% { 
+        left: 0; 
+        top: 100%; 
+        transform: translate(0%, -100px); 
+    }
+    50% { 
+        left: 100%;
+        top: 100%; 
+        transform: translate(100px, -100px);
+    }
+    75% { 
+        left: 0; 
+        top: 0; 
+        transform: translate(0, -100px); 
+    }
+    100% { 
+        left: 0; 
+        top: 0; 
+        transform: translate(0, 0); 
+    }
+}
+
+@keyframes ghost-movement-2 {
+    25% { 
+        left: 0; 
+        top: 100%; 
+        transform: translate(0%, -150px); 
+    }
+    50% { 
+        left: 100%; 
+        top: 100%; 
+        transform: translate(-150px, -150px); 
+    }
+    75% { 
+        left: 100%; 
+        top: 0; 
+        transform: translate(-150px, 0%); 
+    }
+    100% { 
+        left: 0; 
+        top: 0; 
+        transform: translate(-0%, 0%); 
+    }
+}
+
+@keyframes ghost-movement-3 {
+    25% { 
+        left: 0; 
+        top: 100%; 
+        transform: translate(0%, -100px); 
+    }
+    50% { 
+        left: 100%; 
+        top: 100%; 
+        transform: translate(-100px, -100px); 
+    }
+    75% { 
+        left: 100%; 
+        top: 0; 
+        transform: translate(-100px, 0%);
+    }
+    100% { 
+        left: 0; 
+        top: 0; 
+        transform: translate(-0%, 0%);
+    }
+}
+@keyframes ghost-movement-4 {
+    100% { 
+        transform: translateX(250px); 
+    }
+}
+
+@keyframes ghost-movement-5 {
+    100% {
+        transform: translateX(400px); 
+    }
+}
+
+@keyframes slide-in {
+    0% {
+        transform: rotateX(70deg);
+        transform-origin: top;
+        opacity: 0;
+    }
+    100% {
+        transform: rotateX(0deg);
+        transform-origin: top;
+        opacity: 1;
+    }
+  }