Dropkick Odyssey game added

Games/Dropkick_Odyssey/README.md

@@ -0,0 +1,49 @@
+# *Dropkick Odyssey*
+
+
+## **Description**
+Dropkick Odyssey draws inspiration from classic platformers like Mario, offering a captivating gameplay experience. Your mission is to navigate through a world filled with challenges and enemies, utilizing precise dropkick moves to emerge victorious. It's an exciting platform game developed using HTML5, CSS, and JavaScript.
+
+
+<br>
+
+## **Functionalities**
+
+- Player Movement: Allow the player character to move left and right using the arrow keys. Implement smooth and responsive movement mechanics to navigate the game world.
+
+- Jump Mechanic: Create a jumping mechanism that enables the player to jump over gaps, obstacles, and enemies using the up arrow key. Incorporate variable jump height based on how long the jump key is held.
+
+- Dropkick Action: Implement a dropkick move triggered by pressing the left Ctrl key. Define the dropkick behavior, including its animation, damage to enemies, and interaction with obstacles.
+
+- Obstacle Interaction: Design interactions between the player and various obstacles, such as the yellow boxes. Ensure that collision detection is accurate, causing the player to lose a life upon contact.
+
+- Enemy Behavior: Develop enemy AI patterns that dictate their movement and attacks. Enemies should respond to the player's actions, such as pursuing the player or attacking when in range.
+
+<br>
+
+## **How to play?**
+
+- Your primary goal is to employ well-timed dropkicks to clear obstacles and neutralize adversaries. 
+- Movement: Utilize the Left Arrow Key to move left and the Right Arrow Key to move right.
+- Jump: Propel your character over obstacles and gaps by pressing the Up Arrow Key.
+- Dropkick Maneuver: Initiate a dropkick by pressing the Left Ctrl key. Strategically execute this move to vanquish enemies and surmount challenges.
+- Yellow Box Caution: Exercise caution and skill to avoid making contact with the perilous yellow box obstacles. Colliding with these obstacles will result in your character losing a life.
+
+<br>
+
+## **Installation**
+1. Clone or download the repository.
+2. Open the index.html file in a web browser.
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<img src="Screenshots/Dropkick_Odyssey.png" alt="Game Screenshot">
+
+
+
+<br>
+

Games/Dropkick_Odyssey/assets/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

Games/Dropkick_Odyssey/assets/css/style.css

@@ -0,0 +1,81 @@
+.canvas-container {
+  text-align: center;
+  background-color: tomato;
+}
+
+#canvas {
+  background-color: rgb(30, 30, 30);
+  /* background-color: white; */
+  border: 2px solid white;
+}
+
+body {
+  position: relative;
+   font-family: 'Roboto Mono', sans-serif;
+   font-size: 20px;
+}
+
+h1 {
+  font-size: 1.5em;
+  margin-bottom: 1em;
+}
+
+img {
+  max-width: 50px;
+  height: auto;
+  margin-right: 15px;
+}
+
+li {
+  margin: .5em;
+  /* margin-top: 1em; */
+}
+#overlay {
+  display: flex;
+  justify-content: space-between;
+  color: white;
+  padding: 2%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 96%;
+  height: 94.2%;
+  z-index: 10;
+  background-color: rgba(0,0,0,0.9);
+}
+
+.ctrl {
+  display: inline-block;
+  padding: 6px 1px;
+  background-color: red;
+  border-radius: 5px;
+  color: black;
+  margin-right: .7em;
+}
+strong {
+  display: inline-block;
+}
+
+li {
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+}
+
+.space {
+  color: black;
+  background-color: lightgray;
+  margin-right: .5em;
+  display: inline-block;
+  padding: 4px 1px;
+  border-radius: 5px;
+}
+
+.logger {
+  /* font-size: 1em; */
+  padding: 1.5em 0 1.5em 0;
+  margin: 0 2em;
+  display: block;
+  margin-top: 70%;
+  text-align: center;
+}

