mustachio-game 1.0.0

package/src/classes/game-objects/point-objects/enemies/stache-shot.ts

@@ -0,0 +1,68 @@
+import { direction, type collision } from "../../../../shared/types";
+import type { GameContext } from "../../../../shared/game-context";
+import type { StacheCannon } from "../../set-pieces/obstacles/blocks/stache-cannon";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+import { Enemy } from "./enemy";
+import { outOfBounds } from "../../../../shared/app-code";
+import stacheShotLeft from "../../../../assets/stacheShotLeft.webp";
+import stacheShotRight from "../../../../assets/stacheShotRight.webp";
+import stacheShotUp from "../../../../assets/stacheShotUp.webp";
+import stacheShotDown from "../../../../assets/stacheShotDown.webp";
+
+export class StacheShot extends Enemy {
+  readonly pointValue: number = 250;
+  private readonly shotSpeed = 3;
+
+  constructor(gameContext: GameContext, parent: StacheCannon, dir: number) {
+    const width = BLOCK_SIZE * 0.75;
+    const height = BLOCK_SIZE * 0.75;
+    const x = parent.rect.x + parent.rect.width / 2 - width / 2;
+    const y = parent.rect.y + parent.rect.height / 2 - height / 2;
+    super(
+      gameContext,
+      {
+        x,
+        y,
+        width,
+        height,
+      },
+      false,
+    );
+
+    if (dir === direction.LEFT) {
+      this.image.src = stacheShotLeft;
+      this.speedX = -this.shotSpeed;
+    } else if (dir === direction.RIGHT) {
+      this.image.src = stacheShotRight;
+      this.speedX = this.shotSpeed;
+    } else if (dir === direction.UP) {
+      this.image.src = stacheShotUp;
+      this.speedY = -this.shotSpeed;
+    } else if (dir === direction.DOWN) {
+      this.image.src = stacheShotDown;
+      this.speedY = this.shotSpeed;
+    } else {
+      throw new Error("Invalid direction for StacheShot");
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_: collision[]) {
+    this.rect.x += this.speedX;
+    this.rect.y += this.speedY;
+
+    if (outOfBounds(this, this.gameContext)) {
+      this.gameContext.removeGameObject(this);
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.drawImage(
+      this.image,
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+}

package/src/classes/game-objects/point-objects/enemies/stache-slinger.ts

@@ -0,0 +1,63 @@
+import type { collision } from "../../../../shared/types";
+import { Enemy } from "./enemy";
+import type { GameContext } from "../../../../shared/game-context";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+import { FireBall } from "../../projectiles/enemy-projectiles/fire-ball";
+import stacheSlinger1 from "../../../../assets/stacheSlinger1.webp";
+import stacheSlinger2 from "../../../../assets/stacheSlinger2.webp";
+
+export class StacheSlinger extends Enemy {
+  readonly pointValue: number = 1250;
+  private readonly maxX: number;
+  private readonly minX: number;
+  private totalDistance: number = 0;
+
+  constructor(gameContext: GameContext, x: number, y: number) {
+    super(gameContext, {
+      x,
+      y,
+      width: BLOCK_SIZE * 1.5,
+      height: BLOCK_SIZE * 2,
+    });
+
+    this.maxX = x + BLOCK_SIZE * 4;
+    this.minX = x - BLOCK_SIZE * 4;
+
+    this.imageSources.push(stacheSlinger1, stacheSlinger2);
+
+    this.image.src = this.imageSources[0];
+    this.speedX = 1.5;
+    gameContext.addGameObject(new FireBall(this.gameContext, this));
+
+    this.shotTimer = setInterval(() => {
+      gameContext.addGameObject(new FireBall(this.gameContext, this));
+    }, 5000);
+  }
+
+  // This enemy doesn't collide with anything
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_: collision[]): void {
+    if (!this.isDead) {
+      this.rect.x += this.speedX;
+      this.totalDistance += this.speedX;
+
+      if (this.totalDistance >= this.maxX) {
+        this.speedX = -Math.abs(this.speedX);
+        this.image.src = this.imageSources[1];
+      } else if (this.totalDistance <= this.minX) {
+        this.speedX = Math.abs(this.speedX);
+        this.image.src = this.imageSources[0];
+      }
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    ctx.drawImage(
+      this.image,
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+}

package/src/classes/game-objects/point-objects/enemies/stache-stalker.ts

@@ -0,0 +1,41 @@
+import type { collision, rectangle } from "../../../../shared/types";
+import { Enemy } from "./enemy";
+import type { GameContext } from "../../../../shared/game-context";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+import stacheStalker from "../../../../assets/stacheStalker.webp";
+import stacheStalkerReversed from "../../../../assets/stacheStalkerReversed.webp";
+
+export class StacheStalker extends Enemy {
+  readonly pointValue: number = 100;
+
+  constructor(gameContext: GameContext, x: number, y: number) {
+    const rect: rectangle = {
+      x,
+      y,
+      width: BLOCK_SIZE * 0.75,
+      height: BLOCK_SIZE * 0.75,
+    };
+    super(gameContext, rect);
+
+    this.imageSources.push(stacheStalker, stacheStalkerReversed);
+
+    this.image.src = this.imageSources[0];
+    this.speedX = 1;
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.drawImage(
+      this.image,
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+
+  update(collisions: collision[]): void {
+    if (!this.isDead) {
+      this.leftRightMovement(collisions);
+    }
+  }
+}

package/src/classes/game-objects/point-objects/enemies/stache-streaker.ts

@@ -0,0 +1,78 @@
+import type { collision } from "../../../../shared/types";
+import { Enemy } from "./enemy";
+import type { GameContext } from "../../../../shared/game-context";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+import { Laser } from "../../projectiles/enemy-projectiles/laser";
+import stacheStreaker1 from "../../../../assets/stacheStreaker1.webp";
+import stacheStreaker2 from "../../../../assets/stacheStreaker2.webp";
+
+export class StacheStreaker extends Enemy {
+  readonly pointValue: number = 1250;
+  private canMove: boolean = true;
+  private totalDistance: number = 0;
+  private readonly timeBetweenShots: number = 3500;
+  private readonly shotTime: number = 5000;
+
+  constructor(gameContext: GameContext, x: number, y: number) {
+    super(
+      gameContext,
+      {
+        x,
+        y,
+        width: BLOCK_SIZE * 2,
+        height: BLOCK_SIZE * 1.5,
+      },
+      false,
+    );
+
+    this.imageSources.push(stacheStreaker1, stacheStreaker2);
+
+    this.image.src = this.imageSources[0];
+    this.speedX = 1;
+    this.shotTimer = setTimeout(() => {
+      this.fireLaser();
+    }, this.timeBetweenShots);
+  }
+
+  // This enemy doesn't collide with anything
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_: collision[]): void {
+    if (!this.isDead && this.canMove) {
+      this.rect.x += this.speedX;
+      this.totalDistance += Math.abs(this.speedX);
+
+      if (this.totalDistance >= BLOCK_SIZE * 5) {
+        this.speedX *= -1;
+        this.totalDistance = 0;
+        //this.setNextImage()
+      }
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    ctx.drawImage(
+      this.image,
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+
+  private fireLaser(): void {
+    this.gameContext.addGameObject(
+      new Laser(this.gameContext, this, this.shotTime),
+    );
+    this.canMove = false;
+    this.setNextImage();
+
+    this.shotTimer = setTimeout(() => {
+      this.canMove = true;
+      this.setNextImage();
+
+      this.shotTimer = setTimeout(() => {
+        this.fireLaser();
+      }, this.timeBetweenShots);
+    }, this.shotTime);
+  }
+}

package/src/classes/game-objects/point-objects/items/coin.ts

@@ -0,0 +1,72 @@
+import type { GameContext } from "../../../../shared/game-context";
+import type { collision, rectangle } from "../../../../shared/types";
+import { Item } from "./item";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+
+export class Coin extends Item {
+  readonly pointValue: number = 100;
+
+  constructor(
+    gameContext: GameContext,
+
+    x: number,
+    y: number,
+    fromItemBlock: boolean = false,
+  ) {
+    const rect: rectangle = {
+      x,
+      y,
+      width: 15,
+      height: 15,
+    };
+
+    if (!fromItemBlock) {
+      rect.x += BLOCK_SIZE / 2 - rect.width / 2;
+      rect.y += BLOCK_SIZE / 2 - rect.height / 2;
+    }
+
+    super(gameContext, rect, fromItemBlock);
+
+    if (fromItemBlock) {
+      this.speedY = -2.5;
+    }
+  }
+
+  // The coin doesn't care about collisions
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_collisions: collision[]): void {
+    // The animation only happens if the coin
+    // is triggered from an item block
+    if (!this.fromItemBlock) {
+      return;
+    }
+
+    if (this.speedY < 0) {
+      this.rect.y += this.speedY;
+      this.speedY += 0.1;
+      return;
+    }
+
+    // Once the animation is done, we remove the coin
+    this.collect();
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.fillStyle = "gold";
+
+    ctx.beginPath();
+    ctx.arc(
+      this.rect.x + this.rect.width / 2 + this.gameContext.xOffset,
+      this.rect.y + this.rect.height / 2,
+      this.rect.width,
+      0,
+      Math.PI * 2,
+    );
+
+    ctx.fill();
+    ctx.closePath();
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+}

package/src/classes/game-objects/point-objects/items/fire-stache.ts

@@ -0,0 +1,48 @@
+import type { GameContext } from "../../../../shared/game-context";
+import type { collision, rectangle } from "../../../../shared/types";
+import { Item } from "./item";
+
+export class FireStache extends Item {
+  readonly pointValue: number = 1000;
+  totalRaise: number = 20;
+  speedX = 2;
+
+  constructor(
+    gameContext: GameContext,
+
+    x: number,
+    y: number,
+    fromItemBlock: boolean = false,
+  ) {
+    const rect: rectangle = {
+      x,
+      y,
+      width: 20,
+      height: 20,
+    };
+
+    super(gameContext, rect, fromItemBlock);
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.fillStyle = "red";
+    ctx.fillRect(
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+
+  update(collisions: collision[]): void {
+    // The animation only happens if the coin
+    // is triggered from an item block
+    if (this.fromItemBlock && this.totalRaise > 0) {
+      this.rect.y += this.speedY;
+      this.totalRaise += this.speedY;
+      return;
+    }
+
+    this.leftRightMovement(collisions);
+  }
+}

package/src/classes/game-objects/point-objects/items/item.ts

@@ -0,0 +1,27 @@
+import type { GameContext } from "../../../../shared/game-context";
+import type { rectangle } from "../../../../shared/types";
+import { PointObject } from "../point-item";
+import { BLOCK_SIZE } from "../../../../shared/constants";
+
+export abstract class Item extends PointObject {
+  protected readonly fromItemBlock: boolean;
+
+  constructor(
+    gameContext: GameContext,
+
+    rect: rectangle,
+    fromItemBlock: boolean = false,
+  ) {
+    if (fromItemBlock) {
+      rect.x -= rect.width / 2;
+      rect.y += BLOCK_SIZE;
+    }
+
+    super(gameContext, rect);
+
+    this.fromItemBlock = fromItemBlock;
+    if (fromItemBlock) {
+      this.speedY = -0.5;
+    }
+  }
+}

package/src/classes/game-objects/point-objects/items/stacheroom.ts

@@ -0,0 +1,48 @@
+import type { GameContext } from "../../../../shared/game-context";
+import type { collision, rectangle } from "../../../../shared/types";
+import { Item } from "./item";
+
+export class Stacheroom extends Item {
+  readonly pointValue: number = 1000;
+  totalRaise: number = 20;
+  speedX = 2;
+
+  constructor(
+    gameContext: GameContext,
+
+    x: number,
+    y: number,
+    fromItemBlock: boolean = false,
+  ) {
+    const rect: rectangle = {
+      x,
+      y,
+      width: 20,
+      height: 20,
+    };
+
+    super(gameContext, rect, fromItemBlock);
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.fillStyle = "blue";
+    ctx.fillRect(
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.width,
+      this.rect.height,
+    );
+  }
+
+  update(collisions: collision[]): void {
+    // The animation only happens if the coin
+    // is triggered from an item block
+    if (this.fromItemBlock && this.totalRaise > 0) {
+      this.rect.y += this.speedY;
+      this.totalRaise += this.speedY;
+      return;
+    }
+
+    this.leftRightMovement(collisions);
+  }
+}

package/src/classes/game-objects/point-objects/point-item.ts

@@ -0,0 +1,10 @@
+import { MovingGameObject } from "../../../shared/game-objects/moving-game-object";
+
+export abstract class PointObject extends MovingGameObject {
+  abstract pointValue: number;
+
+  collect() {
+    this.gameContext.addScore(this.pointValue);
+    this.gameContext.removeGameObject(this);
+  }
+}

package/src/classes/game-objects/projectiles/brick-debris.ts

@@ -0,0 +1,44 @@
+import type { collision } from "../../../shared/types";
+import type { Brick } from "../set-pieces/obstacles/blocks/punchable-blockS/brick";
+import type { GameContext } from "../../../shared/game-context";
+import { Projectile } from "./projectile";
+
+export class BrickDebris extends Projectile {
+  readonly acceptsCollision = false;
+
+  constructor(gameContext: GameContext, parent: Brick) {
+    super(gameContext, {
+      x: parent.rect.x + parent.rect.width / 2,
+      y: parent.rect.y + parent.rect.height / 2,
+      width: 8,
+      height: 8,
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_: collision[]): void {
+    this.rect.x += this.speedX;
+    this.rect.y += this.speedY;
+    this.speedY += this.gameContext.gravity;
+
+    if (this.rect.y > this.gameContext.gameArea.height) {
+      this.gameContext.removeGameObject(this);
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    ctx.fillStyle = "brown";
+
+    ctx.beginPath();
+    ctx.arc(
+      this.rect.x + this.rect.width / 2 + this.gameContext.xOffset,
+      this.rect.y + this.rect.height / 2,
+      this.rect.width,
+      0,
+      Math.PI * 2,
+    );
+
+    ctx.fill();
+    ctx.closePath();
+  }
+}

package/src/classes/game-objects/projectiles/enemy-projectiles/enemy-projectile.ts

@@ -0,0 +1,3 @@
+import { Projectile } from "../projectile";
+
+export abstract class EnemyProjectile extends Projectile {}

package/src/classes/game-objects/projectiles/enemy-projectiles/fire-ball.ts

@@ -0,0 +1,87 @@
+import type { collision } from "../../../../shared/types";
+import { EnemyProjectile } from "./enemy-projectile";
+import type { GameContext } from "../../../../shared/game-context";
+import type { Enemy } from "../../point-objects/enemies/enemy";
+import { Player } from "../../../../shared/player";
+
+export class FireBall extends EnemyProjectile {
+  private readonly target: Player;
+  private readonly tracking: boolean = Math.random() < 0.25;
+
+  constructor(gameContext: GameContext, parent: Enemy) {
+    super(gameContext, {
+      x: parent.rect.x + parent.rect.width / 2,
+      y: parent.rect.y + parent.rect.height + 10,
+      width: 8,
+      height: 8,
+    });
+
+    setTimeout(() => {
+      this.gameContext.removeGameObject(this);
+    }, 5000);
+
+    const player = gameContext.getPlayer();
+    if (player) {
+      this.target = player;
+      this.setSpeed();
+    } else {
+      throw new Error("Player not found");
+    }
+  }
+
+  update(collisions: collision[]): void {
+    for (const collision of collisions) {
+      if (collision.gameObject instanceof Player) {
+        collision.gameObject.playerHit();
+        return;
+      }
+
+      this.gameContext.removeGameObject(this);
+    }
+
+    if (this.rect.x < 0 || this.rect.x > this.gameContext.gameArea.width) {
+      this.gameContext.removeGameObject(this);
+      return;
+    }
+
+    if (this.rect.y < 0 || this.rect.y > this.gameContext.gameArea.height) {
+      this.gameContext.removeGameObject(this);
+      return;
+    }
+
+    if (this.tracking) {
+      this.setSpeed();
+    }
+
+    this.rect.x += this.speedX;
+    this.rect.y += this.speedY;
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    ctx.beginPath();
+    ctx.lineWidth = 5;
+    ctx.fillStyle = "red";
+    ctx.arc(
+      this.rect.x + this.gameContext.xOffset,
+      this.rect.y,
+      this.rect.height,
+      0,
+      2 * Math.PI,
+    );
+    ctx.fill();
+  }
+
+  private setSpeed() {
+    const dx = this.target.rect.x - this.rect.x;
+    const dy = this.target.rect.y - this.rect.y;
+    const angle = Math.atan2(dy, dx);
+
+    if (this.tracking) {
+      this.speedX = Math.cos(angle) * 1.25;
+      this.speedY = Math.sin(angle) * 1.25;
+    } else {
+      this.speedX = Math.cos(angle) * 2;
+      this.speedY = Math.sin(angle) * 2;
+    }
+  }
+}

package/src/classes/game-objects/projectiles/enemy-projectiles/fire-bar.ts

@@ -0,0 +1,65 @@
+import type { GameContext } from "../../../../shared/game-context";
+import type { collision, rectangle } from "../../../../shared/types";
+import type { FireBarBlock } from "../../set-pieces/obstacles/blocks/fire-bar-block";
+import { RotatingGameObject } from "../../../../shared/game-objects/rotating-game-object";
+
+export class FireBar extends RotatingGameObject {
+  private readonly anchorBlock: FireBarBlock;
+
+  constructor(
+    gameContext: GameContext,
+
+    x: number,
+    y: number,
+    anchorBlock: FireBarBlock,
+  ) {
+    const rect: rectangle = {
+      x,
+      y,
+      width: 10,
+      height: 250,
+    };
+
+    super(gameContext, rect);
+    this.anchorBlock = anchorBlock;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(_: collision[]): void {
+    this.rotation += this.rotationSpeed;
+    this.rotation %= Math.PI * 2;
+
+    const anchorCenterX =
+      this.anchorBlock.rect.x + this.anchorBlock.rect.width / 2;
+    const anchorCenterY =
+      this.anchorBlock.rect.y + this.anchorBlock.rect.height / 2;
+
+    // Position the firebar so its BOTTOM CENTER is at the anchor center
+    this.rect.x = anchorCenterX - this.rect.width / 2;
+    this.rect.y = anchorCenterY - this.rect.height;
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    ctx.save();
+
+    // Move the origin to the bottom-center of the firebar
+    ctx.translate(
+      this.rect.x + this.rect.width / 2 + this.gameContext.xOffset,
+      this.rect.y + this.rect.height,
+    );
+
+    // Rotate around the bottom edge
+    ctx.rotate(this.rotation);
+
+    // Draw the bar with its bottom edge at the origin
+    ctx.fillStyle = "red";
+    ctx.fillRect(
+      -this.rect.width / 2, // center horizontally
+      -this.rect.height, // draw upward from pivot
+      this.rect.width,
+      this.rect.height,
+    );
+
+    ctx.restore();
+  }
+}