fight game added

Js-Games/Fight Game/README.md

@@ -0,0 +1,4 @@
+# Fight-game
+
+#### Player 1 Controls:W A D Space F
+#### Player 2 Controls:ArrowUp ArrowLeft ArrowRight ArrowDown Control

Js-Games/Fight Game/classes.js

@@ -0,0 +1,239 @@
+class Sprite {
+  constructor({
+    position,
+    imageSrc,
+    scale = 1,
+    framesMax = 1,
+    offset = { x: 0, y: 0 },
+  }) {
+    this.position = position;
+    this.width = 50;
+    this.height = 150;
+    this.image = new Image();
+    this.image.src = imageSrc;
+    this.scale = scale;
+    this.framesMax = framesMax;
+    this.framesCurrent = 0;
+    this.framesElapsed = 0;
+    this.framesHold = 5;
+    this.offset = offset;
+  }
+
+  draw() {
+    c.drawImage(
+      this.image,
+      this.framesCurrent * (this.image.width / this.framesMax),
+      0,
+      this.image.width / this.framesMax,
+      this.image.height,
+      this.position.x - this.offset.x,
+      this.position.y - this.offset.y,
+      (this.image.width / this.framesMax) * this.scale,
+      this.image.height * this.scale
+    );
+  }
+
+  animateFrames() {
+    this.framesElapsed++;
+
+    if (this.framesElapsed % this.framesHold === 0) {
+      if (this.framesCurrent < this.framesMax - 1) {
+        this.framesCurrent++;
+      } else {
+        this.framesCurrent = 0;
+      }
+    }
+  }
+
+  update() {
+    this.draw();
+    this.animateFrames();
+  }
+}
+
+class Fighter extends Sprite {
+  constructor({
+    position,
+    velocity,
+    color = "red",
+    imageSrc,
+    scale = 1,
+    framesMax = 1,
+    offset = { x: 0, y: 0 },
+    sprites,
+    attackBox = { offset: {}, width: undefined, height: undefined },
+  }) {
+    super({
+      position,
+      imageSrc,
+      scale,
+      framesMax,
+      offset,
+    });
+
+    this.velocity = velocity;
+    this.width = 50;
+    this.height = 150;
+    this.lastKey;
+    this.attackBox = {
+      position: {
+        x: this.position.x,
+        y: this.position.y,
+      },
+      offset: attackBox.offset,
+      width: attackBox.width,
+      height: attackBox.height,
+    };
+    this.color = color;
+    this.isAttacking;
+    this.health = 100;
+    this.framesCurrent = 0;
+    this.framesElapsed = 0;
+    this.framesHold = 5;
+    this.sprites = sprites;
+    this.dead = false;
+
+    for (const sprite in this.sprites) {
+      sprites[sprite].image = new Image();
+      sprites[sprite].image.src = sprites[sprite].imageSrc;
+    }
+  }
+
+  update() {
+    this.draw();
+    if (!this.dead) this.animateFrames();
+
+    // attack boxes
+    this.attackBox.position.x = this.position.x + this.attackBox.offset.x;
+    this.attackBox.position.y = this.position.y + this.attackBox.offset.y;
+
+    // draw the attack box
+    // c.fillRect(
+    //   this.attackBox.position.x,
+    //   this.attackBox.position.y,
+    //   this.attackBox.width,
+    //   this.attackBox.height
+    // )
+
+    this.position.x += this.velocity.x;
+    this.position.y += this.velocity.y;
+
+    // gravity function
+    if (
+      this.position.y + this.height + this.velocity.y >=
+      canvas.height - 170
+    ) {
+      this.velocity.y = 0;
+      this.position.y = 570;
+    } else this.velocity.y += gravity;
+  }
+
+  attack1() {
+    this.switchSprite("attack1");
+    this.isAttacking = true;
+  }
+  attack2() {
+    this.switchSprite("attack2");
+    this.isAttacking = true;
+  }
+
+  takeHit() {
+    this.health -= 10;
+
+    if (this.health <= 0) {
+      this.switchSprite("death");
+    } else this.switchSprite("takeHit");
+  }
+
+  switchSprite(sprite) {
+    if (this.image === this.sprites.death.image) {
+      if (this.framesCurrent === this.sprites.death.framesMax - 1)
+        this.dead = true;
+      return;
+    }
+    // overriding all other animations with the attack2 animation
+    if (
+      this.image === this.sprites.attack2.image &&
+      this.framesCurrent < this.sprites.attack2.framesMax - 1
+    )
+      return;
+
+    // overriding all other animations with the attack1 animation
+    if (
+      this.image === this.sprites.attack1.image &&
+      this.framesCurrent < this.sprites.attack1.framesMax - 1
+    )
+      return;
+
+    // override when fighter gets hit
+    if (
+      this.image === this.sprites.takeHit.image &&
+      this.framesCurrent < this.sprites.takeHit.framesMax - 1
+    )
+      return;
+
+    switch (sprite) {
+      case "idle":
+        if (this.image !== this.sprites.idle.image) {
+          this.image = this.sprites.idle.image;
+          this.framesMax = this.sprites.idle.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+      case "run":
+        if (this.image !== this.sprites.run.image) {
+          this.image = this.sprites.run.image;
+          this.framesMax = this.sprites.run.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+      case "jump":
+        if (this.image !== this.sprites.jump.image) {
+          this.image = this.sprites.jump.image;
+          this.framesMax = this.sprites.jump.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+
+      case "fall":
+        if (this.image !== this.sprites.fall.image) {
+          this.image = this.sprites.fall.image;
+          this.framesMax = this.sprites.fall.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+
+      case "attack1":
+        if (this.image !== this.sprites.attack1.image) {
+          this.image = this.sprites.attack1.image;
+          this.framesMax = this.sprites.attack1.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+
+      case "attack2":
+        if (this.image !== this.sprites.attack2.image) {
+          this.image = this.sprites.attack2.image;
+          this.framesMax = this.sprites.attack2.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+
+      case "takeHit":
+        if (this.image !== this.sprites.takeHit.image) {
+          this.image = this.sprites.takeHit.image;
+          this.framesMax = this.sprites.takeHit.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+
+      case "death":
+        if (this.image !== this.sprites.death.image) {
+          this.image = this.sprites.death.image;
+          this.framesMax = this.sprites.death.framesMax;
+          this.framesCurrent = 0;
+        }
+        break;
+    }
+  }
+}

Js-Games/Fight Game/index.html

@@ -0,0 +1,111 @@
+<!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>Samurai Mack</title>
+    <style>
+      * {
+        background-color: black;
+        box-sizing: border-box;
+        font-family: 'Press Start 2P', cursive;
+      }
+    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+<link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
+  </head>
+  <body>
+    <div style="position: relative; display: inline-block;">
+      <div
+        style="
+          position: absolute;
+          display: flex;
+          width: 100%;
+          align-items: center;
+          padding: 20px;
+        "
+      >
+        <!-- player health -->
+        <div
+          style="
+            position: relative;
+            width: 100%;
+            display: flex;
+            border: 4px solid white;
+            border-right: 0px;
+            justify-content: flex-end;
+          "
+        >
+          <div style="background-color: red; height: 30px; width: 100%"></div>
+          <div
+            id="playerHealth"
+            style="
+              position: absolute;
+              background: #818cf8;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              width: 100%;
+            "
+          ></div>
+        </div>
+        <!-- timer -->
+        <div
+          id="timer"
+          style="
+            background-color: black;
+            width: 100px;
+            height: 50px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 4px solid white;
+            color: aliceblue;
+          "
+        >
+        </div>
+
+        <!-- enemy health -->
+        <div style="position: relative; width: 100%;border: 4px solid white;border-left: 0px;">
+          <div style="background-color: red; height: 30px"></div>
+          <div
+            id="enemyHealth"
+            style="
+              position: absolute;
+              background: #818cf8;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              left: 0;
+            "
+          ></div>
+        </div>
+      </div>
+      <div></div>
+      <div
+        id="displayText"
+        style="
+          position: absolute;
+          color: aliceblue;
+          align-items: center;
+          justify-content: center;
+          top: 0;
+          font-size: 2em;
+          right: 0;
+          left: 0;
+          display: none;
+          bottom: 0;
+        "
+      ></div>
+
+      <canvas ></canvas>
+    </div>
+    <script src="./utils.js"></script>
+    <script src="./classes.js"></script>
+    <script src="./index.js"></script>
+  </body>
+</html>