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 c4ce09f..ae74994 100644 --- a/README.md +++ b/README.md @@ -1 +1,34 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/LlYauwvp) [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10811035&assignment_repo_type=AssignmentRepo) + + +## CSS ball shooter + +This project is a CSS ball shooting game that allows users to shoot/click balls dropping before the time runs out. The game is made by just using CSS/SASS and HTML. Its intent is to make us, the developers be more familiar with Git and GitHub, and using it in a collaborative manner. + +## Why the project is useful + +The project helps us develop our coding skills while also using Git/GitHub. + +## How to get started + +To get started, users can follow these steps: + +1. Clone the repository to their local environment using git clone https://github.com/AdvancedCSS2023/assignment-2---css-games-group_4.git + +2. Open the index.html file in their browser. + +3. Click on some balls! + +## Where an users seek help + +If users where to need help, they can reach out to the contributors via the GitHub repository. Additionally, we've added some short instructions on the start screen. + +## Which technology is used + +The project is developed using pure CSS/SASS and HTML and is hosted on GitHub. + +## Who are the creators/maintainers + +The project is developed and maintained by the group members of group 4 of the Advanced CSS course at NTNU. Contributions are welcome from anyone that would like to improve the game experience. Please submit a pull request if you would like to contribute! + diff --git a/images/clapping-shia.gif b/images/clapping-shia.gif new file mode 100644 index 0000000..2183569 Binary files /dev/null and b/images/clapping-shia.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0bf798a --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + CSS - Game | Stage One + + + + +
+ + + + + + + + + + + +
+

YOU WON

+

...nice

+
+ STAGE TWO! +
+
+
+ + + + + + + + +
+

POP ALL THE BALL'S BEFORE THE TIME RUNS OUT

+

YOU HAVE 20 SECONDS!

+
+
+

GAME OVER, YOU FAILED

+

Press F5 to try again

+
+
+
+

How to play

+

Click on each of the moving balls before the time runs out.

+

Good Luck!

+

PS, press F11(fullscreen) for the best gaming experience. A mouse is also recommended ;-)

+
+
+

About this game

+

+ This is a game developed by students at NTNU as part of the Avanced CSS + course. Our goal with this project is to enhance our proficiency in Git + and collaborate using GitHub. +

+
+ + diff --git a/stage-four.html b/stage-four.html new file mode 100644 index 0000000..4dd8445 --- /dev/null +++ b/stage-four.html @@ -0,0 +1,44 @@ + + + + + + + CSS - Game | stage Four + + + + +
+ + + + + + + + + + + +
+

YOU WON!

+ image of Shia Laboeuf clapping +
+ PLAY AGAIN! +
+
+
+
+

STAGE FOUR | FINAL STAGE

+

YOU HAVE 22 SECONDS!

+
+
+

GAME OVER, YOU FAILED

+

Press F5 to try again

+
+ + diff --git a/stage-three.html b/stage-three.html new file mode 100644 index 0000000..ef2c230 --- /dev/null +++ b/stage-three.html @@ -0,0 +1,41 @@ + + + + + + + CSS - Game | stage Three + + + + +
+ + + + + + + + + + + +
+

YOU WON

+

...nice

+
+ STAGE FOUR! +
+
+
+
+

STAGE THREE

+

YOU HAVE 18 SECONDS!

+
+
+

GAME OVER, YOU FAILED

+

Press F5 to try again

+
+ + diff --git a/stage-two.html b/stage-two.html new file mode 100644 index 0000000..4f67bd7 --- /dev/null +++ b/stage-two.html @@ -0,0 +1,41 @@ + + + + + + + CSS - Game | stage Two + + + + +
+ + + + + + + + + + + +
+

YOU WON

+

...nice

+
+ STAGE THREE! +
+
+
+
+

STAGE TWO

+

YOU HAVE 18 SECONDS!

+
+
+

GAME OVER, YOU FAILED

+

Press F5 to try again

