@guinetik/gcanvas 1.0.2 → 1.0.4

package/demos/js/space/hud.js

@@ -1,112 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

@@ -1,277 +0,0 @@
-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;
-  }
-}