dino-ge 1.0.0

package/src/Input.ts

@@ -0,0 +1,117 @@
+import Vector2 from './Vector2.js';
+import Engine from './Engine.js';
+
+/**
+ * Handles mouse and keyboard input events.
+ */
+export default class Input {
+  private static mousePosition: Vector2 = new Vector2(0, 0);
+  private static clickListeners: Set<(pos: Vector2) => void> = new Set();
+  private static keys: Set<string> = new Set();
+  private static isInitialized = false;
+
+  /**
+   * Initializes input event listeners.
+   */
+  static init() {
+    if (this.isInitialized) return;
+    this.isInitialized = true;
+
+    document.addEventListener('mousemove', (event: MouseEvent) => {
+      this.mousePosition.x = event.clientX;
+      this.mousePosition.y = event.clientY;
+    });
+
+    document.addEventListener('click', (event: MouseEvent) => {
+      if ((event.target as HTMLElement).tagName !== 'CANVAS') return;
+
+      const pos = new Vector2(this.mouseX, this.mouseY);
+
+      // If debug mode is on, try to select an object
+      if (Engine.debug) {
+        const objects = Engine.currentScene ? Engine.currentScene.objects : Engine.objects;
+        let found = false;
+
+        // Check objects from top to bottom (zIndex)
+        const sorted = Array.from(objects).sort((a, b) => (b.zIndex > a.zIndex ? 1 : -1));
+
+        for (const obj of sorted) {
+          if (
+            pos.x > obj.position.x &&
+            pos.x < obj.position.x + obj.width &&
+            pos.y > obj.position.y &&
+            pos.y < obj.position.y + obj.height
+          ) {
+            Engine.selectedObject = obj;
+            found = true;
+            break;
+          }
+        }
+
+        if (!found) Engine.selectedObject = null;
+      }
+
+      if (!Engine.paused) {
+        this.clickListeners.forEach((listener) => listener(pos));
+      }
+    });
+
+    document.addEventListener('mousedown', (event: MouseEvent) => {
+      if ((event.target as HTMLElement).tagName !== 'CANVAS') return;
+      this.keys.add(`mouse${event.button}`);
+    });
+
+    document.addEventListener('mouseup', (event: MouseEvent) => {
+      this.keys.delete(`mouse${event.button}`);
+    });
+
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
+      this.keys.add(event.key.toLowerCase());
+
+      // Toggle Pause with P
+      if (event.key === 'p' || event.key === 'P') {
+        Engine.paused = !Engine.paused;
+        
+        if (Engine.paused) {
+          document.getElementById('canvas')!.style.cursor = 'default';
+        }
+      }
+    });
+
+    document.addEventListener('keyup', (event: KeyboardEvent) => {
+      this.keys.delete(event.key.toLowerCase());
+    });
+
+    window.addEventListener('blur', () => {
+      this.keys.clear();
+    });
+  }
+
+  /**
+   * Checks if a specific key is currently held down.
+   * @param key The key to check (e.g., 'w', 'ArrowUp', ' ').
+   */
+  static isKeyDown(key: string): boolean {
+    return this.keys.has(key.toLowerCase());
+  }
+
+  /** Current mouse x position in world space. */
+  static get mouseX() {
+    return (this.mousePosition.x / Engine.camera.zoom) + Engine.camera.position.x;
+  }
+
+  /** Current mouse y position in world space. */
+  static get mouseY() {
+    return (this.mousePosition.y / Engine.camera.zoom) + Engine.camera.position.y;
+  }
+
+  /** Adds a global click listener. */
+  static addClickListener(listener: (pos: Vector2) => void) {
+    this.clickListeners.add(listener);
+  }
+
+  /** Removes a global click listener. */
+  static removeClickListener(listener: (pos: Vector2) => void) {
+    this.clickListeners.delete(listener);
+  }
+}

package/src/Line.ts