Games/Dropkick_Odyssey/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Game | DKM</title>
+  <link rel="stylesheet" href="./assets/css/reset.css">
+  <link rel="stylesheet" href="./assets/css/style.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="overlay">
+      <section>
+        <h1>how to play</h1>
+        <ul>
+          <li>
+            <img src="./assets/images/left-arrow-variant-key-on-keyboard.svg" alt="keyboard left arrow">
+            <span>move left</span>
+          </li>
+          <li>
+            <img src="./assets/images/keyboard-key-pointing-to-right.svg" alt="keyboard right arrow">
+            <span>move right</span>
+          </li>
+          <li>
+            <img src="./assets/images/keyboard-key-arrow-up.svg" alt="keyboard right arrow">
+            <span>Jump!</span>
+          </li>
+          <li>
+            <span class="ctrl"><strong>ctrl</strong>
+          </span>
+            <span>Attack with a <br> <strong>
+              Dropkick!
+            </strong>
+          </span>
+          </li>
+        </ul>
+      </section>
+      <section>
+        press <span class="space">space key</span>to continue
+        <div id="logger"></div>
+      </section>
+      <section class="instructions">
+        <h1>Instructions:</h1>
+        <ul>
+          <li>1) avoid contact</li>
+          <li><br></li>
+          <li>2) DROPKICK everything <br> in your way</li>
+          <li><br></li>
+          <li>3) DROPKICK the boss <br>to win</li>
+        </ul>
+      </section>
+      </div>
+      <div class="canvas-container">
+    <canvas id="canvas"></canvas>
+  </div>
+  <script src="./javascript/Component.js"></script>
+  <script src="./javascript/Player.js"></script>
+  <script src="./javascript/Enemy.js"></script>
+  <script src="./javascript/helperObj.js"></script>
+  <script src="./javascript/main.js"></script>
+</body>
+</html>

Games/Dropkick_Odyssey/javascript/Component.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-underscore-dangle */
+class Component {
+  constructor(context, posX, posY, width, height, color) {
+    this.c = context;
+    this.width = width;
+    this.height = height;
+    this.posX = posX;
+    this.posY = posY;
+    this.color = color;
+  }
+
+  draw() {
+    this.c.fillStyle = this.color;
+    this.c.fillRect(this.posX, this.posY, this.width, this.height);
+  }
+
+  _leftCompHb() {
+    return this.posX;
+  }
+
+  _rightCompHb() {
+    return this.posX + this.width;
+  }
+
+  // talvez nao precise e eu nao tenho certeza se esta certo
+  _topCompHb() {
+    return this.posY;
+  }
+
+  // talvez nao precise e eu nao tenho certeza se esta certo
+  _botCompHb() {
+    return this.posY + this.height;
+  }
+}

Games/Dropkick_Odyssey/javascript/Enemy.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-underscore-dangle */
+class Enemy extends Component {
+  constructor(
+    context,
+    posX,
+    posY,
+    width,
+    height,
+    color,
+    isFinalBoss = false,
+    ) {
+    super();
+    this.c = context;
+    this.width = width;
+    this.height = height;
+    this.posX = posX;
+    this.posY = posY;
+    this.color = color;
+    this.isFinalBoss = isFinalBoss;
+
+    this.velocityX = 0.08; // tweak it.
+    this.velocityY = 0.4;
+  }
+
+  move(delta) {
+      this.posX -= this.velocityX * delta;
+    if (this.posX >= element.width - this.width || this.posX <= 0) {
+      this.velocityX = -this.velocityX
+    }
+  }
+
+  bigbossMove() {
+    const generateRandomNumberInArr = (min, max) => {return Math.random() * (max - min) + min}
+    const randomNumber = generateRandomNumberInArr(1, 100);
+    if (randomNumber >= 80) {
+      this.posX -= this.velocityX * delta;
+      if (this.posX >= element.width - this.width || this.posX <= 0) {
+        this.velocityX = -this.velocityX
+      }
+    }
+  }
+
+  fall(deltaValue) {
+    this.velocityY = 0.3;
+    this.posY += this.velocityY * deltaValue;
+  }
+
+  // *** PLAYER HITBOX ***
+  _isRightCompBorderCollided(enemy) {
+    return this._rightCompHb() >= enemy._leftCompHb();
+  }
+
+  _isLeftCompBorderCollided(enemy) {
+    return this._leftCompHb() <= enemy._rightCompHb();
+  }
+
+  _isTopCompBorderCollided(enemy) {
+    return this._topCompHb() <= enemy._botCompHb();
+  }
+
+  _isBottomCompBorderCollided(enemy) {
+    return this._botCompHb() >= enemy._topCompHb();
+  }
+
+  isHitTaken(enemy) {
+    return (
+      this._isRightCompBorderCollided(enemy) &&
+      this._isLeftCompBorderCollided(enemy) &&
+      this._isTopCompBorderCollided(enemy) &&
+      this._isBottomCompBorderCollided(enemy)
+    );
+  }
+}