jygame 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# jygame
+
+A lightweight 2D game framework for the browser.
+
+```js
+import { Game, Scene, Sprite } from "jygame";
+
+class MyScene extends Scene {
+  constructor() {
+    super();
+    this.player = new Sprite(100, 100, 32, 32);
+    this.player.style.fill = "#ff6600";
+    this.root.appendChild(this.player.rect);
+  }
+
+  update(dt) {
+    this.player.velocity.x = 0;
+    this.player.velocity.y = 0;
+    if (Input.isDown("RIGHT")) this.player.velocity.x = 200;
+    if (Input.isDown("LEFT")) this.player.velocity.x = -200;
+    if (Input.isDown("UP")) this.player.velocity.y = -200;
+    if (Input.isDown("DOWN")) this.player.velocity.y = 200;
+    this.player.update(dt);
+  }
+
+  render(ctx) {
+    this.player.render(ctx);
+  }
+}
+
+const game = new Game({ parent: document.body, width: 800, height: 600 });
+game.run(new MyScene());
+```
+
+## Install
+
+```sh
+npm install jygame
+```
+
+## API
+
+| Import | Description |
+|---|---|
+| `Game` | Main game loop with fixed timestep, canvas setup, UI layer, and scene management |
+| `Scene` | Lifecycle hooks: `enter`, `exit`, `pause`, `resume`, `update`, `render`, `renderUI` |
+| `Sprite` | Drawable with position, velocity, angle, scale, images, and shape styles |
+| `Group` | Collection of sprites with batch update/render/collision methods |
+| `Vec2` | 2D vector with add, sub, scale, dot, normalize, rotate, lerp |
+| `Rect` | AABB rectangle with collision, containment, overlap, and anchor helpers |
+| `Clock` | Fixed-timestep accumulator for deterministic updates |
+| `Timer` | Countdown timer with optional looping |
+| `Input` | Keyboard (WASD/arrows) and touch (swipe/tap) input handling |
+| `Collision` | AABB, circle, point-rect, rect-circle, and group collision detection |
+| `State` | Observable state container with subscribe/unsubscribe |
+| `Storage` | `localStorage` wrapper with JSON serialization |
+| `ImageLoader` | Image preloading with in-memory cache |
+| `FontLoader` | FontFace loading for custom web fonts |
+
+## License
+
+GNU General Public License v3.0

package/assets/FontLoader.js

@@ -0,0 +1,23 @@
+const _loaded = new Set();
+
+export const FontLoader = {
+  async load(family, path) {
+    if (_loaded.has(family)) return;
+
+    const font = new FontFace(family, `url(${path})`);
+    await font.load();
+    document.fonts.add(font);
+    _loaded.add(family);
+  },
+
+  async loadAll(map) {
+    const entries = Object.entries(map);
+    await Promise.all(
+      entries.map(([family, path]) => this.load(family, path))
+    );
+  },
+
+  isLoaded(family) {
+    return _loaded.has(family);
+  },
+};

package/assets/ImageLoader.js

@@ -0,0 +1,37 @@
+const _cache = new Map();
+
+export const ImageLoader = {
+  load(path) {
+    if (_cache.has(path)) return Promise.resolve(_cache.get(path));
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        _cache.set(path, img);
+        resolve(img);
+      };
+      img.onerror = () => reject(new Error(`Failed to load image: ${path}`));
+      img.src = path;
+    });
+  },
+
+  loadAll(map) {
+    const entries = Object.entries(map);
+    return Promise.all(
+      entries.map(([key, path]) =>
+        this.load(path).then((img) => {
+          _cache.set(key, img);
+          return [key, img];
+        })
+      )
+    ).then((results) => Object.fromEntries(results));
+  },
+
+  get(key) {
+    return _cache.get(key) || null;
+  },
+
+  has(key) {
+    return _cache.has(key);
+  },
+};

package/collision/Collision.js

@@ -0,0 +1,51 @@
+export const Collision = {
+  rectRect(a, b) {
+    return a.collides(b);
+  },
+
+  circleCircle(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    const r = a.radius + b.radius;
+    return dx * dx + dy * dy <= r * r;
+  },
+
+  pointInRect(point, rect) {
+    return rect.contains(point);
+  },
+
+  rectCircle(rect, circle) {
+    const cx = circle.x;
+    const cy = circle.y;
+    const r = circle.radius;
+    const nearX = Math.max(rect.left, Math.min(cx, rect.right));
+    const nearY = Math.max(rect.top, Math.min(cy, rect.bottom));
+    const dx = cx - nearX;
+    const dy = cy - nearY;
+    return dx * dx + dy * dy <= r * r;
+  },
+
+  groupRect(group, rect) {
+    const hits = [];
+    for (const sprite of group._sprites) {
+      if (sprite.visible && Collision.rectRect(sprite.rect, rect)) {
+        hits.push(sprite);
+      }
+    }
+    return hits;
+  },
+
+  groupGroup(a, b) {
+    const pairs = [];
+    for (const sa of a._sprites) {
+      if (!sa.visible) continue;
+      for (const sb of b._sprites) {
+        if (!sb.visible) continue;
+        if (Collision.rectRect(sa.rect, sb.rect)) {
+          pairs.push([sa, sb]);
+        }
+      }
+    }
+    return pairs;
+  },
+};

