@guinetik/gcanvas 1.0.0

package/demos/js/space/hud.js

@@ -0,0 +1,112 @@
+import { GameObject, TextShape } from "../../../src/index.js";
+
+export class HUD extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+
+    // Title - centered, below info bar
+    this.titleText = new TextShape("SPACE INVADERS", {
+      font: "bold 32px monospace",
+      color: "#ffff00",
+      align: "center",
+      baseline: "top",
+    });
+
+    // Score - top left
+    this.scoreText = new TextShape("SCORE: 0", {
+      font: "20px monospace",
+      color: "#ffffff",
+      align: "left",
+      baseline: "top",
+    });
+
+    // Level - top right
+    this.levelText = new TextShape("LEVEL: 1", {
+      font: "20px monospace",
+      color: "#00ffff",
+      align: "right",
+      baseline: "top",
+    });
+
+    // Lives - bottom left (above FPS)
+    this.livesText = new TextShape("LIVES: 3", {
+      font: "18px monospace",
+      color: "#00ff00",
+      align: "left",
+      baseline: "bottom",
+    });
+
+    // Center message (font size set dynamically based on screen width)
+    this.messageText = new TextShape("", {
+      font: "20px monospace",
+      color: "#ffff00",
+      align: "center",
+      baseline: "middle",
+    });
+
+    // Message auto-hide timer
+    this.messageTimer = 0;
+    this.messageDuration = 0;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.scoreText.text = `SCORE: ${this.game.score}`;
+    this.levelText.text = `LEVEL: ${this.game.level}`;
+    this.livesText.text = `LIVES: ${this.game.lives}`;
+
+    // Auto-hide message after duration
+    if (this.messageDuration > 0 && this.messageText.text) {
+      this.messageTimer += dt;
+      if (this.messageTimer >= this.messageDuration) {
+        this.hideMessage();
+      }
+    }
+  }
+
+  draw() {
+    super.draw();
+
+    // Title (centered, 100px from top to account for info bar)
+    this.titleText.x = this.game.width / 2;
+    this.titleText.y = 100;
+    this.titleText.render();
+
+    // Score (top left, below title area)
+    this.scoreText.x = 20;
+    this.scoreText.y = 140;
+    this.scoreText.render();
+
+    // Level (top right, below title area)
+    this.levelText.x = this.game.width - 20;
+    this.levelText.y = 140;
+    this.levelText.render();
+
+    // Lives (bottom left, above FPS counter)
+    this.livesText.x = 20;
+    this.livesText.y = this.game.height - 40;
+    this.livesText.render();
+
+    // Center message (scale font based on screen width)
+    if (this.messageText.text) {
+      // Scale font: 20px at 800px width, scales proportionally (min 14px, max 24px)
+      const fontSize = Math.max(14, Math.min(24, Math.floor(this.game.width / 40)));
+      this.messageText.font = `${fontSize}px monospace`;
+      this.messageText.x = this.game.width / 2;
+      this.messageText.y = this.game.height / 2;
+      this.messageText.render();
+    }
+  }
+
+  showMessage(text, duration = 0) {
+    this.messageText.text = text;
+    this.messageTimer = 0;
+    this.messageDuration = duration; // 0 = permanent until hideMessage called
+  }
+
+  hideMessage() {
+    this.messageText.text = "";
+    this.messageTimer = 0;
+    this.messageDuration = 0;
+  }
+}

package/demos/js/space/laserbeam.js

