@jiant/canvable 0.0.4 → 0.0.6

package/README.md

@@ -24,35 +24,55 @@ yarn add @jiant/canvable
 
 ### Criando uma Cena
 
+### Criando uma Cena
+
 A seguir está um exemplo básico de como criar uma cena e adicionar um objeto nela:
 
 ```typescript
-import { Circle, getCanvas, Scene } from "@jiant/canvable";
-import "./style.css";
+import { Scene, Square, Vector2D, getCanvas, KinematicBody } from "@jiant/canvable";
 
 // Obtendo o canvas
-const canvas = getCanvas("app")!;
+const canvas = getCanvas("app");
 const ctx = canvas.getContext("2d")!;
 
 // Criando a cena
 const scene = new Scene(ctx);
 
-// Criando um círculo
-const circle = new Circle();
+// Criando um objeto (Quadrado)
+const player = new Square(scene, {
+  size: new Vector2D(50, 50),
+  startsWithBoundingBox: true, // Adicionar colisão automaticamente
+});
+player.pos = new Vector2D(100, 100);
+player.style.fillStyle = "#00FF00"; // Cor customizada
 
-// Adicionando o círculo à cena
-scene.addObject(circle);
+// Adicionando física (Corpo Kinemático)
+const body = new KinematicBody(scene, player, {
+  speed: 1000,
+  friction: 0.9,
+});
+scene.addObject(body);
+
+// Iniciando o loop
+scene.run((deltaTime) => {
+  // Movimento simples
+  if (scene.inputManager.isPressed("ArrowRight")) {
+    body.applyForce(1000 * deltaTime, 0, deltaTime);
+  }
+});
 ```
 
-### Loop de Jogo
+### Playground Interativo
 
-Você pode adicionar um loop de jogo para atualizar e mover os objetos da cena:
+O pacote inclui um exemplo completo de "Playground de Física" com:
 
-```typescript
-scene.gameLoop((deltaTime, total) => {
-  circle.pos.x = Math.sin(total) * 100 + 200;
-});
-```
+- Controle de personagem (WASD + Setas)
+- Sprint (Shift)
+- Colisões e Física
+- Câmera que segue o jogador
+- Geração procedural de nível
+
+Você pode conferir o código fonte em `example/index.ts` ou rodar localmente com `npm run dev`.
 
 ---
 

package/dist/main.d.mts