package/core/Game.js

@@ -0,0 +1,147 @@
+import { Clock } from "../time/Clock.js";
+import { Input } from "../input/Input.js";
+
+export class Game {
+  constructor({ parent, width, height, fps = 60 }) {
+    const container = typeof parent === "string"
+      ? document.querySelector(parent)
+      : parent;
+
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.canvas.style.display = "block";
+    container.appendChild(this.canvas);
+
+    this.domLayer = document.createElement("div");
+    this.domLayer.className = "jygame-ui";
+    this.domLayer.style.position = "absolute";
+    this.domLayer.style.top = "0";
+    this.domLayer.style.left = "0";
+    this.domLayer.style.width = "100%";
+    this.domLayer.style.height = "100%";
+    container.appendChild(this.domLayer);
+
+    if (getComputedStyle(container).position === "static") {
+      container.style.position = "relative";
+    }
+
+    this.ctx = this.canvas.getContext("2d");
+    this.width = width;
+    this.height = height;
+    this.clock = new Clock(fps);
+    this.scene = null;
+    this._running = false;
+    this._paused = false;
+    this._lastTime = 0;
+    this._rafId = null;
+    this.fps = 60;
+
+    Input.init();
+  }
+
+  get isPaused() {
+    return this._paused;
+  }
+
+  pause() {
+    if (this._paused) return;
+    this._paused = true;
+    this.scene?.pause?.();
+  }
+
+  resume() {
+    if (!this._paused) return;
+    this._paused = false;
+    this.scene?.resume?.();
+  }
+
+  togglePause() {
+    this._paused ? this.resume() : this.pause();
+  }
+
+  run(scene) {
+    this.domLayer.append(scene.root);
+    scene.dom = scene.root;
+    scene.game = this;
+    this.scene = scene;
+    this.clock.reset();
+    scene.enter();
+    this._applyUI(scene);
+    this._running = true;
+    this._lastTime = performance.now();
+    this._rafId = requestAnimationFrame((t) => this._loop(t));
+  }
+
+  switchScene(scene) {
+    this._paused = false;
+    this.scene.exit();
+    this.scene.root.remove();
+    Input.updateFrame();
+    this.domLayer.append(scene.root);
+    scene.dom = scene.root;
+    scene.game = this;
+    this.scene = scene;
+    this.clock.reset();
+    scene.enter();
+    this._applyUI(scene);
+  }
+
+  refreshUI() {
+    this._applyUI(this.scene);
+  }
+
+  patchUI(updates) {
+    const root = this.scene?.root;
+    if (!root) return;
+    for (const [id, content] of Object.entries(updates)) {
+      const el = root.querySelector("#" + id);
+      if (el && el.textContent !== String(content)) {
+        el.textContent = content;
+      }
+    }
+  }
+
+  _applyUI(scene) {
+    const html = scene.renderUI();
+    if (html !== undefined && html !== null) {
+      scene.root.innerHTML = html;
+    }
+  }
+
+  _loop(time) {
+    if (!this._running) return;
+
+    const realDt = (time - this._lastTime) / 1000;
+    this._lastTime = time;
+
+    const ticks = this.clock.tick(realDt);
+
+    if (ticks > 0) {
+      this.scene.update(this.clock.fixedDt);
+      Input.clearJustPressed();
+      for (let i = 1; i < ticks; i++) {
+        if (this._paused) break;
+        this.scene.update(this.clock.fixedDt);
+      }
+    } else {
+      this.scene.update(0);
+    }
+
+    Input.updateFrame();
+
+    this.fps += ((1 / Math.max(realDt, 0.001)) - this.fps) * 0.05;
+
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.scene.render(this.ctx);
+
+    this._rafId = requestAnimationFrame((t) => this._loop(t));
+  }
+
+  destroy() {
+    this._running = false;
+    if (this._rafId) cancelAnimationFrame(this._rafId);
+    this.scene.exit();
+    Input.destroy();
+  }
+}