@@ -0,0 +1,179 @@
+import { GameObject, Painter } from "../../../src/index.js";
+
+/**
+ * LaserBeam - Area denial obstacle
+ *
+ * Phases:
+ * 1. Warning (0.3s): Thin green line appears
+ * 2. Charging (0.2s): Line grows wider, turns white
+ * 3. Active (0.15s): Full width, damages player
+ * 4. Fade (0.2s): Fades out
+ */
+export class LaserBeam extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: 1,
+      height: game.height,
+      ...options,
+    });
+
+    // Position - random X across screen
+    this.x = options.x ?? (50 + Math.random() * (game.width - 100));
+    this.y = game.height / 2;
+
+    // Timing
+    this.warningDuration = 0.3;
+    this.chargeDuration = 0.2;
+    this.activeDuration = 0.4; // Longer damage window
+    this.fadeDuration = 0.2;
+    this.totalDuration = this.warningDuration + this.chargeDuration + this.activeDuration + this.fadeDuration;
+
+    this.elapsedTime = 0;
+    this.phase = "warning"; // warning, charging, active, fade
+
+    // Visual properties
+    this.maxWidth = 60; // Wider beam during active phase
+    this.currentWidth = 1;
+    this.opacity = 1;
+    this.canDamage = false; // Only damages during active phase
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    this.elapsedTime += dt;
+
+    // Determine phase and properties
+    if (this.elapsedTime < this.warningDuration) {
+      // Warning phase - thin green line
+      this.phase = "warning";
+      this.currentWidth = 1;
+      this.canDamage = false;
+    } else if (this.elapsedTime < this.warningDuration + this.chargeDuration) {
+      // Charging phase - grows wider, turns white
+      this.phase = "charging";
+      const chargeProgress = (this.elapsedTime - this.warningDuration) / this.chargeDuration;
+      this.currentWidth = 1 + (this.maxWidth - 1) * chargeProgress;
+      this.canDamage = false;
+    } else if (this.elapsedTime < this.warningDuration + this.chargeDuration + this.activeDuration) {
+      // Active phase - full width, damages
+      this.phase = "active";
+      this.currentWidth = this.maxWidth;
+      this.canDamage = true;
+    } else if (this.elapsedTime < this.totalDuration) {
+      // Fade phase
+      this.phase = "fade";
+      const fadeProgress = (this.elapsedTime - this.warningDuration - this.chargeDuration - this.activeDuration) / this.fadeDuration;
+      this.opacity = 1 - fadeProgress;
+      this.currentWidth = this.maxWidth * (1 - fadeProgress * 0.5); // Shrink slightly
+      this.canDamage = false;
+    } else {
+      // Done
+      this.destroy();
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    const ctx = Painter.ctx;
+    ctx.save();
+
+    // Reset transform since we're drawing in screen space
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+    const halfWidth = this.currentWidth / 2;
+
+    if (this.phase === "warning") {
+      // Thin green warning line
+      ctx.strokeStyle = `rgba(0, 255, 0, 0.8)`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(this.x, 0);
+      ctx.lineTo(this.x, this.game.height);
+      ctx.stroke();
+
+      // Flickering effect
+      if (Math.sin(this.elapsedTime * 30) > 0) {
+        ctx.strokeStyle = `rgba(100, 255, 100, 0.4)`;
+        ctx.lineWidth = 3;
+        ctx.stroke();
+      }
+    } else if (this.phase === "charging") {
+      // Growing white beam with green core
+      const chargeProgress = (this.elapsedTime - this.warningDuration) / this.chargeDuration;
+
+      // Outer glow
+      const gradient = ctx.createLinearGradient(this.x - halfWidth, 0, this.x + halfWidth, 0);
+      gradient.addColorStop(0, `rgba(255, 255, 255, 0)`);
+      gradient.addColorStop(0.3, `rgba(200, 255, 200, ${0.3 * chargeProgress})`);
+      gradient.addColorStop(0.5, `rgba(255, 255, 255, ${0.6 * chargeProgress})`);
+      gradient.addColorStop(0.7, `rgba(200, 255, 200, ${0.3 * chargeProgress})`);
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(this.x - halfWidth, 0, this.currentWidth, this.game.height);
+
+      // Core line
+      ctx.strokeStyle = `rgba(150, 255, 150, ${0.5 + chargeProgress * 0.5})`;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(this.x, 0);
+      ctx.lineTo(this.x, this.game.height);
+      ctx.stroke();
+    } else if (this.phase === "active") {
+      // Full deadly beam - bright white with slight transparency
+      const gradient = ctx.createLinearGradient(this.x - halfWidth, 0, this.x + halfWidth, 0);
+      gradient.addColorStop(0, `rgba(255, 255, 255, 0)`);
+      gradient.addColorStop(0.2, `rgba(255, 255, 255, 0.3)`);
+      gradient.addColorStop(0.4, `rgba(255, 255, 255, 0.7)`);
+      gradient.addColorStop(0.5, `rgba(255, 255, 255, 0.9)`);
+      gradient.addColorStop(0.6, `rgba(255, 255, 255, 0.7)`);
+      gradient.addColorStop(0.8, `rgba(255, 255, 255, 0.3)`);
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(this.x - halfWidth, 0, this.currentWidth, this.game.height);
+
+      // Bright core
+      ctx.strokeStyle = `rgba(255, 255, 255, 1)`;
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.moveTo(this.x, 0);
+      ctx.lineTo(this.x, this.game.height);
+      ctx.stroke();
+    } else if (this.phase === "fade") {
+      // Fading out
+      const gradient = ctx.createLinearGradient(this.x - halfWidth, 0, this.x + halfWidth, 0);
+      gradient.addColorStop(0, `rgba(255, 255, 255, 0)`);
+      gradient.addColorStop(0.3, `rgba(200, 255, 200, ${0.2 * this.opacity})`);
+      gradient.addColorStop(0.5, `rgba(255, 255, 255, ${0.5 * this.opacity})`);
+      gradient.addColorStop(0.7, `rgba(200, 255, 200, ${0.2 * this.opacity})`);
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(this.x - halfWidth, 0, this.currentWidth, this.game.height);
+    }
+
+    ctx.restore();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  getBounds() {
+    // Only return bounds during active phase (when it can damage)
+    if (!this.canDamage) {
+      return { x: -1000, y: -1000, width: 0, height: 0 }; // Off-screen, no collision
+    }
+    return {
+      x: this.x - this.currentWidth / 2,
+      y: 0,
+      width: this.currentWidth,
+      height: this.game.height,
+    };
+  }
+}

