diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index c31291c..ed89721 100644 --- a/README.md +++ b/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 diff --git a/assets/audio/bling_audio.mp3 b/assets/audio/bling_audio.mp3 new file mode 100644 index 0000000..2e9f5e2 Binary files /dev/null and b/assets/audio/bling_audio.mp3 differ diff --git a/assets/audio/music-arcade.mp3 b/assets/audio/music-arcade.mp3 new file mode 100644 index 0000000..5446c68 Binary files /dev/null and b/assets/audio/music-arcade.mp3 differ diff --git a/assets/images/blob_cursor.png b/assets/images/blob_cursor.png new file mode 100644 index 0000000..1f93354 Binary files /dev/null and b/assets/images/blob_cursor.png differ diff --git a/assets/images/ghost.svg b/assets/images/ghost.svg new file mode 100644 index 0000000..41e1017 --- /dev/null +++ b/assets/images/ghost.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/styles/_colors.scss b/assets/styles/_colors.scss new file mode 100644 index 0000000..ea7e590 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/styles/_keyframes.scss b/assets/styles/_keyframes.scss new file mode 100644 index 0000000..982939c --- /dev/null +++ b/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; + } + } \ No newline at end of file diff --git a/assets/styles/_styles.scss b/assets/styles/_styles.scss new file mode 100644 index 0000000..37b3901 --- /dev/null +++ b/assets/styles/_styles.scss @@ -0,0 +1,227 @@ +@use "colors" as *; + +* { + margin: 0; + padding: 0; + cursor: url("../images/blob_cursor.png") 10 15, auto; + box-sizing: border-box; +} + +body { + @include background__gradient; +} + +.header { + margin-top: 1rem; + color: $text__primary; + padding: .5rem; + display: flex; + gap: 1rem; + align-items: center; + flex-direction: column; + h1 { + font-size: 3rem; + font-weight: lighter; + font-family: 'Lato', sans-serif; + font-family: 'Monoton', cursive; + } + button { + padding: 10px 18px 12px; + border: none; + border-radius: 0.8rem; + background-color: $dark-purple; + color: $white; + font-family: 'Lato', sans-serif; + box-shadow: 5px 5px 0 0 $purple; + } +} +.insturctions { + margin-top: 1rem; + width: fit-content; + padding: 5px; + font-size: 2rem; + font-family: Arial, Helvetica, sans-serif; + color: $text__primary; +} + +.game-container { + height: 600px; + width: 1000px; + margin: auto; + margin-bottom: 50px; + position: relative; + border-radius: 5px; + border-radius: 5px; + border: 5px solid $maze__accent; +} + +.map__wall { + width: 100%; + height: 100%; + display: block; + background-color: $maze__secondary; +} + +.map__wall--w1 { grid-area: w1; } +.map__wall--w2 { grid-area: w2; } +.map__wall--w3 { grid-area: w3; } +.map__wall--w4 { grid-area: w4; } +.map__wall--w5 { grid-area: w5; } +.map__wall--w6 { grid-area: w6; } +.map__wall--w7 { grid-area: w7; } +.map__wall--w8 { grid-area: w8; } +.map__wall--w9 { grid-area: w9; } +.map__wall--w10 { grid-area: w10; } +.map__wall--w11 { grid-area: w11; } +.map__wall--w12 { grid-area: w12; } +.map__wall--w13 { grid-area: w13; } +.map__wall--w14 { grid-area: w14; } +.map__wall--w15 { grid-area: w15; } +.map__wall--w16 { grid-area: w16; } + +.ghost__one { grid-area: g1; } +.ghost__two { grid-area: g2; } +.ghost__three { grid-area: g3; } +.ghost__four { grid-area: g4; } +.ghost__five { grid-area: g5; } + +.map__endzone { grid-area: end;} + +.map { + background-color: $maze__primary; + width: 100%; + height: 100%; + display: grid; + grid-template-columns: repeat(19, 50px); + grid-template-rows: repeat(11, 50px); + gap: 0; + grid-template-areas: + "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" + "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" + "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" + "w3 . . . . . . g4 . . . . . . . . . . . w5" + "w3 . w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 . . . . w5" + "w3 . w8 . . . . w9 . . . . . . w7 . . . . w5" + "w3 . w8 . w16 . . w9 . w11 . w12 w13 . w7 . w15 w15 . w5" + "w3 . . . . g3 . w9 end w11 g1 w12 . . w7 . w15 w15 . w5" + "w3 w14 w14 w14 w14 w14 . w9 w10 w11 . w12 . . w7 . . . g2 w5" + "w3 w14 w14 w14 w14 w14 . . w10 . . w12 . . w7 . . . . w5" + "w3 w14 w14 w14 w14 w14 . g5 . . . . . . . . . . . w5" + "w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4"; +} + +.map__endzone { + width: 100%; + height: 100%; + display: block; + background-color: $purple; + box-shadow: 0 0 10px $purple; + z-index: 999; +} + +.map__overlay { + display: none; + position: absolute; + z-index: 999; + width: 100%; + height: 100%; + text-align: center; + line-height: 600px; + font-size: 5rem; + font-family: 'Carter One', cursive; + font-family: 'Lato', sans-serif; + font-family: 'Monoton', cursive; +} + +.map__overlay--game-over { + background-color: transparentize($maze__gameover, .1); + color: $maze__text--game-over; + font-family: 'Carter One', cursive; +} + +.map__overlay--victory { + background-color: transparentize($maze__victory, .1); + color: $maze__text--victory; + animation: slide-in 0.4s ease-in-out; +} + +.map__overlay:hover { + display: block; +} + +.enemy:hover~.map__overlay--game-over, +.map__wall:hover~.map__overlay--game-over, +.ghost:hover~.map__overlay--game-over, +.map__endzone:hover~.map__overlay--victory { + display: block; +} + + +/* enemies */ + +$ghost__movement--fast: 1.5s; +$ghost__movement--mid: 2s; +$ghost__movement--slow: 4s; + +.ghost__one { + animation: ghost-movement $ghost__movement--mid ease-in-out infinite; + &__svg { + height: 45px; + width: 45px; + fill: $ghost__one; + &--lens { + fill: $ghost__eyes; + animation: moving-eyes 2s ease-in-out infinite alternate; + } + } +} + +.ghost__two { + animation: ghost-movement-2 $ghost__movement--slow ease-in-out alternate infinite; + &__svg { + height: 45px; + width: 45px; + fill: $ghost__two; + &--lens { + fill: $ghost__eyes; + animation: moving-eyes 2s ease-in-out infinite alternate; + } + } +} + +.ghost__three { + animation: ghost-movement-3 $ghost__movement--mid ease-in-out infinite; + &__svg { + height: 45px; + width: 45px; + fill: $ghost__three; + &--lens { + fill: $ghost__eyes; + animation: moving-eyes 2s ease-in-out infinite alternate; + } + } +} +.ghost__four { + animation: ghost-movement-4 $ghost__movement--fast ease-in-out infinite alternate; + &__svg { + height: 45px; + width: 45px; + fill: $ghost__four; + &--lens { + fill: $ghost__eyes; + animation: moving-eyes 2s ease-in-out infinite alternate; + } + } +} +.ghost__five { + animation: ghost-movement-5 $ghost__movement--mid ease-in-out alternate infinite; + &__svg { + height: 45px; + width: 45px; + fill: $ghost__five; + &--lens { + fill: $ghost__eyes; + animation: moving-eyes 2s ease-in-out infinite alternate; + } + } +} diff --git a/assets/styles/index.css b/assets/styles/index.css new file mode 100644 index 0000000..7394330 --- /dev/null +++ b/assets/styles/index.css @@ -0,0 +1,378 @@ +* { + margin: 0; + padding: 0; + cursor: url("../images/blob_cursor.png") 10 15, auto; + box-sizing: border-box; +} + +body { + background-color: #000000; + opacity: 1; + background-image: radial-gradient(#979be9 1.45px, transparent 1.45px), radial-gradient(#979be9 1.45px, #252525 1.45px); + background-size: 58px 58px; + background-position: 0 0, 29px 29px; +} + +.header { + margin-top: 1rem; + color: #b535fa; + padding: 0.5rem; + display: flex; + gap: 1rem; + align-items: center; + flex-direction: column; +} +.header h1 { + font-size: 3rem; + font-weight: lighter; + font-family: "Lato", sans-serif; + font-family: "Monoton", cursive; +} +.header button { + padding: 10px 18px 12px; + border: none; + border-radius: 0.8rem; + background-color: #241346; + color: #fff; + font-family: "Lato", sans-serif; + box-shadow: 5px 5px 0 0 #b535fa; +} + +.insturctions { + margin-top: 1rem; + width: -moz-fit-content; + width: fit-content; + padding: 5px; + font-size: 2rem; + font-family: Arial, Helvetica, sans-serif; + color: #b535fa; +} + +.game-container { + height: 600px; + width: 1000px; + margin: auto; + margin-bottom: 50px; + position: relative; + border-radius: 5px; + border-radius: 5px; + border: 5px solid #b535fa; +} + +.map__wall { + width: 100%; + height: 100%; + display: block; + background-color: #241346; +} + +.map__wall--w1 { + grid-area: w1; +} + +.map__wall--w2 { + grid-area: w2; +} + +.map__wall--w3 { + grid-area: w3; +} + +.map__wall--w4 { + grid-area: w4; +} + +.map__wall--w5 { + grid-area: w5; +} + +.map__wall--w6 { + grid-area: w6; +} + +.map__wall--w7 { + grid-area: w7; +} + +.map__wall--w8 { + grid-area: w8; +} + +.map__wall--w9 { + grid-area: w9; +} + +.map__wall--w10 { + grid-area: w10; +} + +.map__wall--w11 { + grid-area: w11; +} + +.map__wall--w12 { + grid-area: w12; +} + +.map__wall--w13 { + grid-area: w13; +} + +.map__wall--w14 { + grid-area: w14; +} + +.map__wall--w15 { + grid-area: w15; +} + +.map__wall--w16 { + grid-area: w16; +} + +.ghost__one { + grid-area: g1; +} + +.ghost__two { + grid-area: g2; +} + +.ghost__three { + grid-area: g3; +} + +.ghost__four { + grid-area: g4; +} + +.ghost__five { + grid-area: g5; +} + +.map__endzone { + grid-area: end; +} + +.map { + background-color: #150e1a; + width: 100%; + height: 100%; + display: grid; + grid-template-columns: repeat(19, 50px); + grid-template-rows: repeat(11, 50px); + gap: 0; + grid-template-areas: "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" "w1 w1 w1 w1 w1 w1 w1 w1 w1 . . w2 w2 w2 w2 w2 w2 w2 w2 w2" "w3 . . . . . . g4 . . . . . . . . . . . w5" "w3 . w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 w6 . . . . w5" "w3 . w8 . . . . w9 . . . . . . w7 . . . . w5" "w3 . w8 . w16 . . w9 . w11 . w12 w13 . w7 . w15 w15 . w5" "w3 . . . . g3 . w9 end w11 g1 w12 . . w7 . w15 w15 . w5" "w3 w14 w14 w14 w14 w14 . w9 w10 w11 . w12 . . w7 . . . g2 w5" "w3 w14 w14 w14 w14 w14 . . w10 . . w12 . . w7 . . . . w5" "w3 w14 w14 w14 w14 w14 . g5 . . . . . . . . . . . w5" "w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4 w4"; +} + +.map__endzone { + width: 100%; + height: 100%; + display: block; + background-color: #b535fa; + box-shadow: 0 0 10px #b535fa; + z-index: 999; +} + +.map__overlay { + display: none; + position: absolute; + z-index: 999; + width: 100%; + height: 100%; + text-align: center; + line-height: 600px; + font-size: 5rem; + font-family: "Carter One", cursive; + font-family: "Lato", sans-serif; + font-family: "Monoton", cursive; +} + +.map__overlay--game-over { + background-color: rgba(0, 0, 0, 0.9); + color: #ee0000; + font-family: "Carter One", cursive; +} + +.map__overlay--victory { + background-color: rgba(7, 146, 18, 0.9); + color: #fff; + animation: slide-in 0.4s ease-in-out; +} + +.map__overlay:hover { + display: block; +} + +.enemy:hover ~ .map__overlay--game-over, +.map__wall:hover ~ .map__overlay--game-over, +.ghost:hover ~ .map__overlay--game-over, +.map__endzone:hover ~ .map__overlay--victory { + display: block; +} + +/* enemies */ +.ghost__one { + animation: ghost-movement 2s ease-in-out infinite; +} +.ghost__one__svg { + height: 45px; + width: 45px; + fill: #cf4200; +} +.ghost__one__svg--lens { + fill: #000000; + animation: moving-eyes 2s ease-in-out infinite alternate; +} + +.ghost__two { + animation: ghost-movement-2 4s ease-in-out alternate infinite; +} +.ghost__two__svg { + height: 45px; + width: 45px; + fill: #0061cf; +} +.ghost__two__svg--lens { + fill: #000000; + animation: moving-eyes 2s ease-in-out infinite alternate; +} + +.ghost__three { + animation: ghost-movement-3 2s ease-in-out infinite; +} +.ghost__three__svg { + height: 45px; + width: 45px; + fill: #ff9d2d; +} +.ghost__three__svg--lens { + fill: #000000; + animation: moving-eyes 2s ease-in-out infinite alternate; +} + +.ghost__four { + animation: ghost-movement-4 1.5s ease-in-out infinite alternate; +} +.ghost__four__svg { + height: 45px; + width: 45px; + fill: #f82dff; +} +.ghost__four__svg--lens { + fill: #000000; + animation: moving-eyes 2s ease-in-out infinite alternate; +} + +.ghost__five { + animation: ghost-movement-5 2s ease-in-out alternate infinite; +} +.ghost__five__svg { + height: 45px; + width: 45px; + fill: #ee0000; +} +.ghost__five__svg--lens { + fill: #000000; + animation: moving-eyes 2s ease-in-out infinite alternate; +} + +@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; + } +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/assets/styles/index.css.map b/assets/styles/index.css.map new file mode 100644 index 0000000..c377778 --- /dev/null +++ b/assets/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_styles.scss","index.css","_colors.scss","_keyframes.scss"],"names":[],"mappings":"AAEA;EACI,SAAA;EACA,UAAA;EACA,oDAAA;EACA,sBAAA;ACDJ;;ADIA;EEuBI,yBAAA;EACA,UAAA;EACA,sHAAA;EACA,0BAAA;EACA,mCAAA;ADvBJ;;ADAA;EACI,gBAAA;EACA,cEVK;EFWL,eAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;EACA,sBAAA;ACGJ;ADFI;EACI,eAAA;EACA,oBAAA;EACA,+BAAA;EACA,+BAAA;ACIR;ADFI;EACI,uBAAA;EACA,YAAA;EACA,qBAAA;EACA,yBE3BM;EF4BN,WE/BA;EFgCA,+BAAA;EACA,+BAAA;ACIR;;ADDA;EACI,gBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,YAAA;EACA,eAAA;EACA,yCAAA;EACA,cEtCK;AD0CT;;ADDA;EACI,aAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,yBAAA;ACIJ;;ADDA;EACI,WAAA;EACA,YAAA;EACA,cAAA;EACA,yBEzDU;AD6Dd;;ADDA;EAAiB,aAAA;ACKjB;;ADJA;EAAiB,aAAA;ACQjB;;ADPA;EAAiB,aAAA;ACWjB;;ADVA;EAAiB,aAAA;ACcjB;;ADbA;EAAiB,aAAA;ACiBjB;;ADhBA;EAAiB,aAAA;ACoBjB;;ADnBA;EAAiB,aAAA;ACuBjB;;ADtBA;EAAiB,aAAA;AC0BjB;;ADzBA;EAAiB,aAAA;AC6BjB;;AD5BA;EAAkB,cAAA;ACgClB;;AD/BA;EAAkB,cAAA;ACmClB;;ADlCA;EAAkB,cAAA;ACsClB;;ADrCA;EAAkB,cAAA;ACyClB;;ADxCA;EAAkB,cAAA;AC4ClB;;AD3CA;EAAkB,cAAA;AC+ClB;;AD9CA;EAAkB,cAAA;ACkDlB;;ADhDA;EAAc,aAAA;ACoDd;;ADnDA;EAAc,aAAA;ACuDd;;ADtDA;EAAgB,aAAA;AC0DhB;;ADzDA;EAAe,aAAA;AC6Df;;AD5DA;EAAe,aAAA;ACgEf;;AD9DA;EAAgB,cAAA;ACkEhB;;ADhEA;EACI,yBEvFU;EFwFV,WAAA;EACA,YAAA;EACA,aAAA;EACA,uCAAA;EACA,oCAAA;EACA,MAAA;EACA,g+BACI;ACkER;;ADpDA;EACI,WAAA;EACA,YAAA;EACA,cAAA;EACA,yBE/GK;EFgHL,4BAAA;EACA,YAAA;ACuDJ;;ADpDA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,kCAAA;EACA,+BAAA;EACA,+BAAA;ACuDJ;;ADpDA;EACI,oCAAA;EACA,cEnIE;EFoIF,kCAAA;ACuDJ;;ADpDA;EACI,uCAAA;EACA,WE9II;EF+IJ,oCAAA;ACuDJ;;ADpDA;EACI,cAAA;ACuDJ;;ADpDA;;;;EAII,cAAA;ACuDJ;;ADnDA,YAAA;AAMA;EACI,iDAAA;ACiDJ;ADhDI;EACI,YAAA;EACA,WAAA;EACA,aElKC;ADoNT;ADjDQ;EACI,aE1KJ;EF2KC,wDAAA;ACmDT;;AD9CA;EACI,6DAAA;ACiDJ;ADhDI;EACI,YAAA;EACA,WAAA;EACA,aE9KD;ADgOP;ADjDQ;EACI,aEvLJ;EFwLC,wDAAA;ACmDT;;AD9CA;EACI,mDAAA;ACiDJ;ADhDI;EACI,YAAA;EACA,WAAA;EACA,aE1LO;AD4Of;ADjDQ;EACI,aEpMJ;EFqMC,wDAAA;ACmDT;;AD/CA;EACI,+DAAA;ACkDJ;ADjDI;EACI,YAAA;EACA,WAAA;EACA,aErME;ADwPV;ADlDQ;EACI,aEhNJ;EFiNC,wDAAA;ACoDT;;ADhDA;EACI,6DAAA;ACmDJ;ADlDI;EACI,YAAA;EACA,WAAA;EACA,aEtNF;AD0QN;ADnDQ;EACI,aE5NJ;EF6NC,wDAAA;ACqDT;;AEnRA;EACI;IACI,6BAAA;EFsRN;EEpRE;IACI,wBAAA;EFsRN;EEpRE;IACI,4BAAA;EFsRN;AACF;AEnRA;EACI;IACI,OAAA;IACA,SAAA;IACA,gCAAA;EFqRN;EEnRE;IACI,UAAA;IACA,SAAA;IACA,mCAAA;EFqRN;EEnRE;IACI,OAAA;IACA,MAAA;IACA,+BAAA;EFqRN;EEnRE;IACI,OAAA;IACA,MAAA;IACA,0BAAA;EFqRN;AACF;AElRA;EACI;IACI,OAAA;IACA,SAAA;IACA,gCAAA;EFoRN;EElRE;IACI,UAAA;IACA,SAAA;IACA,oCAAA;EFoRN;EElRE;IACI,UAAA;IACA,MAAA;IACA,gCAAA;EFoRN;EElRE;IACI,OAAA;IACA,MAAA;IACA,4BAAA;EFoRN;AACF;AEjRA;EACI;IACI,OAAA;IACA,SAAA;IACA,gCAAA;EFmRN;EEjRE;IACI,UAAA;IACA,SAAA;IACA,oCAAA;EFmRN;EEjRE;IACI,UAAA;IACA,MAAA;IACA,gCAAA;EFmRN;EEjRE;IACI,OAAA;IACA,MAAA;IACA,4BAAA;EFmRN;AACF;AEjRA;EACI;IACI,4BAAA;EFmRN;AACF;AEhRA;EACI;IACI,4BAAA;EFkRN;AACF;AE/QA;EACI;IACI,yBAAA;IACA,qBAAA;IACA,UAAA;EFiRN;EE/QE;IACI,wBAAA;IACA,qBAAA;IACA,UAAA;EFiRN;AACF","file":"index.css"} \ No newline at end of file diff --git a/assets/styles/index.scss b/assets/styles/index.scss new file mode 100644 index 0000000..968487f --- /dev/null +++ b/assets/styles/index.scss @@ -0,0 +1,3 @@ +@use "styles" as *; +@use "colors" as *; +@use "keyframes" as *; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2963611 --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + + + + +
+

GHOST SPRINTER

+ +

START

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
GAME OVER
+
Congratz!
+
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..fc97ae4 --- /dev/null +++ b/script.js @@ -0,0 +1,25 @@ +// sound effect for reaching the goal +let sound = new Audio("assets/audio/bling_audio.mp3"); +let endzone = document.querySelector(".map__overlay--victory"); + +let play = () => { + sound.play(); + sound.volume = 0.7; +} +endzone.addEventListener('mouseover', play); + +// background music toggler +let bgMusic = new Audio('assets/audio/music-arcade.mp3'); +let toggleMusic = document.querySelector("#music__button") + +toggleMusic.addEventListener("click", ()=> { + if (bgMusic.paused) { + bgMusic.play(); + bgMusic.loop=true; + bgMusic.volume = 1; + toggleMusic.innerHTML = "" + } else { + bgMusic.pause(); + toggleMusic.innerHTML = ""; + } + }); \ No newline at end of file