package/core/Scene.js

@@ -0,0 +1,17 @@
+export class Scene {
+  constructor() {
+    this.dom = null;
+    this.root = document.createElement("div");
+  }
+  enter() {}
+  exit() {}
+  pause() {}
+  resume() {}
+  update(dt) {}
+  render(ctx) {}
+  renderUI() {}
+
+  transitionTo(scene) {
+    if (this.game) this.game.switchScene(scene);
+  }
+}

package/display/Group.js

@@ -0,0 +1,107 @@
+export class Group {
+  constructor() {
+    this._sprites = [];
+  }
+
+  add(sprite) {
+    if (this._sprites.includes(sprite)) return;
+    this._sprites.push(sprite);
+    sprite.groups.push(this);
+  }
+
+  remove(sprite) {
+    const idx = this._sprites.indexOf(sprite);
+    if (idx === -1) return;
+    this._sprites.splice(idx, 1);
+    const gidx = sprite.groups.indexOf(this);
+    if (gidx !== -1) sprite.groups.splice(gidx, 1);
+  }
+
+  has(sprite) {
+    return this._sprites.includes(sprite);
+  }
+
+  clear() {
+    for (const sprite of this._sprites) {
+      const gidx = sprite.groups.indexOf(this);
+      if (gidx !== -1) sprite.groups.splice(gidx, 1);
+    }
+    this._sprites = [];
+  }
+
+  get length() {
+    return this._sprites.length;
+  }
+
+  update(dt) {
+    for (const sprite of this._sprites) {
+      sprite.update(dt);
+    }
+  }
+
+  render(ctx) {
+    for (const sprite of this._sprites) {
+      sprite.render(ctx);
+    }
+  }
+
+  collideRect(rect) {
+    const hits = [];
+    for (const sprite of this._sprites) {
+      if (!sprite.visible) continue;
+      if (sprite.rect.collides(rect)) {
+        hits.push(sprite);
+      }
+    }
+    return hits;
+  }
+
+  collidePoint(point) {
+    const hits = [];
+    for (const sprite of this._sprites) {
+      if (!sprite.visible) continue;
+      if (sprite.rect.contains(point)) {
+        hits.push(sprite);
+      }
+    }
+    return hits;
+  }
+
+  collideGroup(other) {
+    const pairs = [];
+    for (const sa of this._sprites) {
+      if (!sa.visible) continue;
+      for (const sb of other._sprites) {
+        if (!sb.visible) continue;
+        if (sa.rect.collides(sb.rect)) {
+          pairs.push([sa, sb]);
+        }
+      }
+    }
+    return pairs;
+  }
+
+  collideSprite(sprite) {
+    const hits = [];
+    if (!sprite.visible) return hits;
+    for (const s of this._sprites) {
+      if (!s.visible) continue;
+      if (s.rect.collides(sprite.rect)) {
+        hits.push(s);
+      }
+    }
+    return hits;
+  }
+
+  forEach(fn) {
+    this._sprites.forEach(fn);
+  }
+
+  filter(fn) {
+    return this._sprites.filter(fn);
+  }
+
+  map(fn) {
+    return this._sprites.map(fn);
+  }
+}

package/display/Sprite.js

@@ -0,0 +1,80 @@
+import { Rect } from "../geometry/Rect.js";
+import { Vec2 } from "../math/Vec2.js";
+
+export class Sprite {
+  constructor(x, y, w, h) {
+    this.rect = new Rect(x, y, w, h);
+    this.position = new Vec2(x, y);
+    this.velocity = new Vec2(0, 0);
+    this.angle = 0;
+    this.scale = new Vec2(1, 1);
+    this.visible = true;
+    this.groups = [];
+    this.image = null;
+    this.style = {
+      fill: "#ffffff",
+      shape: "rect",
+    };
+  }
+
+  get x() { return this.rect.x; }
+  set x(v) { this.rect.x = v; }
+  get y() { return this.rect.y; }
+  set y(v) { this.rect.y = v; }
+  get width() { return this.rect.w; }
+  set width(v) { this.rect.w = v; }
+  get height() { return this.rect.h; }
+  set height(v) { this.rect.h = v; }
+
+  update(dt) {
+    this.rect.x += this.velocity.x * dt;
+    this.rect.y += this.velocity.y * dt;
+    this.position.x = this.rect.centerx;
+    this.position.y = this.rect.centery;
+  }
+
+  render(ctx) {
+    if (!this.visible) return;
+
+    ctx.save();
+    ctx.translate(this.rect.centerx, this.rect.centery);
+    ctx.rotate(this.angle);
+    ctx.scale(this.scale.x, this.scale.y);
+    this.draw(ctx);
+    ctx.restore();
+  }
+
+  draw(ctx) {
+    const hw = this.rect.w / 2;
+    const hh = this.rect.h / 2;
+
+    if (this.image) {
+      ctx.drawImage(this.image, -hw, -hh, this.rect.w, this.rect.h);
+      return;
+    }
+
+    const s = this.style;
+    if (!s.fill) return;
+
+    ctx.fillStyle = s.fill;
+
+    if (s.shape === "circle") {
+      ctx.beginPath();
+      ctx.arc(0, 0, Math.min(hw, hh), 0, Math.PI * 2);
+      ctx.fill();
+    } else if (s.shape === "ellipse") {
+      ctx.beginPath();
+      ctx.ellipse(0, 0, hw, hh, 0, 0, Math.PI * 2);
+      ctx.fill();
+    } else {
+      ctx.fillRect(-hw, -hh, this.rect.w, this.rect.h);
+    }
+  }
+
+  kill() {
+    for (const group of this.groups) {
+      group.remove(this);
+    }
+    this.groups = [];
+  }
+}

