Merge pull request #2449 from Maana-Ajmera/game/aero-acrobat-extension

Added aero acrobat game extension
Sulagna-Dutta-Roy · Jul 18, 2024 · 4b2ea0b · 4b2ea0b
2 parents 4ee4367 + fd0ad64
commit 4b2ea0b
Show file tree

Hide file tree

Showing 27 changed files with 1,407 additions and 0 deletions.
diff --git a/Aero Acrobat Game Extension/README.md b/Aero Acrobat Game Extension/README.md
@@ -0,0 +1,55 @@
+# **Game_Name** 
+Aero_Acrobat
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+"Aero Acrobat" is an exhilarating arcade-style game that challenges players to navigate a courageous boy through a breathtaking ascent into the sky. With the help of the spacebar and four arrow keys, players must guide the boy upwards, maneuvering through a maze of obstacles and platforms.
+- 
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+* Aero Acrobat uses the requestAnimationFrame function built into
+modern browsers in order to maintain a consistent refresh rate that makes
+for a more enjoyable experience.  The game is also updated with specific
+tick intervals to maintain more consistent position updating of the avatar.
+
+* The game is rendered using HTML Canvas.  The entire background image
+is rendered with platforms drawn onto it with styling set to overflow: hidden
+which only shows the 600x700 pixels that the game should.  In order to move
+the background, the built in scrollTop feature was used to center the
+canvas to the avatar's position.
+
+* As the game updated roughly 60 times per second, tick rates were used
+to determine the rate at which platforms were removed.  tickCount was incremented
+with each call of tick by GameView and platforms were removed when it
+reached a certain threshold.  This simplified the removal of platforms at
+regular intervals without having to deal with the millisecond count and
+finding appropriate values of x for which (time % x) evaluated to every ~1-3 seconds.
+
+
+# TECHNOLOGIES
+* JavaScript
+* HTML and CSS
+* HTML Canvas
+
+
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+* Use L/R arrow keys to move character
+* Use Space to Jump
+* Press Enter at any time to reset game
+* Platforms disappear one at a time as time goes on.  Don't fall to your death.
+<br>
+
+## **Screenshots 📸**
+<br>
+<!-- add your screenshots like this -->
+
+![image](../../assets/images/Aero_acrobat.png)
+
+<br>
diff --git a/Aero Acrobat Game Extension/_config.yml b/Aero Acrobat Game Extension/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-minimal
diff --git a/Aero Acrobat Game Extension/about.html b/Aero Acrobat Game Extension/about.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>About Us - Aero Acrobat</title>
+    <link rel="stylesheet" href="./assets/stylesheets/main.css">
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <style>
+    #about-page {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
+
+#about {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 20px;
+    background-color: #333;
+    margin: auto;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 10px;
+}
+
+#about-heading {
+    font-size: 2em;
+    margin-bottom: 20px;
+    font-family: 'Press Start 2P', cursive;
+}
+
+#about-text {
+    font-size: 1.2em;
+    font-family: 'Press Start 2P', cursive;
+}
+
+#back {
+    margin-top: 20px;
+}
+
+#back a {
+    color: #00f;
+    text-decoration: none;
+    font-size: 1.2em;
+}
+
+  </style>
+</head>
+  <body background="./assets/images/body-bg.jpg">
+    <h1>About Us</h1>
+
+    <div id="about-page">
+      <div id="about">
+        <div id="about-heading">ABOUT US</div>
+        <div id="about-text">
+          Welcome to Aero Acrobat! Our game development team is dedicated to creating thrilling and entertaining experiences for players of all ages. Aero Acrobat is a fun and challenging game that combines skill and precision to test your acrobatic abilities in the sky. Our goal is to deliver high-quality gaming experiences that keep you engaged and coming back for more. Thank you for playing Aero Acrobat. If you have any questions or feedback, please reach out to us at support@aeroacrobat.com.
+        </div>
+        <div id="back">
+          <a href="index.html">BACK TO MAIN PAGE</a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Aero Acrobat Game Extension/assets/images/background.png b/Aero Acrobat Game Extension/assets/images/background.png
diff --git a/Aero Acrobat Game Extension/assets/images/body-bg.jpg b/Aero Acrobat Game Extension/assets/images/body-bg.jpg
diff --git a/Aero Acrobat Game Extension/assets/images/game-over.jpg b/Aero Acrobat Game Extension/assets/images/game-over.jpg
diff --git a/Aero Acrobat Game Extension/assets/images/github-logo.png b/Aero Acrobat Game Extension/assets/images/github-logo.png
diff --git a/Aero Acrobat Game Extension/assets/images/instructions.png b/Aero Acrobat Game Extension/assets/images/instructions.png
diff --git a/Aero Acrobat Game Extension/assets/images/linked-in-logo.png b/Aero Acrobat Game Extension/assets/images/linked-in-logo.png
diff --git a/Aero Acrobat Game Extension/assets/images/rtts_sprites.png b/Aero Acrobat Game Extension/assets/images/rtts_sprites.png
diff --git a/Aero Acrobat Game Extension/assets/sounds/background.mp3 b/Aero Acrobat Game Extension/assets/sounds/background.mp3
diff --git a/Aero Acrobat Game Extension/assets/sounds/background2.mp3 b/Aero Acrobat Game Extension/assets/sounds/background2.mp3
diff --git a/Aero Acrobat Game Extension/assets/sounds/jump.wav b/Aero Acrobat Game Extension/assets/sounds/jump.wav
diff --git a/Aero Acrobat Game Extension/assets/stylesheets/main.css b/Aero Acrobat Game Extension/assets/stylesheets/main.css
@@ -0,0 +1,106 @@
+body {
+  font-family: 'Press Start 2P', cursive;
+  position: relative;
+  height: 800px;
+  width: 1000px;
+  background-size: cover;
+}
+
+h1 {
+  text-align: center;
+  color: white;
+  margin-left: 320px;
+}
+
+p {
+  color: white;
+  font-size: 18px;
+  text-align: center;
+}
+
+a {
+  display: block;
+}
+
+.author-links {
+  position: absolute;
+  width: 300px;
+  top: 300px;
+  left: 25px;
+}
+
+.author-links a {
+  display: flex;
+  align-items: center;
+  margin: 20px 0px;
+}
+
+.author-links img {
+  height: 50px;
+  width: 50px;
+  margin: 0 auto;
+}
+
+.lose-img {
+  position: absolute;
+  width: 450px;
+  height: auto;
+}
+
+#lose-modal {
+  position: fixed;
+  z-index: 1;
+  top: 237px;
+  left: 435px;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.lost {
+  filter: brightness(.3);
+}
+
+#canvas-wrapper {
+  position: absolute;
+  left: 350px;
+}
+
+#instructions {
+  position: absolute;
+  left: 350px;
+  z-index: 2;
+  border: 1px solid black;
+}
+
+#score {
+  position: absolute;
+  right: 80px;
+  top: 70px;
+  z-index: 1;
+  color: white;
+  font-size: 14px;
+}
+
+#sound-button {
+  color: white;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 310px;
+  top: 69px;
+}
+
+#info-button {
+  color: white;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  left: 310px;
+  top: 105px;
+}
+
+#sound-button:hover, #info-button:hover {
+  cursor: pointer;
+}
diff --git a/Aero Acrobat Game Extension/body-bg.jpg b/Aero Acrobat Game Extension/body-bg.jpg
diff --git a/Aero Acrobat Game Extension/index.html b/Aero Acrobat Game Extension/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Aero Acrobat</title>
+    <link rel="stylesheet" href="./assets/stylesheets/main.css">
+    <script type="application/javascript" src="lib/bundle.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body background="./assets/images/body-bg.jpg">
+    <h1>Aero Acrobat</h1>
+
+    <div id='score'></div>
+    <div class='shown' id='instructions'><img class='instructions' src="./assets/images/instructions.png"></div>
+    <div class='modal is-hidden' id='lose-modal'><img class="lose-img" src="./assets/images/game-over.jpg" alt=""></div>
+    <div class='' id='canvas-wrapper' style='height: 700px; width: 600px; overflow: hidden; border: 1px solid black;'>
+      <canvas id="game-canvas"  style=""></canvas>
+    </div>
+    <div id='sound-button'><i class="material-icons">volume_up</i></div>
+    <div id='info-button'><a href="about.html"><i class="material-icons">info_outline</i></a></div> <!-- Updated About Us button -->
+  </body>
+</html>