package/demos/js/space/lightning.js

@@ -0,0 +1,277 @@
+import { GameObject, Painter } from "../../../src/index.js";
+
+/**
+ * Lightning - Animated branching lightning strike obstacle
+ *
+ * Phases:
+ * 1. Tracing (0.4s): Bolt draws itself downward, branches split as trace reaches them
+ * 2. Active (0.3s): Full bolt visible, bright flash, damages player
+ * 3. Fade (0.2s): Opacity fades out
+ *
+ * Unlocked after defeating boss 2 (level 7+)
+ */
+export class Lightning extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: game.width,
+      height: game.height,
+      ...options,
+    });
+
+    // Start at top center with slight variance
+    this.startX = options.x ?? game.width / 2 + (Math.random() - 0.5) * 100;
+
+    // Generate full lightning tree at spawn (2-4 branches total)
+    this.maxBranches = 2 + Math.floor(Math.random() * 3);
+    this.segments = []; // All line segments: [{x1, y1, x2, y2, branch}]
+    this.generateLightning();
+
+    // Animation
+    this.progress = 0;
+    this.traceSpeed = 2.5; // Complete trace in ~0.4s
+    this.phase = "tracing"; // tracing -> active -> fade
+
+    this.activeDuration = 0.3;
+    this.fadeDuration = 0.2;
+    this.activeTimer = 0;
+    this.fadeTimer = 0;
+    this.opacity = 1;
+
+    this.canDamage = false;
+    this.hasHitPlayer = false;
+  }
+
+  generateLightning() {
+    // Build main trunk + branches as flat array of segments
+    let x = this.startX;
+    let y = 0;
+    const segmentHeight = 50;
+    let branchCount = 0;
+
+    // Main trunk - jagged path from top to bottom
+    while (y < this.game.height) {
+      const nextY = Math.min(y + segmentHeight, this.game.height);
+      const jitter = (Math.random() - 0.5) * 50;
+      const nextX = Math.max(30, Math.min(this.game.width - 30, x + jitter));
+
+      this.segments.push({ x1: x, y1: y, x2: nextX, y2: nextY, branch: 0 });
+
+      // Chance to spawn a branch (not too early, not too late)
+      if (y > 100 && y < this.game.height - 200 && Math.random() < 0.35 && branchCount < this.maxBranches - 1) {
+        branchCount++;
+        this.generateBranch(nextX, nextY, branchCount);
+      }
+
+      x = nextX;
+      y = nextY;
+    }
+  }
+
+  generateBranch(startX, startY, branchId) {
+    // Branch goes diagonally outward
+    const direction = Math.random() > 0.5 ? 1 : -1;
+    let x = startX;
+    let y = startY;
+    const segmentHeight = 50;
+
+    // Branch is shorter than main trunk (3-6 segments)
+    const branchLength = 3 + Math.floor(Math.random() * 4);
+
+    for (let i = 0; i < branchLength && y < this.game.height; i++) {
+      const nextY = Math.min(y + segmentHeight, this.game.height);
+      const drift = direction * (20 + Math.random() * 30);
+      const jitter = (Math.random() - 0.5) * 30;
+      const nextX = Math.max(30, Math.min(this.game.width - 30, x + drift + jitter));
+
+      this.segments.push({ x1: x, y1: y, x2: nextX, y2: nextY, branch: branchId });
+
+      x = nextX;
+      y = nextY;
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    if (this.phase === "tracing") {
+      this.progress += dt * this.traceSpeed;
+      if (this.progress >= 1) {
+        this.progress = 1;
+        this.phase = "active";
+        this.canDamage = true;
+      }
+    } else if (this.phase === "active") {
+      this.activeTimer += dt;
+      if (this.activeTimer >= this.activeDuration) {
+        this.phase = "fade";
+        this.canDamage = false;
+      }
+    } else if (this.phase === "fade") {
+      this.fadeTimer += dt;
+      this.opacity = 1 - this.fadeTimer / this.fadeDuration;
+      if (this.fadeTimer >= this.fadeDuration) {
+        this.destroy();
+      }
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    const ctx = Painter.ctx;
+    ctx.save();
+
+    // Reset transform since we're drawing in screen space
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+    // How far down has the trace reached?
+    const currentTraceY = this.progress * this.game.height;
+
+    for (const seg of this.segments) {
+      // Skip segments not yet reached by the trace
+      if (seg.y1 > currentTraceY) continue;
+
+      // Calculate how much of this segment to draw
+      let drawX2 = seg.x2;
+      let drawY2 = seg.y2;
+
+      if (seg.y2 > currentTraceY) {
+        // Partial segment - interpolate to current trace position
+        const t = (currentTraceY - seg.y1) / (seg.y2 - seg.y1);
+        drawX2 = seg.x1 + (seg.x2 - seg.x1) * t;
+        drawY2 = currentTraceY;
+      }
+
+      this.drawSegment(ctx, seg.x1, seg.y1, drawX2, drawY2, seg.branch);
+    }
+
+    ctx.restore();
+  }
+
+  drawSegment(ctx, x1, y1, x2, y2, branch) {
+    const isBranch = branch > 0;
+
+    if (this.phase === "tracing") {
+      // Tracing phase - cyan/purple electric glow
+      // Outer glow
+      ctx.strokeStyle = `rgba(100, 150, 255, ${0.4 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 8 : 12;
+      ctx.lineCap = "round";
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      // Inner bright line
+      ctx.strokeStyle = `rgba(200, 220, 255, ${0.9 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 2 : 3;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+    } else if (this.phase === "active") {
+      // Active phase - bright white flash
+      // Wide outer glow
+      ctx.strokeStyle = `rgba(150, 180, 255, ${0.6 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 16 : 24;
+      ctx.lineCap = "round";
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      // Medium glow
+      ctx.strokeStyle = `rgba(200, 220, 255, ${0.8 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 8 : 12;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      // Bright core
+      ctx.strokeStyle = `rgba(255, 255, 255, ${this.opacity})`;
+      ctx.lineWidth = isBranch ? 3 : 4;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+    } else if (this.phase === "fade") {
+      // Fade phase - decreasing opacity
+      ctx.strokeStyle = `rgba(150, 180, 255, ${0.4 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 10 : 16;
+      ctx.lineCap = "round";
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+
+      ctx.strokeStyle = `rgba(255, 255, 255, ${0.7 * this.opacity})`;
+      ctx.lineWidth = isBranch ? 2 : 3;
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  /**
+   * Get bounding box for collision detection
+   * Returns off-screen bounds when not in damage phase
+   */
+  getBounds() {
+    if (!this.canDamage) {
+      return { x: -1000, y: -1000, width: 0, height: 0 };
+    }
+
+    // Return bounding box of entire lightning
+    const xs = this.segments.flatMap((s) => [s.x1, s.x2]);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+
+    return {
+      x: minX - 15,
+      y: 0,
+      width: maxX - minX + 30,
+      height: this.game.height,
+    };
+  }
+
+  /**
+   * More precise collision check - tests player against each segment
+   */
+  checkCollision(playerBounds) {
+    if (!this.canDamage) return false;
+
+    const px = playerBounds.x;
+    const py = playerBounds.y;
+    const pw = playerBounds.width;
+    const ph = playerBounds.height;
+
+    for (const seg of this.segments) {
+      // Simple line-rect collision using bounding box of segment
+      const segMinX = Math.min(seg.x1, seg.x2) - 10;
+      const segMaxX = Math.max(seg.x1, seg.x2) + 10;
+      const segMinY = Math.min(seg.y1, seg.y2);
+      const segMaxY = Math.max(seg.y1, seg.y2);
+
+      // Check if player rect overlaps segment bounding box
+      if (
+        px < segMaxX &&
+        px + pw > segMinX &&
+        py < segMaxY &&
+        py + ph > segMinY
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+}