@@ -204,15 +204,18 @@ declare class Scene extends Node {
     camera: Camera;
     inputManager: InputManager;
     ctx: CanvasRenderingContext2D;
+    private animationFrameId;
+    private running;
     private lastTime;
     private totalTime;
     constructor(ctx: CanvasRenderingContext2D, opts?: SceneOptions);
     addObject(object: Node): void;
     setup(): void;
     resizeCanvas(): void;
-    update(deltaTime: number): void;
-    draw(ctx: CanvasRenderingContext2D): void;
-    gameLoop(callback?: (deltaTime: number, totalTime: number) => void, targetFPS?: number): void;
+    updateFrame(deltaTime: number): void;
+    drawFrame(ctx: CanvasRenderingContext2D): void;
+    run(callback?: (deltaTime: number, totalTime: number) => void, targetFPS?: number): void;
+    stop(): void;
 }
 
 interface NodeConfig {
@@ -225,39 +228,114 @@ declare class Node {
     id: string;
     children: Node[];
     scene?: Scene;
+    boundingBox?: BoundingBox;
+    update?(dt: number): void;
+    draw?(ctx: CanvasRenderingContext2D, selected?: boolean): void;
     constructor(scene?: Scene, config?: NodeConfig);
     addObject(object: Node): void;
     removeObject(object: Node): void;
     private generateID;
 }
 
+interface CollisionResult {
+    isColliding: boolean;
+    mtv?: Vector2D;
+}
 declare abstract class BoundingBox extends Node {
-    abstract checkCollision(other: BoundingBox): boolean;
+    abstract checkCollision(other: BoundingBox): CollisionResult;
     abstract isPointInside(_point: Vector2D): boolean;
 }
 
+declare class CircleBoundingBox extends BoundingBox {
+    radius: number;
+    constructor(scene?: Scene, radius?: number);
+    checkCollision(other: BoundingBox): CollisionResult;
+    isPointInside(_point: Vector2D): boolean;
+}
+
+declare class SquareBoundingBox extends BoundingBox {
+    size: Vector2D;
+    constructor(scene?: Scene, size?: Vector2D);
+    checkCollision(other: BoundingBox): CollisionResult;
+    isPointInside(_point: Vector2D): boolean;
+}
+
+interface KinematicBodyConfig {
+    speed?: number;
+    friction?: number;
+    maxSpeed?: number;
+}
+declare class KinematicBody extends Node {
+    shape: Node;
+    velocity: Vector2D;
+    speed: number;
+    friction: number;
+    maxSpeed: number;
+    isColliding: boolean;
+    constructor(scene: Scene, shape: Node, config?: KinematicBodyConfig);
+    applyForce(x: number, y: number, dt: number): void;
+    update(dt: number): void;
+    private resolveCollisions;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
+}
+
+declare class StaticBody extends Node {
+    shape: Node;
+    constructor(scene: Scene, shape: Node);
+    update(_dt: number): void;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
+}
+
 interface CircleConfig {
     vel?: Vector2D;
     size?: number;
     friction?: number;
     startsWithBoundingBox?: boolean;
+    style?: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
 }
 declare class Circle extends Node {
     vel: Vector2D;
     size: number;
     friction: number;
-    boundingBox: BoundingBox;
+    style: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
     constructor(scene?: Scene, config?: CircleConfig);
+    update(_deltaTime: number): void;
     draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
-declare class CircleBoundingBox extends BoundingBox {
-    radius: number;
-    constructor(scene?: Scene, radius?: number);
-    checkCollision(other: BoundingBox): boolean;
-    isPointInside(_point: Vector2D): boolean;
+interface SquareConfig {
+    vel?: Vector2D;
+    size?: Vector2D;
+    friction?: number;
+    startsWithBoundingBox?: boolean;
+    style?: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+}
+declare class Square extends Node {
+    vel: Vector2D;
+    size: Vector2D;
+    friction: number;
+    style: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    constructor(scene?: Scene, config?: SquareConfig);
+    update(_deltaTime: number): void;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
 declare function getCanvas(id: string): HTMLCanvasElement;
 
-export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };
+export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type CollisionResult, type Drawable, KinematicBody, type KinematicBodyConfig, Node, type NodeConfig, Scene, type SceneOptions, Square, SquareBoundingBox, type SquareConfig, StaticBody, TWO_PI, type Updatable, Vector2D, getCanvas };

package/dist/main.d.ts

@@ -204,15 +204,18 @@ declare class Scene extends Node {
     camera: Camera;
     inputManager: InputManager;
     ctx: CanvasRenderingContext2D;
+    private animationFrameId;
+    private running;
     private lastTime;
     private totalTime;
     constructor(ctx: CanvasRenderingContext2D, opts?: SceneOptions);
     addObject(object: Node): void;
     setup(): void;
     resizeCanvas(): void;
-    update(deltaTime: number): void;
-    draw(ctx: CanvasRenderingContext2D): void;
-    gameLoop(callback?: (deltaTime: number, totalTime: number) => void, targetFPS?: number): void;
+    updateFrame(deltaTime: number): void;
+    drawFrame(ctx: CanvasRenderingContext2D): void;
+    run(callback?: (deltaTime: number, totalTime: number) => void, targetFPS?: number): void;
+    stop(): void;
 }
 
 interface NodeConfig {
@@ -225,39 +228,114 @@ declare class Node {
     id: string;
     children: Node[];
     scene?: Scene;
+    boundingBox?: BoundingBox;
+    update?(dt: number): void;
+    draw?(ctx: CanvasRenderingContext2D, selected?: boolean): void;
     constructor(scene?: Scene, config?: NodeConfig);
     addObject(object: Node): void;
     removeObject(object: Node): void;
     private generateID;
 }
 
+interface CollisionResult {
+    isColliding: boolean;
+    mtv?: Vector2D;
+}
 declare abstract class BoundingBox extends Node {
-    abstract checkCollision(other: BoundingBox): boolean;
+    abstract checkCollision(other: BoundingBox): CollisionResult;
     abstract isPointInside(_point: Vector2D): boolean;
 }
 
+declare class CircleBoundingBox extends BoundingBox {
+    radius: number;
+    constructor(scene?: Scene, radius?: number);
+    checkCollision(other: BoundingBox): CollisionResult;
+    isPointInside(_point: Vector2D): boolean;
+}
+
+declare class SquareBoundingBox extends BoundingBox {
+    size: Vector2D;
+    constructor(scene?: Scene, size?: Vector2D);
+    checkCollision(other: BoundingBox): CollisionResult;
+    isPointInside(_point: Vector2D): boolean;
+}
+
+interface KinematicBodyConfig {
+    speed?: number;
+    friction?: number;
+    maxSpeed?: number;
+}
+declare class KinematicBody extends Node {
+    shape: Node;
+    velocity: Vector2D;
+    speed: number;
+    friction: number;
+    maxSpeed: number;
+    isColliding: boolean;
+    constructor(scene: Scene, shape: Node, config?: KinematicBodyConfig);
+    applyForce(x: number, y: number, dt: number): void;
+    update(dt: number): void;
+    private resolveCollisions;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
+}
+
+declare class StaticBody extends Node {
+    shape: Node;
+    constructor(scene: Scene, shape: Node);
+    update(_dt: number): void;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
+}
+
 interface CircleConfig {
     vel?: Vector2D;
     size?: number;
     friction?: number;
     startsWithBoundingBox?: boolean;
+    style?: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
 }
 declare class Circle extends Node {
     vel: Vector2D;
     size: number;
     friction: number;
-    boundingBox: BoundingBox;
+    style: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
     constructor(scene?: Scene, config?: CircleConfig);
+    update(_deltaTime: number): void;
     draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
-declare class CircleBoundingBox extends BoundingBox {
-    radius: number;
-    constructor(scene?: Scene, radius?: number);
-    checkCollision(other: BoundingBox): boolean;
-    isPointInside(_point: Vector2D): boolean;
+interface SquareConfig {
+    vel?: Vector2D;
+    size?: Vector2D;
+    friction?: number;
+    startsWithBoundingBox?: boolean;
+    style?: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+}
+declare class Square extends Node {
+    vel: Vector2D;
+    size: Vector2D;
+    friction: number;
+    style: {
+        fillStyle?: string;
+        strokeStyle?: string;
+        lineWidth?: number;
+    };
+    constructor(scene?: Scene, config?: SquareConfig);
+    update(_deltaTime: number): void;
+    draw(ctx: CanvasRenderingContext2D, selected?: boolean): void;
 }
 
 declare function getCanvas(id: string): HTMLCanvasElement;
 
-export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type Drawable, Node, type NodeConfig, Scene, type SceneOptions, TWO_PI, type Updatable, Vector2D, getCanvas };
+export { BoundingBox, Camera, Circle, CircleBoundingBox, type CircleConfig, type CollisionResult, type Drawable, KinematicBody, type KinematicBodyConfig, Node, type NodeConfig, Scene, type SceneOptions, Square, SquareBoundingBox, type SquareConfig, StaticBody, TWO_PI, type Updatable, Vector2D, getCanvas };

package/dist/main.js

@@ -24,8 +24,12 @@ __export(main_exports, {
   Camera: () => Camera,
   Circle: () => Circle,
   CircleBoundingBox: () => CircleBoundingBox,
+  KinematicBody: () => KinematicBody,
   Node: () => Node,
-  Scene: () => Scene2,
+  Scene: () => Scene,
+  Square: () => Square,
+  SquareBoundingBox: () => SquareBoundingBox,
+  StaticBody: () => StaticBody,
   TWO_PI: () => TWO_PI,
   Vector2D: () => Vector2D,
   getCanvas: () => getCanvas
@@ -289,13 +293,14 @@ var Vector2D = class _Vector2D {
   }
 };
 
-// src/nodes/Node.ts
+// src/nodes/shapes/Node.ts
 var import_uuid = require("uuid");
 var Node = class {
   pos;
   id;
   children = [];
   scene;
+  boundingBox;
   constructor(scene, config) {
     this.scene = scene;
     const { id, pos } = config || {};
@@ -322,25 +327,54 @@ var Node = class {
   }
 };
 
-// src/nodes/BoundingBox.ts
+// src/nodes/boundingBox/BoundingBox.ts
 var BoundingBox = class extends Node {
 };
 
-// src/nodes/Camera.ts
-var Camera = class extends Node {
-  zoom;
-  constructor(zoom = 1) {
-    super();
-    this.zoom = zoom;
+// src/nodes/boundingBox/SquareBoundingBox.ts
+var SquareBoundingBox = class _SquareBoundingBox extends BoundingBox {
+  size;
+  constructor(scene, size) {
+    super(scene);
+    this.size = size || new Vector2D(10, 10);
   }
-  update(deltaTime) {
+  checkCollision(other) {
+    if (other instanceof _SquareBoundingBox) {
+      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
+      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
+      if (!thisPoint || !otherPoint) return { isColliding: false };
+      const dx = Math.abs(thisPoint.x - otherPoint.x);
+      const dy = Math.abs(thisPoint.y - otherPoint.y);
+      const halfWidths = (this.size.x + other.size.x) / 2;
+      const halfHeights = (this.size.y + other.size.y) / 2;
+      if (dx < halfWidths && dy < halfHeights) {
+        const overlapX = halfWidths - dx;
+        const overlapY = halfHeights - dy;
+        if (overlapX < overlapY) {
+          const mtvX = thisPoint.x < otherPoint.x ? -overlapX : overlapX;
+          return { isColliding: true, mtv: new Vector2D(mtvX, 0) };
+        } else {
+          const mtvY = thisPoint.y < otherPoint.y ? -overlapY : overlapY;
+          return { isColliding: true, mtv: new Vector2D(0, mtvY) };
+        }
+      }
+    }
+    if (other instanceof CircleBoundingBox) {
+      const result = other.checkCollision(this);
+      if (result.isColliding && result.mtv) {
+        return { isColliding: true, mtv: new Vector2D(-result.mtv.x, -result.mtv.y) };
+      }
+    }
+    return { isColliding: false };
   }
-  transformCoordinates(position) {
-    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  isPointInside(_point) {
+    const x_inside = _point.x >= this.pos.x - this.size.x && _point.x <= this.pos.x + this.size.x;
+    const y_inside = _point.y >= this.pos.y - this.size.y && _point.y <= this.pos.y + this.size.y;
+    return x_inside && y_inside;
   }
 };
 
-// src/nodes/CircleBoundingBox.ts
+// src/nodes/boundingBox/CircleBoundingBox.ts
 var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   radius;
   constructor(scene, radius) {
@@ -349,15 +383,28 @@ var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   }
   checkCollision(other) {
     if (other instanceof _CircleBoundingBox) {
-      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
-      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
-      if (!thisPoint || !otherPoint) return false;
-      const dx = thisPoint.x - otherPoint.x;
-      const dy = thisPoint.y - otherPoint.y;
+      const dx = this.pos.x - other.pos.x;
+      const dy = this.pos.y - other.pos.y;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      return distance < this.radius + other.radius;
+      if (distance < this.radius + other.radius) {
+        const overlap = this.radius + other.radius - distance;
+        const mtv = distance === 0 ? new Vector2D(overlap, 0) : new Vector2D(dx / distance * overlap, dy / distance * overlap);
+        return { isColliding: true, mtv };
+      }
     }
-    return false;
+    if (other instanceof SquareBoundingBox) {
+      const closestX = Math.max(other.pos.x - other.size.x / 2, Math.min(this.pos.x, other.pos.x + other.size.x / 2));
+      const closestY = Math.max(other.pos.y - other.size.y / 2, Math.min(this.pos.y, other.pos.y + other.size.y / 2));
+      const dx = this.pos.x - closestX;
+      const dy = this.pos.y - closestY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance < this.radius) {
+        const overlap = this.radius - distance;
+        const mtv = distance === 0 ? new Vector2D(overlap, 0) : new Vector2D(dx / distance * overlap, dy / distance * overlap);
+        return { isColliding: true, mtv };
+      }
+    }
+    return { isColliding: false };
   }
   isPointInside(_point) {
     const point = this.scene?.camera.transformCoordinates(_point);
@@ -369,40 +416,104 @@ var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   }
 };
 
-// src/nodes/Circle.ts
-var Circle = class extends Node {
-  vel = new Vector2D();
-  size = 10;
-  friction = 0.1;
-  boundingBox = new CircleBoundingBox(this.scene, this.size);
-  constructor(scene, config) {
-    super(scene);
-    this.vel = config?.vel || new Vector2D();
-    this.size = config?.size || 10;
-    this.friction = config?.friction || 0.1;
-    if (config?.startsWithBoundingBox) {
-      this.boundingBox = new CircleBoundingBox(scene, this.size);
-      this.addObject(this.boundingBox);
+// src/nodes/Camera.ts
+var Camera = class extends Node {
+  zoom;
+  constructor(zoom = 1) {
+    super();
+    this.zoom = zoom;
+  }
+  update(deltaTime) {
+  }
+  transformCoordinates(position) {
+    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  }
+};
+
+// src/nodes/physics/StaticBody.ts
+var StaticBody = class extends Node {
+  shape;
+  constructor(scene, shape) {
+    super(scene, { pos: shape.pos });
+    this.shape = shape;
+    this.pos = shape.pos;
+  }
+  update(_dt) {
+    if (this.shape.update && typeof this.shape.update === "function") {
+      this.shape.update(_dt);
     }
   }
   draw(ctx, selected) {
-    const cameraPos = this.scene?.camera.pos || new Vector2D();
-    const cameraScale = this.scene?.camera.zoom || 1;
-    const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
-    if (selected) {
-      ctx.beginPath();
-      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
-      ctx.fillStyle = "transparent";
-      ctx.lineWidth = 3;
-      ctx.strokeStyle = "white";
-      ctx.stroke();
-      ctx.closePath();
+    if (this.shape.draw) this.shape.draw(ctx, selected);
+  }
+};
+
+// src/nodes/physics/KinematicBody.ts
+var KinematicBody = class _KinematicBody extends Node {
+  shape;
+  velocity = new Vector2D();
+  speed = 1500;
+  friction = 0.92;
+  maxSpeed = 800;
+  isColliding = false;
+  constructor(scene, shape, config) {
+    super(scene, { pos: shape.pos });
+    this.shape = shape;
+    if (config?.speed) this.speed = config.speed;
+    if (config?.friction) this.friction = config.friction;
+    if (config?.maxSpeed) this.maxSpeed = config.maxSpeed;
+  }
+  applyForce(x, y, dt) {
+    const len = Math.sqrt(x * x + y * y);
+    if (len > 0) {
+      const scale = this.speed * dt / len;
+      this.velocity.x += x * scale;
+      this.velocity.y += y * scale;
+    }
+  }
+  update(dt) {
+    this.velocity.x *= this.friction;
+    this.velocity.y *= this.friction;
+    const currentSpeed = Math.sqrt(this.velocity.x * this.velocity.x + this.velocity.y * this.velocity.y);
+    if (currentSpeed > this.maxSpeed) {
+      const scale = this.maxSpeed / currentSpeed;
+      this.velocity.x *= scale;
+      this.velocity.y *= scale;
+    }
+    if (Math.abs(this.velocity.x) < 0.1) this.velocity.x = 0;
+    if (Math.abs(this.velocity.y) < 0.1) this.velocity.y = 0;
+    this.pos.x += this.velocity.x * dt;
+    this.pos.y += this.velocity.y * dt;
+    this.shape.pos = this.pos;
+    if (this.shape.update) this.shape.update(dt);
+    this.resolveCollisions();
+  }
+  resolveCollisions() {
+    this.isColliding = false;
+    if (!this.shape.boundingBox) return;
+    if (!this.scene) return;
+    for (const obj of this.scene.children) {
+      if (obj === this) continue;
+      let otherBBox = null;
+      if (obj instanceof StaticBody || obj instanceof _KinematicBody) {
+        if (obj.shape.boundingBox) otherBBox = obj.shape.boundingBox;
+      } else {
+        if (obj.boundingBox) otherBBox = obj.boundingBox;
+      }
+      if (otherBBox) {
+        const result = this.shape.boundingBox.checkCollision(otherBBox);
+        if (result.isColliding && result.mtv) {
+          this.isColliding = true;
+          this.pos.x += result.mtv.x;
+          this.pos.y += result.mtv.y;
+          this.shape.pos = this.pos;
+          if (this.shape.boundingBox) this.shape.boundingBox.pos = this.pos;
+        }
+      }
     }
-    ctx.beginPath();
-    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
-    ctx.fillStyle = "blue";
-    ctx.fill();
-    ctx.closePath();
+  }
+  draw(ctx, selected) {
+    if (this.shape.draw) this.shape.draw(ctx, selected);
   }
 };
 
@@ -428,14 +539,14 @@ var InputManager = class extends Node {
     this.mousePos = new Vector2D(event.clientX, event.clientY);
   }
   handleKeyDown(event) {
-    const key = event.key;
+    const key = event.code;
     if (!this.keyState.get(key)) {
       this.keyState.set(key, true);
       this.keyJustPressed.add(key);
     }
   }
   handleKeyUp(event) {
-    const key = event.key;
+    const key = event.code;
     this.keyState.set(key, false);
     this.keyJustPressed.delete(key);
   }
@@ -474,10 +585,12 @@ var InputManager = class extends Node {
 };
 
 // src/nodes/Scene.ts
-var Scene2 = class extends Node {
+var Scene = class extends Node {
   camera;
   inputManager;
   ctx;
+  animationFrameId = null;
+  running = false;
   lastTime = 0;
   totalTime = 0;
   constructor(ctx, opts) {
@@ -502,7 +615,7 @@ var Scene2 = class extends Node {
     canvas.width = width;
     canvas.height = height;
   }
-  update(deltaTime) {
+  updateFrame(deltaTime) {
     this.camera.update(deltaTime);
     this.children.forEach((child) => {
       if (isUpdatable(child)) {
@@ -510,16 +623,20 @@ var Scene2 = class extends Node {
       }
     });
   }
-  draw(ctx) {
-    ctx.fillStyle = ctx.canvas.style.backgroundColor;
+  drawFrame(ctx) {
+    ctx.fillStyle = ctx.canvas.style.backgroundColor || "black";
     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.save();
+    ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
     this.children.forEach((child) => {
       if (isDrawable(child)) {
         child.draw(ctx);
       }
     });
+    ctx.restore();
   }
-  gameLoop(callback, targetFPS = 60) {
+  run(callback, targetFPS = 60) {
+    this.running = true;
     const frameInterval = 1e3 / targetFPS;
     let lastFrameTime = 0;
     const loop = (currentTime) => {
@@ -530,8 +647,8 @@ var Scene2 = class extends Node {
           this.lastTime = currentTime;
           this.totalTime += deltaTime;
           lastFrameTime = currentTime - elapsed % frameInterval;
-          this.update(deltaTime);
-          this.draw(this.ctx);
+          this.updateFrame(deltaTime);
+          this.drawFrame(this.ctx);
           if (callback) {
             callback(deltaTime, this.totalTime);
           }
@@ -543,7 +660,14 @@ var Scene2 = class extends Node {
       requestAnimationFrame(loop);
     };
     this.lastTime = performance.now();
-    requestAnimationFrame(loop);
+    this.animationFrameId = requestAnimationFrame(loop);
+  }
+  stop() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.running = false;
   }
 };
 function isUpdatable(obj) {
@@ -553,6 +677,118 @@ function isDrawable(obj) {
   return "draw" in obj;
 }
 
+// src/nodes/shapes/Circle.ts
+var Circle = class extends Node {
+  vel = new Vector2D();
+  size = 10;
+  friction = 0.1;
+  style = {
+    fillStyle: "blue"
+  };
+  constructor(scene, config) {
+    super(scene);
+    this.vel = config?.vel || new Vector2D();
+    this.size = config?.size || 10;
+    this.friction = config?.friction || 0.1;
+    this.style = { ...this.style, ...config?.style };
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new CircleBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
+  }
+  update(_deltaTime) {
+    if (this.boundingBox) {
+      this.boundingBox.pos = this.pos;
+    }
+  }
+  draw(ctx, selected) {
+    const cameraPos = this.scene?.camera.pos || new Vector2D();
+    const cameraScale = this.scene?.camera.zoom || 1;
+    const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
+    if (selected) {
+      ctx.beginPath();
+      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
+      ctx.fillStyle = "transparent";
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = "white";
+      ctx.stroke();
+      ctx.closePath();
+    }
+    ctx.beginPath();
+    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
+    ctx.fillStyle = this.style.fillStyle || "blue";
+    ctx.fill();
+    if (this.style.strokeStyle) {
+      ctx.strokeStyle = this.style.strokeStyle;
+      ctx.lineWidth = this.style.lineWidth || 1;
+      ctx.stroke();
+    }
+    ctx.closePath();
+  }
+};
+
+// src/nodes/shapes/Square.ts
+var Square = class extends Node {
+  vel = new Vector2D();
+  size;
+  friction = 0.1;
+  style = {
+    fillStyle: "orange"
+  };
+  constructor(scene, config) {
+    super(scene);
+    this.vel = config?.vel || new Vector2D();
+    this.size = config?.size || new Vector2D(10, 10);
+    this.friction = config?.friction || 0.1;
+    this.style = { ...this.style, ...config?.style };
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new SquareBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
+  }
+  update(_deltaTime) {
+    if (this.boundingBox) {
+      this.boundingBox.pos = this.pos;
+    }
+  }
+  draw(ctx, selected) {
+    const cameraPos = this.scene?.camera.pos || new Vector2D();
+    const cameraScale = this.scene?.camera.zoom || 1;
+    const relativePos = new Vector2D(
+      (this.pos.x - cameraPos.x) * cameraScale,
+      (this.pos.y - cameraPos.y) * cameraScale
+    );
+    const scaledSize = new Vector2D(this.size.x * cameraScale, this.size.y * cameraScale);
+    if (selected) {
+      ctx.strokeStyle = "white";
+      ctx.lineWidth = 3;
+      ctx.strokeRect(
+        relativePos.x - scaledSize.x / 2 - 5,
+        relativePos.y - scaledSize.y / 2 - 5,
+        scaledSize.x + 10,
+        scaledSize.y + 10
+      );
+    }
+    ctx.fillStyle = this.style.fillStyle || "orange";
+    ctx.fillRect(
+      relativePos.x - scaledSize.x / 2,
+      relativePos.y - scaledSize.y / 2,
+      scaledSize.x,
+      scaledSize.y
+    );
+    if (this.style.strokeStyle) {
+      ctx.strokeStyle = this.style.strokeStyle;
+      ctx.lineWidth = this.style.lineWidth || 1;
+      ctx.strokeRect(
+        relativePos.x - scaledSize.x / 2,
+        relativePos.y - scaledSize.y / 2,
+        scaledSize.x,
+        scaledSize.y
+      );
+    }
+  }
+};
+
 // src/main.ts
 function getCanvas(id) {
   const canvas = document.getElementById(id);
@@ -567,8 +803,12 @@ function getCanvas(id) {
   Camera,
   Circle,
   CircleBoundingBox,
+  KinematicBody,
   Node,
   Scene,
+  Square,
+  SquareBoundingBox,
+  StaticBody,
   TWO_PI,
   Vector2D,
   getCanvas

package/dist/main.mjs

@@ -255,13 +255,14 @@ var Vector2D = class _Vector2D {
   }
 };
 
-// src/nodes/Node.ts
+// src/nodes/shapes/Node.ts
 import { v4 as uuidv4 } from "uuid";
 var Node = class {
   pos;
   id;
   children = [];
   scene;
+  boundingBox;
   constructor(scene, config) {
     this.scene = scene;
     const { id, pos } = config || {};
@@ -288,25 +289,54 @@ var Node = class {
   }
 };
 
-// src/nodes/BoundingBox.ts
+// src/nodes/boundingBox/BoundingBox.ts
 var BoundingBox = class extends Node {
 };
 
-// src/nodes/Camera.ts
-var Camera = class extends Node {
-  zoom;
-  constructor(zoom = 1) {
-    super();
-    this.zoom = zoom;
+// src/nodes/boundingBox/SquareBoundingBox.ts
+var SquareBoundingBox = class _SquareBoundingBox extends BoundingBox {
+  size;
+  constructor(scene, size) {
+    super(scene);
+    this.size = size || new Vector2D(10, 10);
   }
-  update(deltaTime) {
+  checkCollision(other) {
+    if (other instanceof _SquareBoundingBox) {
+      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
+      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
+      if (!thisPoint || !otherPoint) return { isColliding: false };
+      const dx = Math.abs(thisPoint.x - otherPoint.x);
+      const dy = Math.abs(thisPoint.y - otherPoint.y);
+      const halfWidths = (this.size.x + other.size.x) / 2;
+      const halfHeights = (this.size.y + other.size.y) / 2;
+      if (dx < halfWidths && dy < halfHeights) {
+        const overlapX = halfWidths - dx;
+        const overlapY = halfHeights - dy;
+        if (overlapX < overlapY) {
+          const mtvX = thisPoint.x < otherPoint.x ? -overlapX : overlapX;
+          return { isColliding: true, mtv: new Vector2D(mtvX, 0) };
+        } else {
+          const mtvY = thisPoint.y < otherPoint.y ? -overlapY : overlapY;
+          return { isColliding: true, mtv: new Vector2D(0, mtvY) };
+        }
+      }
+    }
+    if (other instanceof CircleBoundingBox) {
+      const result = other.checkCollision(this);
+      if (result.isColliding && result.mtv) {
+        return { isColliding: true, mtv: new Vector2D(-result.mtv.x, -result.mtv.y) };
+      }
+    }
+    return { isColliding: false };
   }
-  transformCoordinates(position) {
-    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  isPointInside(_point) {
+    const x_inside = _point.x >= this.pos.x - this.size.x && _point.x <= this.pos.x + this.size.x;
+    const y_inside = _point.y >= this.pos.y - this.size.y && _point.y <= this.pos.y + this.size.y;
+    return x_inside && y_inside;
   }
 };
 
-// src/nodes/CircleBoundingBox.ts
+// src/nodes/boundingBox/CircleBoundingBox.ts
 var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   radius;
   constructor(scene, radius) {
@@ -315,15 +345,28 @@ var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   }
   checkCollision(other) {
     if (other instanceof _CircleBoundingBox) {
-      const thisPoint = this.scene?.camera.transformCoordinates(new Vector2D(this.pos.x, this.pos.y));
-      const otherPoint = this.scene?.camera.transformCoordinates(new Vector2D(other.pos.x, other.pos.y));
-      if (!thisPoint || !otherPoint) return false;
-      const dx = thisPoint.x - otherPoint.x;
-      const dy = thisPoint.y - otherPoint.y;
+      const dx = this.pos.x - other.pos.x;
+      const dy = this.pos.y - other.pos.y;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      return distance < this.radius + other.radius;
+      if (distance < this.radius + other.radius) {
+        const overlap = this.radius + other.radius - distance;
+        const mtv = distance === 0 ? new Vector2D(overlap, 0) : new Vector2D(dx / distance * overlap, dy / distance * overlap);
+        return { isColliding: true, mtv };
+      }
     }
-    return false;
+    if (other instanceof SquareBoundingBox) {
+      const closestX = Math.max(other.pos.x - other.size.x / 2, Math.min(this.pos.x, other.pos.x + other.size.x / 2));
+      const closestY = Math.max(other.pos.y - other.size.y / 2, Math.min(this.pos.y, other.pos.y + other.size.y / 2));
+      const dx = this.pos.x - closestX;
+      const dy = this.pos.y - closestY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance < this.radius) {
+        const overlap = this.radius - distance;
+        const mtv = distance === 0 ? new Vector2D(overlap, 0) : new Vector2D(dx / distance * overlap, dy / distance * overlap);
+        return { isColliding: true, mtv };
+      }
+    }
+    return { isColliding: false };
   }
   isPointInside(_point) {
     const point = this.scene?.camera.transformCoordinates(_point);
@@ -335,40 +378,104 @@ var CircleBoundingBox = class _CircleBoundingBox extends BoundingBox {
   }
 };
 
-// src/nodes/Circle.ts
-var Circle = class extends Node {
-  vel = new Vector2D();
-  size = 10;
-  friction = 0.1;
-  boundingBox = new CircleBoundingBox(this.scene, this.size);
-  constructor(scene, config) {
-    super(scene);
-    this.vel = config?.vel || new Vector2D();
-    this.size = config?.size || 10;
-    this.friction = config?.friction || 0.1;
-    if (config?.startsWithBoundingBox) {
-      this.boundingBox = new CircleBoundingBox(scene, this.size);
-      this.addObject(this.boundingBox);
+// src/nodes/Camera.ts
+var Camera = class extends Node {
+  zoom;
+  constructor(zoom = 1) {
+    super();
+    this.zoom = zoom;
+  }
+  update(deltaTime) {
+  }
+  transformCoordinates(position) {
+    return new Vector2D((position.x - this.pos.x) * this.zoom, (position.y - this.pos.y) * this.zoom);
+  }
+};
+
+// src/nodes/physics/StaticBody.ts
+var StaticBody = class extends Node {
+  shape;
+  constructor(scene, shape) {
+    super(scene, { pos: shape.pos });
+    this.shape = shape;
+    this.pos = shape.pos;
+  }
+  update(_dt) {
+    if (this.shape.update && typeof this.shape.update === "function") {
+      this.shape.update(_dt);
     }
   }
   draw(ctx, selected) {
-    const cameraPos = this.scene?.camera.pos || new Vector2D();
-    const cameraScale = this.scene?.camera.zoom || 1;
-    const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
-    if (selected) {
-      ctx.beginPath();
-      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
-      ctx.fillStyle = "transparent";
-      ctx.lineWidth = 3;
-      ctx.strokeStyle = "white";
-      ctx.stroke();
-      ctx.closePath();
+    if (this.shape.draw) this.shape.draw(ctx, selected);
+  }
+};
+
+// src/nodes/physics/KinematicBody.ts
+var KinematicBody = class _KinematicBody extends Node {
+  shape;
+  velocity = new Vector2D();
+  speed = 1500;
+  friction = 0.92;
+  maxSpeed = 800;
+  isColliding = false;
+  constructor(scene, shape, config) {
+    super(scene, { pos: shape.pos });
+    this.shape = shape;
+    if (config?.speed) this.speed = config.speed;
+    if (config?.friction) this.friction = config.friction;
+    if (config?.maxSpeed) this.maxSpeed = config.maxSpeed;
+  }
+  applyForce(x, y, dt) {
+    const len = Math.sqrt(x * x + y * y);
+    if (len > 0) {
+      const scale = this.speed * dt / len;
+      this.velocity.x += x * scale;
+      this.velocity.y += y * scale;
+    }
+  }
+  update(dt) {
+    this.velocity.x *= this.friction;
+    this.velocity.y *= this.friction;
+    const currentSpeed = Math.sqrt(this.velocity.x * this.velocity.x + this.velocity.y * this.velocity.y);
+    if (currentSpeed > this.maxSpeed) {
+      const scale = this.maxSpeed / currentSpeed;
+      this.velocity.x *= scale;
+      this.velocity.y *= scale;
+    }
+    if (Math.abs(this.velocity.x) < 0.1) this.velocity.x = 0;
+    if (Math.abs(this.velocity.y) < 0.1) this.velocity.y = 0;
+    this.pos.x += this.velocity.x * dt;
+    this.pos.y += this.velocity.y * dt;
+    this.shape.pos = this.pos;
+    if (this.shape.update) this.shape.update(dt);
+    this.resolveCollisions();
+  }
+  resolveCollisions() {
+    this.isColliding = false;
+    if (!this.shape.boundingBox) return;
+    if (!this.scene) return;
+    for (const obj of this.scene.children) {
+      if (obj === this) continue;
+      let otherBBox = null;
+      if (obj instanceof StaticBody || obj instanceof _KinematicBody) {
+        if (obj.shape.boundingBox) otherBBox = obj.shape.boundingBox;
+      } else {
+        if (obj.boundingBox) otherBBox = obj.boundingBox;
+      }
+      if (otherBBox) {
+        const result = this.shape.boundingBox.checkCollision(otherBBox);
+        if (result.isColliding && result.mtv) {
+          this.isColliding = true;
+          this.pos.x += result.mtv.x;
+          this.pos.y += result.mtv.y;
+          this.shape.pos = this.pos;
+          if (this.shape.boundingBox) this.shape.boundingBox.pos = this.pos;
+        }
+      }
     }
-    ctx.beginPath();
-    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
-    ctx.fillStyle = "blue";
-    ctx.fill();
-    ctx.closePath();
+  }
+  draw(ctx, selected) {
+    if (this.shape.draw) this.shape.draw(ctx, selected);
   }
 };
 
@@ -394,14 +501,14 @@ var InputManager = class extends Node {
     this.mousePos = new Vector2D(event.clientX, event.clientY);
   }
   handleKeyDown(event) {
-    const key = event.key;
+    const key = event.code;
     if (!this.keyState.get(key)) {
       this.keyState.set(key, true);
       this.keyJustPressed.add(key);
     }
   }
   handleKeyUp(event) {
-    const key = event.key;
+    const key = event.code;
     this.keyState.set(key, false);
     this.keyJustPressed.delete(key);
   }
@@ -440,10 +547,12 @@ var InputManager = class extends Node {
 };
 
 // src/nodes/Scene.ts
-var Scene2 = class extends Node {
+var Scene = class extends Node {
   camera;
   inputManager;
   ctx;
+  animationFrameId = null;
+  running = false;
   lastTime = 0;
   totalTime = 0;
   constructor(ctx, opts) {
@@ -468,7 +577,7 @@ var Scene2 = class extends Node {
     canvas.width = width;
     canvas.height = height;
   }
-  update(deltaTime) {
+  updateFrame(deltaTime) {
     this.camera.update(deltaTime);
     this.children.forEach((child) => {
       if (isUpdatable(child)) {
@@ -476,16 +585,20 @@ var Scene2 = class extends Node {
       }
     });
   }
-  draw(ctx) {
-    ctx.fillStyle = ctx.canvas.style.backgroundColor;
+  drawFrame(ctx) {
+    ctx.fillStyle = ctx.canvas.style.backgroundColor || "black";
     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.save();
+    ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
     this.children.forEach((child) => {
       if (isDrawable(child)) {
         child.draw(ctx);
       }
     });
+    ctx.restore();
   }
-  gameLoop(callback, targetFPS = 60) {
+  run(callback, targetFPS = 60) {
+    this.running = true;
     const frameInterval = 1e3 / targetFPS;
     let lastFrameTime = 0;
     const loop = (currentTime) => {
@@ -496,8 +609,8 @@ var Scene2 = class extends Node {
           this.lastTime = currentTime;
           this.totalTime += deltaTime;
           lastFrameTime = currentTime - elapsed % frameInterval;
-          this.update(deltaTime);
-          this.draw(this.ctx);
+          this.updateFrame(deltaTime);
+          this.drawFrame(this.ctx);
           if (callback) {
             callback(deltaTime, this.totalTime);
           }
@@ -509,7 +622,14 @@ var Scene2 = class extends Node {
       requestAnimationFrame(loop);
     };
     this.lastTime = performance.now();
-    requestAnimationFrame(loop);
+    this.animationFrameId = requestAnimationFrame(loop);
+  }
+  stop() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.running = false;
   }
 };
 function isUpdatable(obj) {
@@ -519,6 +639,118 @@ function isDrawable(obj) {
   return "draw" in obj;
 }
 
+// src/nodes/shapes/Circle.ts
+var Circle = class extends Node {
+  vel = new Vector2D();
+  size = 10;
+  friction = 0.1;
+  style = {
+    fillStyle: "blue"
+  };
+  constructor(scene, config) {
+    super(scene);
+    this.vel = config?.vel || new Vector2D();
+    this.size = config?.size || 10;
+    this.friction = config?.friction || 0.1;
+    this.style = { ...this.style, ...config?.style };
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new CircleBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
+  }
+  update(_deltaTime) {
+    if (this.boundingBox) {
+      this.boundingBox.pos = this.pos;
+    }
+  }
+  draw(ctx, selected) {
+    const cameraPos = this.scene?.camera.pos || new Vector2D();
+    const cameraScale = this.scene?.camera.zoom || 1;
+    const relativePos = new Vector2D((this.pos.x - cameraPos.x) * cameraScale, (this.pos.y - cameraPos.y) * cameraScale);
+    if (selected) {
+      ctx.beginPath();
+      ctx.arc(relativePos.x, relativePos.y, this.size + 5, 0, Math.PI * 2);
+      ctx.fillStyle = "transparent";
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = "white";
+      ctx.stroke();
+      ctx.closePath();
+    }
+    ctx.beginPath();
+    ctx.arc(relativePos.x, relativePos.y, this.size, 0, Math.PI * 2);
+    ctx.fillStyle = this.style.fillStyle || "blue";
+    ctx.fill();
+    if (this.style.strokeStyle) {
+      ctx.strokeStyle = this.style.strokeStyle;
+      ctx.lineWidth = this.style.lineWidth || 1;
+      ctx.stroke();
+    }
+    ctx.closePath();
+  }
+};
+
+// src/nodes/shapes/Square.ts
+var Square = class extends Node {
+  vel = new Vector2D();
+  size;
+  friction = 0.1;
+  style = {
+    fillStyle: "orange"
+  };
+  constructor(scene, config) {
+    super(scene);
+    this.vel = config?.vel || new Vector2D();
+    this.size = config?.size || new Vector2D(10, 10);
+    this.friction = config?.friction || 0.1;
+    this.style = { ...this.style, ...config?.style };
+    if (config?.startsWithBoundingBox) {
+      this.boundingBox = new SquareBoundingBox(scene, this.size);
+      this.addObject(this.boundingBox);
+    }
+  }
+  update(_deltaTime) {
+    if (this.boundingBox) {
+      this.boundingBox.pos = this.pos;
+    }
+  }
+  draw(ctx, selected) {
+    const cameraPos = this.scene?.camera.pos || new Vector2D();
+    const cameraScale = this.scene?.camera.zoom || 1;
+    const relativePos = new Vector2D(
+      (this.pos.x - cameraPos.x) * cameraScale,
+      (this.pos.y - cameraPos.y) * cameraScale
+    );
+    const scaledSize = new Vector2D(this.size.x * cameraScale, this.size.y * cameraScale);
+    if (selected) {
+      ctx.strokeStyle = "white";
+      ctx.lineWidth = 3;
+      ctx.strokeRect(
+        relativePos.x - scaledSize.x / 2 - 5,
+        relativePos.y - scaledSize.y / 2 - 5,
+        scaledSize.x + 10,
+        scaledSize.y + 10
+      );
+    }
+    ctx.fillStyle = this.style.fillStyle || "orange";
+    ctx.fillRect(
+      relativePos.x - scaledSize.x / 2,
+      relativePos.y - scaledSize.y / 2,
+      scaledSize.x,
+      scaledSize.y
+    );
+    if (this.style.strokeStyle) {
+      ctx.strokeStyle = this.style.strokeStyle;
+      ctx.lineWidth = this.style.lineWidth || 1;
+      ctx.strokeRect(
+        relativePos.x - scaledSize.x / 2,
+        relativePos.y - scaledSize.y / 2,
+        scaledSize.x,
+        scaledSize.y
+      );
+    }
+  }
+};
+
 // src/main.ts
 function getCanvas(id) {
   const canvas = document.getElementById(id);
@@ -532,8 +764,12 @@ export {
   Camera,
   Circle,
   CircleBoundingBox,
+  KinematicBody,
   Node,
-  Scene2 as Scene,
+  Scene,
+  Square,
+  SquareBoundingBox,
+  StaticBody,
   TWO_PI,
   Vector2D,
   getCanvas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiant/canvable",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A tool for building canvas apps",
   "main": "./dist/main.js",
   "module": "./dist/main.mjs",