@@ -0,0 +1,75 @@
+import GameObject from './GameObject.js';
+import Vector2 from './Vector2.js';
+
+/**
+ * Configuration for creating a Line object.
+ */
+export interface LineProperties {
+  /** Unique tag for identification. */
+  tag: string;
+  /** Stroke width of the line. */
+  width: number;
+  /** Start point of the line. */
+  p1: Vector2;
+  /** End point of the line. */
+  p2: Vector2;
+  /** Render order (lower is background). */
+  zIndex: number;
+}
+
+const defaultProps = {
+  tag: 'line',
+  width: 1,
+  zIndex: 0,
+  p1: new Vector2(),
+  p2: new Vector2(),
+};
+
+/**
+ * A basic line object that can be drawn between two points.
+ */
+export default class Line extends GameObject {
+  /** Stroke width of the line. */
+  strokeWidth: number;
+  /** Start x coordinate. */
+  x1: number;
+  /** Start y coordinate. */
+  y1: number;
+  /** End x coordinate. */
+  x2: number;
+  /** End y coordinate. */
+  y2: number;
+
+  /** Gets the starting position of the line. */
+  get position() { return new Vector2(this.x1, this.y1); }
+  /** Gets the bounding box width of the line. */
+  get width() { return Math.abs(this.x2 - this.x1); }
+  /** Gets the bounding box height of the line. */
+  get height() { return Math.abs(this.y2 - this.y1); }
+
+  constructor(props: LineProperties) {
+    super(props.tag || defaultProps.tag, props.zIndex || defaultProps.zIndex);
+
+    const defaultedProps = {
+      ...defaultProps,
+      ...props,
+    };
+
+    this.strokeWidth = defaultedProps.width;
+    this.x1 = defaultedProps.p1.x;
+    this.y1 = defaultedProps.p1.y;
+    this.x2 = defaultedProps.p2.x;
+    this.y2 = defaultedProps.p2.y;
+
+    this.registerSelf();
+  }
+
+  /** Draws the line onto the provided rendering context. */
+  draw(ctx: CanvasRenderingContext2D) {
+    if (!this.visible) return;
+    ctx.lineWidth = this.strokeWidth;
+    ctx.moveTo(this.x1, this.y1);
+    ctx.lineTo(this.x2, this.y2);
+    ctx.stroke();
+  }
+}

package/src/Loader.ts

@@ -0,0 +1,66 @@
+/**
+ * Handles asynchronous loading of assets like images.
+ */
+export default class ResourceLoader {
+  private static assets: Map<string, HTMLImageElement> = new Map();
+  private static loadingQueue: Set<string> = new Set();
+  private static totalToLoad: number = 0;
+  private static loadedCount: number = 0;
+
+  /**
+   * Queue an image for loading.
+   * @param tag Unique tag to reference the image later.
+   * @param src Path to the image file.
+   */
+  static queueImage(tag: string, src: string) {
+    if (this.assets.has(tag)) return;
+    this.loadingQueue.add(JSON.stringify({ tag, src }));
+    this.totalToLoad++;
+  }
+
+  /**
+   * Start loading all queued assets.
+   * @param onProgress Optional callback for loading progress updates.
+   */
+  static async loadAll(onProgress?: (percent: number) => void): Promise<void> {
+    if (this.loadingQueue.size === 0) return Promise.resolve();
+
+    const promises = Array.from(this.loadingQueue).map(item => {
+      const { tag, src } = JSON.parse(item);
+      return new Promise<void>((resolve, reject) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => {
+          this.assets.set(tag, img);
+          this.loadedCount++;
+          if (onProgress) {
+            onProgress((this.loadedCount / this.totalToLoad) * 100);
+          }
+          resolve();
+        };
+        img.onerror = () => {
+          console.error(`Failed to load asset: ${src}`);
+          reject();
+        };
+      });
+    });
+
+    await Promise.all(promises);
+    this.loadingQueue.clear();
+    this.totalToLoad = 0;
+    this.loadedCount = 0;
+  }
+
+  /**
+   * Get a loaded asset by its tag.
+   * @param tag The tag used when queuing the asset.
+   * @returns The loaded HTMLImageElement.
+   */
+  static getImage(tag: string): HTMLImageElement {
+    const asset = this.assets.get(tag);
+    if (!asset) {
+      throw new Error(`Asset not found: ${tag}. Make sure it is queued and loaded.`);
+    }
+    return asset;
+  }
+}