+
+ + diff --git a/styles/_colors.scss b/styles/_colors.scss new file mode 100644 index 0000000..db911ad --- /dev/null +++ b/styles/_colors.scss @@ -0,0 +1,28 @@ +:root { + --header-color: rgb(240, 248, 255); + --paragraph-color: rgb(245, 245, 245); + --stage-one-body-linear-gradient: linear-gradient( + 0deg, + rgba(2, 0, 36, 1) 0%, + rgba(0, 152, 194, 1) 100% + ); + --stage-two-body-linear-gradient: linear-gradient( + 0deg, + rgb(17, 17, 0) 0%, + rgb(229, 255, 0) 100% + ); + --stage-three-body-linear-gradient: linear-gradient( + 0deg, + rgb(0, 0, 0) 0%, + rgb(88, 235, 2) 100% + ); + --stage-four-body-linear-gradient: linear-gradient( + 0deg, + rgb(130, 0, 134), + rgb(8, 0, 20) + ); + --info-container-color: rgba(15, 12, 32); + --next-stage-hover-color: rgba(255, 0, 0); + --next-stage-color: rgba(255, 255, 255); + --next-stage-anchor-color: rgb(0, 0, 0); +} diff --git a/styles/_key-frames.scss b/styles/_key-frames.scss new file mode 100644 index 0000000..1251cdd --- /dev/null +++ b/styles/_key-frames.scss @@ -0,0 +1,98 @@ +@keyframes info-box { + 0% { + opacity: 1; + transform: translateX(0); + } + + 100% { + opacity: 0; + transform: translateX(5000px); + } +} + +@keyframes fall { + 0% { + transform: translateY(0px); + } + + 100% { + transform: translateY(1000px); + } +} + +@keyframes game-over-animation { + 0% { + transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); + transform-origin: 50% 0%; + filter: blur(40px); + opacity: 0; + top: 200dvh; + margin-top: 500px; + } + 100% { + transform: translateY(0) scaleY(1) scaleX(1); + transform-origin: 50% 50%; + filter: blur(0); + opacity: 1; + top: 0dvh; + margin-top: 0px; + } +} + +@keyframes fall-side-to-side { + 0% { + transform: translateY(0px) translateX(0px); + } + + 25% { + transform: translateY(250px) translateX(-50px); + } + + 50% { + transform: translateY(500px) translateX(30px); + } + + 75% { + transform: translateY(750px) translateX(-170px); + } + + 100% { + transform: translateY(1000px) translateX(0px); + } +} + +@keyframes fall-odd { + 0% { + transform: translateY(0px) translateX(0px); + } + 25% { + transform: translateY(250px) translateX(150px); + } + 50% { + transform: translateY(450px) translateX(-100px); + } + 75% { + transform: translateY(400px) translateX(200px); + } + 100% { + transform: translateY(1000px) translateX(150px); + } +} + +@keyframes fall-even { + 0% { + transform: translateY(0px) translateX(-50px); + } + 25% { + transform: translateY(300px) translateX(100px); + } + 50% { + transform: translateY(550px) translateX(200px); + } + 75% { + transform: translateY(450px) translateX(-200px); + } + 100% { + transform: translateY(1000px) translateX(-10px); + } +} diff --git a/styles/_mixins.scss b/styles/_mixins.scss new file mode 100644 index 0000000..c6c4cbb --- /dev/null +++ b/styles/_mixins.scss @@ -0,0 +1,23 @@ +@mixin flex-centered { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +@mixin main-background($gradient) { + background: $gradient fixed; +} + +@mixin game-over-screen($animation-delay) { + height: 100vh; + width: 100vw; + background-color: var(--info-container-color); + @include flex-centered; + position: absolute; + bottom: 0vh; + animation: game-over-animation 0.6s cubic-bezier(0.23, 1, 0.32, 1) + $animation-delay both; + top: 200vh; + margin-top: 500px; +} diff --git a/styles/_stage-four.scss b/styles/_stage-four.scss new file mode 100644 index 0000000..ae7e14f --- /dev/null +++ b/styles/_stage-four.scss @@ -0,0 +1,74 @@ +.stage__four--body { + @include main-background(var(--stage-four-body-linear-gradient)); + } + + .game__info--game-over-stage-four { + @include game-over-screen(27s); + } + + input.stage-four:nth-child(odd) { + animation-name: fall-odd; + animation-duration: 5s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + } + + input.stage-four:nth-child(even) { + animation-name: fall-even; + animation-duration: 5s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-direction: reverse; + animation-iteration-count: infinite; + } + + + + .ball-one.stage-four { + animation-delay: 8s; + } + + .ball-two.stage-four { + animation-delay: 8.5s; + } + + .ball-three.stage-four { + animation-delay: 9s; + } + + + .ball-four.stage-four { + animation-delay: 9.5s; + } + + .ball-five.stage-four { + animation-delay: 10s; + } + + .ball-six.stage-four { + animation-delay: 10.5s; + } + + .ball-seven.stage-four { + animation-delay: 11s; + } + + .ball-eight.stage-four { + animation-delay: 11.5s; + } + + .ball-nine.stage-four { + animation-delay: 12s; + } + + .ball-ten.stage-four { + animation-delay: 12.5s; + } + + .ball-eleven.stage-four { + animation-delay: 13s; + } + + + \ No newline at end of file diff --git a/styles/_stage-one.scss b/styles/_stage-one.scss new file mode 100644 index 0000000..19f52b9 --- /dev/null +++ b/styles/_stage-one.scss @@ -0,0 +1,170 @@ +.stage__one--body { + @include main-background(var(--stage-one-body-linear-gradient)); +} + +#start-game:checked ~ .game__info--container { + height: 100%; + width: 100dvw; + top: 0; + background-color: var(--info-container-color); + animation: info-box 1s linear 5s 1 normal both; + position: absolute; +} + +#start-game:checked ~ .game__info--game-over { + @include game-over-screen(25s); +} + +#start-game, +#game-rules, +#about-game { + display: none; +} + +#start-game:checked ~ .menu-label, +#game-rules:checked ~ .menu-label, +#about-game:checked ~ .menu-label { + display: none; +} + +.menu-label { + @include flex-centered; + position: absolute; + width: 20vw; + height: 10vh; + left: 40vw; + color: var(--paragraph-color); + z-index: 11; + border: var(--paragraph-color) 2px solid; +} + +.menu-label-close:hover, +.menu-label:hover { + border: 2px solid; + border-color: var(--next-stage-hover-color); +} + +#start-game-button { + top: 20dvh; +} + +#game-rules-button { + top: 35dvh; +} + +#about-game-button { + top: 50dvh; +} + +.game__info--start-game { + position: absolute; + width: 100%; + height: 100%; + background-color: var(--info-container-color); + z-index: 10; + top: 0; +} + +#start-game:checked ~ .game__info--start-game { + display: none; +} + +#start-game-button:before { + content: "Ball shooting game"; + position: absolute; + bottom: 130%; + font-size: 2rem; + width: 199%; + font-weight: bolder; + text-align: center; +} + +.game__info--rules, +.game__info--about-game { + display: none; +} + +#game-rules:checked ~ .game__info--rules, +#about-game:checked ~ .game__info--about-game { + @include flex-centered; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--info-container-color); + z-index: 11; + top: 0; +} + +.game__info--about-game p, +.game__info--rules p { + max-width: 50ch; + margin-top: 1rem; +} + +.menu-label-close { + border: solid white 2px; + width: 30px; + height: 30px; + display: none; +} + +#game-rules:checked ~ #game-rules-close, +#about-game:checked ~ #about-game-close { + @include flex-centered; + position: absolute; + width: 10vw; + bottom: 5vh; + left: 45vw; + z-index: 12; + color: var(--paragraph-color); +} + +.game__info--rules p:last-child { + font-style: italic; + font-size: 1rem; + width: 46ch; +} + +.ball-one { + animation-delay: 8s; +} + +.ball-two { + animation-delay: 8.5s; +} + +.ball-three { + animation-delay: 9s; +} + +.ball-four { + animation-delay: 9.5s; +} + +.ball-five { + animation-delay: 10s; +} + +.ball-six { + animation-delay: 10.5s; +} + +.ball-seven { + animation-delay: 11s; +} + +.ball-eight { + animation-delay: 11.5s; +} + +.ball-nine { + animation-delay: 12s; +} + +.ball-ten { + animation-delay: 12.5s; +} + +.ball-eleven { + animation-delay: 13s; +} diff --git a/styles/_stage-three.scss b/styles/_stage-three.scss new file mode 100644 index 0000000..9f09a27 --- /dev/null +++ b/styles/_stage-three.scss @@ -0,0 +1,66 @@ +.stage__three--body { + @include main-background(var(--stage-three-body-linear-gradient)); + top: 0; +} + +.game__info--game-over-stage-three { + @include game-over-screen(23s); +} + +.ball-container { + .ball-one.stage-three { + animation-delay: 8s; + } + + .ball-two.stage-three { + animation-delay: 8.5s; + } + + .ball-three.stage-three { + animation-delay: 9s; + } + + .ball-four.stage-three { + animation-delay: 9.5s; + } + + .ball-five.stage-three { + animation-delay: 10s; + } + + .ball-six.stage-three { + animation-delay: 10.5s; + } + + .ball-seven.stage-three { + animation-delay: 11s; + } + + .ball-eight.stage-three { + animation-delay: 11.5s; + } + + .ball-nine.stage-three { + animation-delay: 12s; + } + + .ball-ten.stage-three { + animation-delay: 12.5s; + } + + .ball-eleven.stage-three { + animation-delay: 13s; + } +} + +input.stage-three:nth-child(odd) { + animation: fall-side-to-side 5s reverse; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +input.stage-three:nth-child(even) { + animation: fall-side-to-side 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} diff --git a/styles/_stage-two.scss b/styles/_stage-two.scss new file mode 100644 index 0000000..bae90d2 --- /dev/null +++ b/styles/_stage-two.scss @@ -0,0 +1,57 @@ +.stage__two--body { + @include main-background(var(--stage-two-body-linear-gradient)); +} + +.game__info--game-over-stage-two { + @include game-over-screen(23s); +} + +.ball-one.stage-two { + animation-delay: 8s; +} + +.ball-two.stage-two { + animation-delay: 8.5s; +} + +.ball-three.stage-two { + animation-delay: 9s; +} + +.ball-four.stage-two { + animation-delay: 9.5s; +} + +.ball-five.stage-two { + animation-delay: 10s; +} + +.ball-six.stage-two { + animation-delay: 10.5s; +} + +.ball-seven.stage-two { + animation-delay: 11s; +} + +.ball-eight.stage-two { + animation-delay: 11.5s; +} + +.ball-nine.stage-two { + animation-delay: 12s; +} + +.ball-ten.stage-two { + animation-delay: 12.5s; +} + +.ball-eleven.stage-two { + animation-delay: 13s; +} + +input.stage-two { + animation: fall-side-to-side 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} diff --git a/styles/_styles.scss b/styles/_styles.scss new file mode 100644 index 0000000..f8b06a9 --- /dev/null +++ b/styles/_styles.scss @@ -0,0 +1,114 @@ +*, +*::before, +*::after { + cursor: crosshair; + margin: 0; + font-family: sans-serif; + box-sizing: border-box; +} + +h1, +h2 { + color: var(--header-color); +} + +h2 { + font-size: 2rem; +} + +p { + font-size: 1.3rem; + color: var(--paragraph-color); +} + +body { + overflow: hidden; + height: 100dvh; +} + +.ball-container { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + position: relative; + bottom: 100px; +} + +input { + appearance: none; + content: url(https://www.pngall.com/wp-content/uploads/5/Red-Ball-Transparent.png); + height: 60px; + width: 70px; + animation: fall 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +input:checked { + opacity: 0; +} + +.game__info--game-over { + display: none; +} + +.game__info--win-screen { + height: 115dvh; + width: 100dvw; + background-color: var(--info-container-color); + @include flex-centered; + position: absolute; + top: -110dvh; + transition: 200ms; + z-index: 5; +} + +input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + + input:checked + ~ .game__info--win-screen { + top: 9.7dvh; +} + +.game__info--next-stage { + height: 50px; + width: 180px; + background-color: var(--next-stage-color); + font-size: 1rem; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 1rem; +} +.game__info--next-stage a { + text-decoration: none; + color: var(--next-stage-anchor-color); + font-weight: bold; +} + +.game__info--next-stage:hover { + background-color: var(--next-stage-hover-color); +} + +.game__info--container-stage-two-four { + height: 100%; + width: 100dvw; + background-color: var(--info-container-color); + @include flex-centered; + animation: info-box 1s linear 5s 1 normal both; + position: absolute; + top: 0; +} + +.game__info--container { + @include flex-centered; +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..3069f0b --- /dev/null +++ b/styles/index.css @@ -0,0 +1,638 @@ +:root { + --header-color: rgb(240, 248, 255); + --paragraph-color: rgb(245, 245, 245); + --stage-one-body-linear-gradient: linear-gradient( + 0deg, + rgba(2, 0, 36, 1) 0%, + rgba(0, 152, 194, 1) 100% + ); + --stage-two-body-linear-gradient: linear-gradient( + 0deg, + rgb(17, 17, 0) 0%, + rgb(229, 255, 0) 100% + ); + --stage-three-body-linear-gradient: linear-gradient( + 0deg, + rgb(0, 0, 0) 0%, + rgb(88, 235, 2) 100% + ); + --stage-four-body-linear-gradient: linear-gradient( + 0deg, + rgb(130, 0, 134), + rgb(8, 0, 20) + ); + --info-container-color: rgba(15, 12, 32); + --next-stage-hover-color: rgba(255, 0, 0); + --next-stage-color: rgba(255, 255, 255); + --next-stage-anchor-color: rgb(0, 0, 0); +} + +*, +*::before, +*::after { + cursor: crosshair; + margin: 0; + font-family: sans-serif; + box-sizing: border-box; +} + +h1, +h2 { + color: var(--header-color); +} + +h2 { + font-size: 2rem; +} + +p { + font-size: 1.3rem; + color: var(--paragraph-color); +} + +body { + overflow: hidden; + height: 100dvh; +} + +.ball-container { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + position: relative; + bottom: 100px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + content: url(https://www.pngall.com/wp-content/uploads/5/Red-Ball-Transparent.png); + height: 60px; + width: 70px; + animation: fall 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +input:checked { + opacity: 0; +} + +.game__info--game-over { + display: none; +} + +.game__info--win-screen { + height: 115dvh; + width: 100dvw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + top: -110dvh; + transition: 200ms; + z-index: 5; +} + +input:checked + input:checked + input:checked + input:checked + input:checked + input:checked + input:checked + input:checked + input:checked + input:checked + input:checked ~ .game__info--win-screen { + top: 9.7dvh; +} + +.game__info--next-stage { + height: 50px; + width: 180px; + background-color: var(--next-stage-color); + font-size: 1rem; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 1rem; +} + +.game__info--next-stage a { + text-decoration: none; + color: var(--next-stage-anchor-color); + font-weight: bold; +} + +.game__info--next-stage:hover { + background-color: var(--next-stage-hover-color); +} + +.game__info--container-stage-two-four { + height: 100%; + width: 100dvw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + animation: info-box 1s linear 5s 1 normal both; + position: absolute; + top: 0; +} + +.game__info--container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.stage__one--body { + background: var(--stage-one-body-linear-gradient) fixed; +} + +#start-game:checked ~ .game__info--container { + height: 100%; + width: 100dvw; + top: 0; + background-color: var(--info-container-color); + animation: info-box 1s linear 5s 1 normal both; + position: absolute; +} + +#start-game:checked ~ .game__info--game-over { + height: 100vh; + width: 100vw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + bottom: 0vh; + animation: game-over-animation 0.6s cubic-bezier(0.23, 1, 0.32, 1) 25s both; + top: 200vh; + margin-top: 500px; +} + +#start-game, +#game-rules, +#about-game { + display: none; +} + +#start-game:checked ~ .menu-label, +#game-rules:checked ~ .menu-label, +#about-game:checked ~ .menu-label { + display: none; +} + +.menu-label { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + width: 20vw; + height: 10vh; + left: 40vw; + color: var(--paragraph-color); + z-index: 11; + border: var(--paragraph-color) 2px solid; +} + +.menu-label-close:hover, +.menu-label:hover { + border: 2px solid; + border-color: var(--next-stage-hover-color); +} + +#start-game-button { + top: 20dvh; +} + +#game-rules-button { + top: 35dvh; +} + +#about-game-button { + top: 50dvh; +} + +.game__info--start-game { + position: absolute; + width: 100%; + height: 100%; + background-color: var(--info-container-color); + z-index: 10; + top: 0; +} + +#start-game:checked ~ .game__info--start-game { + display: none; +} + +#start-game-button:before { + content: "Ball shooting game"; + position: absolute; + bottom: 130%; + font-size: 2rem; + width: 199%; + font-weight: bolder; + text-align: center; +} + +.game__info--rules, +.game__info--about-game { + display: none; +} + +#game-rules:checked ~ .game__info--rules, +#about-game:checked ~ .game__info--about-game { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--info-container-color); + z-index: 11; + top: 0; +} + +.game__info--about-game p, +.game__info--rules p { + max-width: 50ch; + margin-top: 1rem; +} + +.menu-label-close { + border: solid white 2px; + width: 30px; + height: 30px; + display: none; +} + +#game-rules:checked ~ #game-rules-close, +#about-game:checked ~ #about-game-close { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + width: 10vw; + bottom: 5vh; + left: 45vw; + z-index: 12; + color: var(--paragraph-color); +} + +.game__info--rules p:last-child { + font-style: italic; + font-size: 1rem; + width: 46ch; +} + +.ball-one { + animation-delay: 8s; +} + +.ball-two { + animation-delay: 8.5s; +} + +.ball-three { + animation-delay: 9s; +} + +.ball-four { + animation-delay: 9.5s; +} + +.ball-five { + animation-delay: 10s; +} + +.ball-six { + animation-delay: 10.5s; +} + +.ball-seven { + animation-delay: 11s; +} + +.ball-eight { + animation-delay: 11.5s; +} + +.ball-nine { + animation-delay: 12s; +} + +.ball-ten { + animation-delay: 12.5s; +} + +.ball-eleven { + animation-delay: 13s; +} + +.stage__two--body { + background: var(--stage-two-body-linear-gradient) fixed; +} + +.game__info--game-over-stage-two { + height: 100vh; + width: 100vw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + bottom: 0vh; + animation: game-over-animation 0.6s cubic-bezier(0.23, 1, 0.32, 1) 23s both; + top: 200vh; + margin-top: 500px; +} + +.ball-one.stage-two { + animation-delay: 8s; +} + +.ball-two.stage-two { + animation-delay: 8.5s; +} + +.ball-three.stage-two { + animation-delay: 9s; +} + +.ball-four.stage-two { + animation-delay: 9.5s; +} + +.ball-five.stage-two { + animation-delay: 10s; +} + +.ball-six.stage-two { + animation-delay: 10.5s; +} + +.ball-seven.stage-two { + animation-delay: 11s; +} + +.ball-eight.stage-two { + animation-delay: 11.5s; +} + +.ball-nine.stage-two { + animation-delay: 12s; +} + +.ball-ten.stage-two { + animation-delay: 12.5s; +} + +.ball-eleven.stage-two { + animation-delay: 13s; +} + +input.stage-two { + animation: fall-side-to-side 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +.stage__three--body { + background: var(--stage-three-body-linear-gradient) fixed; + top: 0; +} + +.game__info--game-over-stage-three { + height: 100vh; + width: 100vw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + bottom: 0vh; + animation: game-over-animation 0.6s cubic-bezier(0.23, 1, 0.32, 1) 23s both; + top: 200vh; + margin-top: 500px; +} + +.ball-container .ball-one.stage-three { + animation-delay: 8s; +} +.ball-container .ball-two.stage-three { + animation-delay: 8.5s; +} +.ball-container .ball-three.stage-three { + animation-delay: 9s; +} +.ball-container .ball-four.stage-three { + animation-delay: 9.5s; +} +.ball-container .ball-five.stage-three { + animation-delay: 10s; +} +.ball-container .ball-six.stage-three { + animation-delay: 10.5s; +} +.ball-container .ball-seven.stage-three { + animation-delay: 11s; +} +.ball-container .ball-eight.stage-three { + animation-delay: 11.5s; +} +.ball-container .ball-nine.stage-three { + animation-delay: 12s; +} +.ball-container .ball-ten.stage-three { + animation-delay: 12.5s; +} +.ball-container .ball-eleven.stage-three { + animation-delay: 13s; +} + +input.stage-three:nth-child(odd) { + animation: fall-side-to-side 5s reverse; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +input.stage-three:nth-child(even) { + animation: fall-side-to-side 5s linear; + animation-delay: 7s; + animation-iteration-count: infinite; +} + +.stage__four--body { + background: var(--stage-four-body-linear-gradient) fixed; +} + +.game__info--game-over-stage-four { + height: 100vh; + width: 100vw; + background-color: var(--info-container-color); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + bottom: 0vh; + animation: game-over-animation 0.6s cubic-bezier(0.23, 1, 0.32, 1) 27s both; + top: 200vh; + margin-top: 500px; +} + +input.stage-four:nth-child(odd) { + animation-name: fall-odd; + animation-duration: 5s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-iteration-count: infinite; +} + +input.stage-four:nth-child(even) { + animation-name: fall-even; + animation-duration: 5s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-direction: reverse; + animation-iteration-count: infinite; +} + +.ball-one.stage-four { + animation-delay: 8s; +} + +.ball-two.stage-four { + animation-delay: 8.5s; +} + +.ball-three.stage-four { + animation-delay: 9s; +} + +.ball-four.stage-four { + animation-delay: 9.5s; +} + +.ball-five.stage-four { + animation-delay: 10s; +} + +.ball-six.stage-four { + animation-delay: 10.5s; +} + +.ball-seven.stage-four { + animation-delay: 11s; +} + +.ball-eight.stage-four { + animation-delay: 11.5s; +} + +.ball-nine.stage-four { + animation-delay: 12s; +} + +.ball-ten.stage-four { + animation-delay: 12.5s; +} + +.ball-eleven.stage-four { + animation-delay: 13s; +} + +@keyframes info-box { + 0% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(5000px); + } +} +@keyframes fall { + 0% { + transform: translateY(0px); + } + 100% { + transform: translateY(1000px); + } +} +@keyframes game-over-animation { + 0% { + transform: translateY(-1000px) scaleY(2.5) scaleX(0.2); + transform-origin: 50% 0%; + filter: blur(40px); + opacity: 0; + top: 200dvh; + margin-top: 500px; + } + 100% { + transform: translateY(0) scaleY(1) scaleX(1); + transform-origin: 50% 50%; + filter: blur(0); + opacity: 1; + top: 0dvh; + margin-top: 0px; + } +} +@keyframes fall-side-to-side { + 0% { + transform: translateY(0px) translateX(0px); + } + 25% { + transform: translateY(250px) translateX(-50px); + } + 50% { + transform: translateY(500px) translateX(30px); + } + 75% { + transform: translateY(750px) translateX(-170px); + } + 100% { + transform: translateY(1000px) translateX(0px); + } +} +@keyframes fall-odd { + 0% { + transform: translateY(0px) translateX(0px); + } + 25% { + transform: translateY(250px) translateX(150px); + } + 50% { + transform: translateY(450px) translateX(-100px); + } + 75% { + transform: translateY(400px) translateX(200px); + } + 100% { + transform: translateY(1000px) translateX(150px); + } +} +@keyframes fall-even { + 0% { + transform: translateY(0px) translateX(-50px); + } + 25% { + transform: translateY(300px) translateX(100px); + } + 50% { + transform: translateY(550px) translateX(200px); + } + 75% { + transform: translateY(450px) translateX(-200px); + } + 100% { + transform: translateY(1000px) translateX(-10px); + } +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map new file mode 100644 index 0000000..7b99590 --- /dev/null +++ b/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_colors.scss","index.css","_styles.scss","_mixins.scss","_stage-one.scss","_stage-two.scss","_stage-three.scss","_stage-four.scss","_key-frames.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..baa21d4 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,8 @@ +@import "colors"; +@import "mixins"; +@import "styles"; +@import "stage-one"; +@import "stage-two"; +@import "stage-three"; +@import "stage-four"; +@import "key-frames";