AdvancedCSS2023 · github-classroom · Apr 10, 2023 · Apr 10, 2023 · Apr 10, 2023 · Apr 11, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git 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
diff --git a/index.html b/index.html
@@ -0,0 +1,74 @@
+<!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>CSS - Game | Stage One</title>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+
+  <body class="stage__one--body">
+    <div class="ball-container">
+      <input type="checkbox" class="ball-five stage-one" />
+      <input type="checkbox" class="ball-one stage-one" />
+      <input type="checkbox" class="ball-seven stage-one" />
+      <input type="checkbox" class="ball-three stage-one" />
+      <input type="checkbox" class="ball-eight stage-one" />
+      <input type="checkbox" class="ball-eleven stage-one" />
+      <input type="checkbox" class="ball-two stage-one" />
+      <input type="checkbox" class="ball-six stage-one" />
+      <input type="checkbox" class="ball-nine stage-one" />
+      <input type="checkbox" class="ball-ten stage-one" />
+      <input type="checkbox" class="ball-four stage-one" />
+      <div class="game__info--win-screen">
+        <h2>YOU WON</h2>
+        <p>...nice</p>
+        <div class="game__info--next-stage">
+          <a href="./stage-two.html">STAGE TWO!</a>
+        </div>
+      </div>
+    </div>
+    <input type="checkbox" id="start-game" />
+    <input type="checkbox" id="game-rules" />
+    <input type="checkbox" id="about-game" />
+    <label for="start-game" id="start-game-button" class="menu-label"
+      >Start Game</label
+    >
+    <label for="game-rules" id="game-rules-button" class="menu-label"
+      >How to play</label
+    >
+    <label for="about-game" id="about-game-button" class="menu-label"
+      >About the game</label
+    >
+    <label for="game-rules" id="game-rules-close" class="menu-label-close"
+      >Close</label
+    >
+    <label for="about-game" id="about-game-close" class="menu-label-close"
+      >Close</label
+    >
+    <div class="game__info game__info--container">
+      <h1>POP ALL THE BALL'S BEFORE THE TIME RUNS OUT</h1>
+      <h2>YOU HAVE 20 SECONDS!</h2>
+    </div>
+    <div class="game__info--game-over">
+      <h2>GAME OVER, YOU FAILED</h2>
+      <p>Press F5 to try again</p>
+    </div>
+    <div class="game__info--start-game"></div>
+    <div class="game__info--rules">
+      <h2>How to play</h2>
+      <p>Click on each of the moving balls before the time runs out.</p>
+      <p>Good Luck!</p>
+      <p>PS, press F11(fullscreen) for the best gaming experience. A mouse is also recommended ;-)</p>
+    </div>
+    <div class="game__info--about-game">
+      <h2>About this game</h2>
+      <p>
+        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.
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/stage-four.html b/stage-four.html
@@ -0,0 +1,44 @@
+<!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>CSS - Game | stage Four</title>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+
+  <body class="stage__four--body">
+    <div class="ball-container">
+      <input type="checkbox" class="ball-seven stage-four" />
+      <input type="checkbox" class="ball-three stage-four" />
+      <input type="checkbox" class="ball-nine stage-four" />
+      <input type="checkbox" class="ball-eleven stage-four" />
+      <input type="checkbox" class="ball-six stage-four" />
+      <input type="checkbox" class="ball-ten stage-four" />
+      <input type="checkbox" class="ball-five stage-four" />
+      <input type="checkbox" class="ball-one stage-four" />
+      <input type="checkbox" class="ball-eight stage-four" />
+      <input type="checkbox" class="ball-two stage-four" />
+      <input type="checkbox" class="ball-four stage-four" />
+      <div class="game__info--win-screen">
+        <h2>YOU WON!</h2>
+        <img
+          src="./images/clapping-shia.gif"
+          alt="image of Shia Laboeuf clapping"
+        />
+        <div class="game__info--next-stage">
+          <a href="./index.html">PLAY AGAIN!</a>
+        </div>
+      </div>
+    </div>
+    <div class="game__info--container-stage-two-four">
+      <h1>STAGE FOUR | FINAL STAGE</h1>
+      <h2>YOU HAVE 22 SECONDS!</h2>
+    </div>
+    <div class="game__info--game-over-stage-four">
+      <h2>GAME OVER, YOU FAILED</h2>
+      <p>Press F5 to try again</p>
+    </div>
+  </body>
+</html>
diff --git a/stage-three.html b/stage-three.html
@@ -0,0 +1,41 @@
+<!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>CSS - Game | stage Three</title>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+
+  <body class="stage__three--body">
+    <div class="ball-container">
+      <input type="checkbox" class="ball-three stage-three" />
+      <input type="checkbox" class="ball-eleven stage-three" />
+      <input type="checkbox" class="ball-six stage-three" />
+      <input type="checkbox" class="ball-two stage-three" />
+      <input type="checkbox" class="ball-ten stage-three" />
+      <input type="checkbox" class="ball-seven stage-three" />
+      <input type="checkbox" class="ball-five stage-three" />
+      <input type="checkbox" class="ball-one stage-three" />
+      <input type="checkbox" class="ball-eight stage-three" />
+      <input type="checkbox" class="ball-nine stage-three" />
+      <input type="checkbox" class="ball-four stage-three" />
+      <div class="game__info--win-screen">
+        <h2>YOU WON</h2>
+        <p>...nice</p>
+        <div class="game__info--next-stage">
+          <a href="./stage-four.html">STAGE FOUR!</a>
+        </div>
+      </div>
+    </div>
+    <div class="game__info--container-stage-two-four">
+      <h1>STAGE THREE</h1>
+      <h2>YOU HAVE 18 SECONDS!</h2>
+    </div>
+    <div class="game__info--game-over-stage-three">
+      <h2>GAME OVER, YOU FAILED</h2>
+      <p>Press F5 to try again</p>
+    </div>
+  </body>
+</html>
diff --git a/stage-two.html b/stage-two.html
@@ -0,0 +1,41 @@
+<!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>CSS - Game | stage Two</title>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+
+  <body class="stage__two--body">
+    <div class="ball-container">
+      <input type="checkbox" class="ball-three stage-two" />
+      <input type="checkbox" class="ball-eleven stage-two" />
+      <input type="checkbox" class="ball-four stage-two" />
+      <input type="checkbox" class="ball-two stage-two" />
+      <input type="checkbox" class="ball-six stage-two" />
+      <input type="checkbox" class="ball-eight stage-two" />
+      <input type="checkbox" class="ball-ten stage-two" />
+      <input type="checkbox" class="ball-seven stage-two" />
+      <input type="checkbox" class="ball-one stage-two" />
+      <input type="checkbox" class="ball-five stage-two" />
+      <input type="checkbox" class="ball-nine stage-two" />
+      <div class="game__info--win-screen">
+        <h2>YOU WON</h2>
+        <p>...nice</p>
+        <div class="game__info--next-stage">
+          <a href="./stage-three.html">STAGE THREE!</a>
+        </div>
+      </div>
+    </div>
+    <div class="game__info--container-stage-two-four">
+      <h1>STAGE TWO</h1>
+      <h2>YOU HAVE 18 SECONDS!</h2>
+    </div>
+    <div class="game__info--game-over-stage-two">
+      <h2>GAME OVER, YOU FAILED</h2>
+      <p>Press F5 to try again</p>
+    </div>
+  </body>
+</html>
diff --git a/styles/_colors.scss 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
@@ -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
@@ -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;
+}