package/src/Physics.ts

@@ -0,0 +1,77 @@
+import Vector2 from './Vector2.js';
+import GameObject from './GameObject.js';
+import Circle from './Circle.js';
+
+/**
+ * Utility class for collision detection between game objects.
+ */
+export default class Physics {
+  /**
+   * Checks if two game objects are colliding.
+   /**
+    * Checks if two game objects are colliding and resolves it if not static.
+    * @param obj1 First object.
+    * @param obj2 Second object.
+    * @returns True if the objects are colliding.
+    */
+   static checkCollision(obj1: GameObject, obj2: GameObject): boolean {
+     const isCircle1 = obj1 instanceof Circle;
+     const isCircle2 = obj2 instanceof Circle;
+     let isColliding = false;
+
+     if (isCircle1 && isCircle2) {
+       const c1 = obj1 as Circle;
+       const c2 = obj2 as Circle;
+       isColliding = Vector2.distance(c1.center, c2.center) < c1.radius + c2.radius;
+     } else if (isCircle1 || isCircle2) {
+       const circle = (isCircle1 ? obj1 : obj2) as Circle;
+       const rect = (isCircle1 ? obj2 : obj1);
+       const closestX = Math.max(rect.position.x, Math.min(circle.center.x, rect.position.x + rect.width));
+       const closestY = Math.max(rect.position.y, Math.min(circle.center.y, rect.position.y + rect.height));
+       isColliding = Vector2.distance(circle.center, new Vector2(closestX, closestY)) < circle.radius;
+     } else {
+       isColliding = (
+         obj1.position.x < obj2.position.x + obj2.width &&
+         obj1.position.x + obj1.width > obj2.position.x &&
+         obj1.position.y < obj2.position.y + obj2.height &&
+         obj1.position.y + obj1.height > obj2.position.y
+       );
+     }
+
+     if (isColliding && (!obj1.isStatic || !obj2.isStatic)) {
+       this.resolveCollision(obj1, obj2);
+     }
+
+     return isColliding;
+   }
+  private static resolveCollision(obj1: GameObject, obj2: GameObject) {
+    // Calculate overlap
+    const overlapX = Math.min(
+      obj1.position.x + obj1.width - obj2.position.x,
+      obj2.position.x + obj2.width - obj1.position.x
+    );
+    const overlapY = Math.min(
+      obj1.position.y + obj1.height - obj2.position.y,
+      obj2.position.y + obj2.height - obj1.position.y
+    );
+
+    // Push apart
+    if (overlapX < overlapY) {
+      if (obj1.position.x < obj2.position.x) {
+        if (!obj1.isStatic) obj1.position.x -= overlapX / 2;
+        if (!obj2.isStatic) obj2.position.x += overlapX / 2;
+      } else {
+        if (!obj1.isStatic) obj1.position.x += overlapX / 2;
+        if (!obj2.isStatic) obj2.position.x -= overlapX / 2;
+      }
+    } else {
+      if (obj1.position.y < obj2.position.y) {
+        if (!obj1.isStatic) obj1.position.y -= overlapY / 2;
+        if (!obj2.isStatic) obj2.position.y += overlapY / 2;
+      } else {
+        if (!obj1.isStatic) obj1.position.y += overlapY / 2;
+        if (!obj2.isStatic) obj2.position.y -= overlapY / 2;
+      }
+    }
+  }
+}

package/src/Rectangle.ts