package/geometry/Rect.js

@@ -0,0 +1,96 @@
+export class Rect {
+  constructor(x = 0, y = 0, w = 0, h = 0) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+    this.h = h;
+  }
+
+  get left() { return this.x; }
+  set left(v) { this.x = v; }
+  get right() { return this.x + this.w; }
+  set right(v) { this.x = v - this.w; }
+  get top() { return this.y; }
+  set top(v) { this.y = v; }
+  get bottom() { return this.y + this.h; }
+  set bottom(v) { this.y = v - this.h; }
+
+  get centerx() { return this.x + this.w / 2; }
+  set centerx(v) { this.x = v - this.w / 2; }
+  get centery() { return this.y + this.h / 2; }
+  set centery(v) { this.y = v - this.h / 2; }
+
+  get topleft()     { return { x: this.x, y: this.y }; }
+  set topleft(p)    { this.x = p.x; this.y = p.y; }
+  get topright()    { return { x: this.right, y: this.y }; }
+  set topright(p)   { this.right = p.x; this.y = p.y; }
+  get bottomleft()  { return { x: this.x, y: this.bottom }; }
+  set bottomleft(p) { this.x = p.x; this.bottom = p.y; }
+  get bottomright() { return { x: this.right, y: this.bottom }; }
+  set bottomright(p){ this.right = p.x; this.bottom = p.y; }
+
+  get midtop()    { return { x: this.centerx, y: this.y }; }
+  set midtop(p)   { this.centerx = p.x; this.y = p.y; }
+  get midleft()   { return { x: this.x, y: this.centery }; }
+  set midleft(p)  { this.x = p.x; this.centery = p.y; }
+  get midbottom() { return { x: this.centerx, y: this.bottom }; }
+  set midbottom(p){ this.centerx = p.x; this.bottom = p.y; }
+  get midright()  { return { x: this.right, y: this.centery }; }
+  set midright(p) { this.right = p.x; this.centery = p.y; }
+
+  get center()    { return { x: this.centerx, y: this.centery }; }
+  set center(p)   { this.centerx = p.x; this.centery = p.y; }
+
+  collides(other) {
+    return (
+      this.left < other.right &&
+      this.right > other.left &&
+      this.top < other.bottom &&
+      this.bottom > other.top
+    );
+  }
+
+  contains(point) {
+    return (
+      point.x >= this.left &&
+      point.x <= this.right &&
+      point.y >= this.top &&
+      point.y <= this.bottom
+    );
+  }
+
+  overlap(other) {
+    const l = Math.max(this.left, other.left);
+    const r = Math.min(this.right, other.right);
+    const t = Math.max(this.top, other.top);
+    const b = Math.min(this.bottom, other.bottom);
+    if (l >= r || t >= b) return null;
+    return new Rect(l, t, r - l, b - t);
+  }
+
+  clamp(outer) {
+    if (this.left < outer.left) this.left = outer.left;
+    if (this.right > outer.right) this.right = outer.right;
+    if (this.top < outer.top) this.top = outer.top;
+    if (this.bottom > outer.bottom) this.bottom = outer.bottom;
+    return this;
+  }
+
+  inset(n) {
+    this.x += n;
+    this.y += n;
+    this.w -= n * 2;
+    this.h -= n * 2;
+    return this;
+  }
+
+  move(dx, dy) {
+    this.x += dx;
+    this.y += dy;
+    return this;
+  }
+
+  copy() {
+    return new Rect(this.x, this.y, this.w, this.h);
+  }
+}