@@ -0,0 +1,83 @@
+import Vector2 from './Vector2.js';
+import GameObject from './GameObject.js';
+
+/**
+ * Configuration for creating a Rectangle object.
+ */
+export interface RectProps {
+  /** Unique tag for identification. */
+  tag: string;
+  /** Initial position of the top-left corner. */
+  position: Vector2;
+  /** Width of the rectangle. */
+  width: number;
+  /** Height of the rectangle. */
+  height: number;
+  /** Fill colour. */
+  colour: string;
+  /** Render order. */
+  zIndex: number;
+}
+
+const defaultProps = {
+  tag: 'rect', colour: 'black', zIndex: 0,
+}
+
+/**
+ * A basic rectangle shape that can be drawn to the screen.
+ */
+export default class Rectangle extends GameObject {
+  private _position: Vector2;
+  private _width: number;
+  private _height: number;
+  /** Fill colour. */
+  colour: string;
+
+  /** Gets or sets the top-left position. */
+  get position() { return this._position; }
+  set position(val) { this._position = val; }
+  /** Gets or sets the width. */
+  get width() { return this._width; }
+  set width(val) { this._width = val; }
+  /** Gets or sets the height. */
+  get height() { return this._height; }
+  set height(val) { this._height = val; }
+
+  constructor(props: RectProps) {
+    super(props.tag || defaultProps.tag, props.zIndex || defaultProps.zIndex);
+    
+    const defaultedProps = {
+      ...defaultProps,
+      ...props
+    }
+
+    if (!(defaultedProps.position instanceof Vector2)) {
+      throw new Error('"position" must be a Vector2!');
+    }
+
+    if (!defaultedProps.width || !defaultedProps.height) {
+      throw new Error('You must provide a width and height for Rectangle');
+    }
+
+    this.tag = defaultedProps.tag;
+    this._position = defaultedProps.position;
+    this._width = defaultedProps.width;
+    this._height = defaultedProps.height;
+    this.colour = defaultedProps.colour;
+    this.zIndex = defaultedProps.zIndex;
+
+    this.registerSelf();
+  }
+
+  /** Draws the rectangle onto the provided rendering context. */
+  draw(ctx: CanvasRenderingContext2D) {
+    if (!this.visible) return;
+    ctx.fillStyle = this.colour;
+    ctx.fillRect(
+      this.position.x,
+      this.position.y,
+      this.width,
+      this.height
+    );
+  }
+}

package/src/Scene.ts

@@ -0,0 +1,30 @@
+import GameObject from './GameObject.js';
+
+/**
+ * Represents a separate world or level in the game.
+ * Scenes manage their own set of game objects and lifecycle.
+ */
+export default abstract class Scene {
+  /** The set of game objects currently in the scene. */
+  public objects: Set<GameObject> = new Set();
+
+  /** Called when the scene is loaded. */
+  onLoad(): void {}
+  /** Called every frame to update the scene. */
+  update(): void {}
+
+  /** Adds an object to the scene. */
+  add(object: GameObject) {
+    this.objects.add(object);
+  }
+
+  /** Removes an object from the scene. */
+  remove(object: GameObject) {
+    this.objects.delete(object);
+  }
+
+  /** Clears all objects from the scene. */
+  clear() {
+    this.objects.clear();
+  }
+}

package/src/Sprite.ts

@@ -0,0 +1,194 @@
+import Engine from './Engine.js';
+import GameObject from './GameObject.js';
+import Vector2 from './Vector2.js';
+import ResourceLoader from './Loader.js';
+
+/**
+ * Properties for creating a new Sprite.
+ */
+export interface SpriteProps {
+  /** Unique tag for the object. */
+  tag: string;
+  /** Image element or tag from ResourceLoader. */
+  img: HTMLImageElement | string;
+  /** Number of rows in the spritesheet. */
+  rows: number;
+  /** Number of columns in the spritesheet. */
+  cols: number;
+  /** Initial world position. */
+  position: Vector2;
+  /** Starting frame column for animation. */
+  startCol: number;
+  /** Ending frame column for animation. */
+  endCol: number;
+  /** Rendering order. */
+  zIndex: number;
+}
+
+/**
+ * Represents an animated sprite using a spritesheet.
+ */
+export default class Sprite extends GameObject {
+  /** The source image for the sprite. */
+  img: HTMLImageElement;
+  /** Number of rows in the spritesheet. */
+  rows: number;
+  /** Number of columns in the spritesheet. */
+  cols: number;
+  /** The world position of the sprite. */
+  position: Vector2;
+  /** The starting column for the current animation loop. */
+  startCol: number;
+  /** The ending column for the current animation loop. */
+  endCol: number;
+  /** The pixel width of a single animation frame (calculated automatically). */
+  frameWidth: number = 0;
+  /** The pixel height of a single animation frame (calculated automatically). */
+  frameHeight: number = 0;
+  /** Whether the sprite is currently registered with the engine. */
+  registered: boolean = false;
+  /** The current frame index being displayed. */
+  currentFrame: number = 0;
+  /** Whether the sprite is horizontally flipped. */
+  flip: boolean = false;
+  /** Duration of each animation frame in milliseconds. */
+  frameDuration: number = 100;
+  #lastFrameUpdate: number = Date.now();
+
+  /**
+   * Gets the display width of the sprite (scaled by 3).
+   */
+  get width(): number {
+    return this.frameWidth * 3;
+  }
+
+  /**
+   * Gets the display height of the sprite (scaled by 3).
+   */
+  get height(): number {
+    return this.frameHeight * 3;
+  }
+
+  constructor(props: SpriteProps) {
+    if (!props.tag) {
+      throw new Error('You must provide a tag for a Sprite');
+    }
+
+    super(props.tag, props.zIndex || 1);
+
+    if (typeof props.img === 'string') {
+      this.img = ResourceLoader.getImage(props.img);
+    } else {
+      this.img = props.img;
+    }
+
+    this.rows = props.rows;
+    this.cols = props.cols;
+    this.position = props.position;
+    this.startCol = props.startCol;
+    this.endCol = props.endCol;
+    this.currentFrame = props.startCol || 0;
+
+    const setDimensions = () => {
+      this.frameWidth = this.img.width / this.cols;
+      this.frameHeight = this.img.height / this.rows;
+    };
+
+    if (this.img.complete) {
+      setDimensions();
+    } else {
+      this.img.addEventListener('load', setDimensions, { once: true });
+    }
+
+    this.registered = false;
+  }
+
+  /**
+   * Main rendering method for the sprite.
+   * Handles frame calculation and horizontal flipping.
+   * @param ctx The canvas 2D rendering context.
+   */
+  draw(ctx: CanvasRenderingContext2D) {
+    if (!this.visible || !this.frameWidth || !this.frameHeight) return;
+
+    const now = Date.now();
+    if (this.registered && now - this.#lastFrameUpdate > this.frameDuration) {
+      this.currentFrame += 1;
+      this.#lastFrameUpdate = now;
+    }
+
+    const {
+      img,
+      cols,
+      frameWidth,
+      frameHeight,
+      position,
+      startCol,
+      endCol,
+    } = this;
+
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    const maxFrame = endCol - 1;
+
+    if (this.currentFrame < startCol) {
+      this.currentFrame = startCol;
+    }
+
+    if (this.currentFrame > maxFrame) {
+      this.currentFrame = startCol;
+    }
+
+    // Update rows and columns
+    const column = this.currentFrame % cols;
+    const row = Math.floor(this.currentFrame / cols);
+
+    ctx.save();
+    if (this.flip) {
+      ctx.translate(position.x + (frameWidth * 3), position.y);
+      ctx.scale(-1, 1);
+      ctx.drawImage(
+        img,
+        column * frameWidth,
+        row * frameHeight,
+        frameWidth,
+        frameHeight,
+        0,
+        0,
+        frameWidth * 3,
+        frameHeight * 3
+      );
+    } else {
+      ctx.drawImage(
+        img,
+        column * frameWidth,
+        row * frameHeight,
+        frameWidth,
+        frameHeight,
+        position.x,
+        position.y,
+        frameWidth * 3,
+        frameHeight * 3
+      );
+    }
+    ctx.restore();
+  }
+
+  /**
+   * Registers the sprite with the engine and starts its animation loop.
+   */
+  play() {
+    if (!this.registered) {
+      Engine.registerObject(this);
+      this.registered = true;
+    }
+  }
+
+  /**
+   * Stops the sprite's animation and removes it from the engine.
+   */
+  stop() {
+    Engine.destroyObject(this);
+  }
+}