@guinetik/gcanvas 1.0.0

package/demos/js/space/alien.js

@@ -0,0 +1,171 @@
+import { GameObject, Rectangle, Circle, Group } from "../../../src/index.js";
+import { ALIEN_WIDTH, ALIEN_HEIGHT } from "./constants.js";
+
+export class Alien extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: ALIEN_WIDTH,
+      height: ALIEN_HEIGHT,
+      ...options,
+    });
+
+    this.row = options.row || 0;
+    this.col = options.col || 0;
+    this.points = options.points || 10;
+    this.animTime = Math.random() * 2; // Offset animation
+
+    // Create alien shape based on row
+    this.shape = this.createShape();
+  }
+
+  createShape() {
+    const group = new Group({ cacheRendering: true });
+
+    // Different alien designs based on row - classic Space Invaders style
+    if (this.row === 0) {
+      // Top row - Squid/UFO type (30 points) - magenta/pink
+      this.points = 30;
+
+      // Dome head
+      const head = new Circle(8, { y: -2, color: "#ff0088" });
+
+      // Body
+      const body = new Rectangle({ width: 20, height: 8, y: 4, color: "#ff0088" });
+
+      // Eyes
+      const leftEye = new Circle(2, { x: -4, y: -3, color: "#ffffff" });
+      const rightEye = new Circle(2, { x: 4, y: -3, color: "#ffffff" });
+      const leftPupil = new Circle(1, { x: -4, y: -3, color: "#000000" });
+      const rightPupil = new Circle(1, { x: 4, y: -3, color: "#000000" });
+
+      // Tentacles
+      const tent1 = new Rectangle({ width: 3, height: 6, x: -8, y: 10, color: "#cc0066" });
+      const tent2 = new Rectangle({ width: 3, height: 8, x: -3, y: 11, color: "#cc0066" });
+      const tent3 = new Rectangle({ width: 3, height: 8, x: 3, y: 11, color: "#cc0066" });
+      const tent4 = new Rectangle({ width: 3, height: 6, x: 8, y: 10, color: "#cc0066" });
+
+      group.add(head);
+      group.add(body);
+      group.add(leftEye);
+      group.add(rightEye);
+      group.add(leftPupil);
+      group.add(rightPupil);
+      group.add(tent1);
+      group.add(tent2);
+      group.add(tent3);
+      group.add(tent4);
+
+    } else if (this.row <= 2) {
+      // Middle rows - Crab type (20 points) - CYAN/ELECTRIC BLUE (spacey)
+      this.points = 20;
+
+      // Main body
+      const body = new Rectangle({ width: 22, height: 10, color: "#00ddff" });
+
+      // Head bump
+      const headBump = new Rectangle({ width: 10, height: 6, y: -6, color: "#00ddff" });
+
+      // Eyes
+      const leftEye = new Rectangle({ width: 4, height: 4, x: -6, y: -2, color: "#003344" });
+      const rightEye = new Rectangle({ width: 4, height: 4, x: 6, y: -2, color: "#003344" });
+
+      // Claws - left
+      const leftArm = new Rectangle({ width: 4, height: 6, x: -14, y: -2, color: "#00aacc" });
+      const leftClaw = new Rectangle({ width: 6, height: 4, x: -16, y: -6, color: "#00aacc" });
+
+      // Claws - right
+      const rightArm = new Rectangle({ width: 4, height: 6, x: 14, y: -2, color: "#00aacc" });
+      const rightClaw = new Rectangle({ width: 6, height: 4, x: 16, y: -6, color: "#00aacc" });
+
+      // Legs
+      const leg1 = new Rectangle({ width: 3, height: 5, x: -8, y: 8, color: "#0088aa" });
+      const leg2 = new Rectangle({ width: 3, height: 5, x: 0, y: 8, color: "#0088aa" });
+      const leg3 = new Rectangle({ width: 3, height: 5, x: 8, y: 8, color: "#0088aa" });
+
+      group.add(body);
+      group.add(headBump);
+      group.add(leftEye);
+      group.add(rightEye);
+      group.add(leftArm);
+      group.add(leftClaw);
+      group.add(rightArm);
+      group.add(rightClaw);
+      group.add(leg1);
+      group.add(leg2);
+      group.add(leg3);
+
+    } else {
+      // Bottom rows - Octopus/Basic type (10 points) - green
+      this.points = 10;
+
+      // Round head
+      const head = new Circle(10, { y: -2, color: "#44ff44" });
+
+      // Body extension
+      const body = new Rectangle({ width: 16, height: 8, y: 6, color: "#44ff44" });
+
+      // Eyes
+      const leftEye = new Rectangle({ width: 4, height: 5, x: -4, y: -4, color: "#003300" });
+      const rightEye = new Rectangle({ width: 4, height: 5, x: 4, y: -4, color: "#003300" });
+
+      // Antennae
+      const leftAntenna = new Rectangle({ width: 2, height: 6, x: -6, y: -12, color: "#22cc22" });
+      const rightAntenna = new Rectangle({ width: 2, height: 6, x: 6, y: -12, color: "#22cc22" });
+      const leftTip = new Circle(2, { x: -6, y: -16, color: "#88ff88" });
+      const rightTip = new Circle(2, { x: 6, y: -16, color: "#88ff88" });
+
+      // Tentacle legs
+      const leg1 = new Rectangle({ width: 3, height: 6, x: -10, y: 12, color: "#22aa22" });
+      const leg2 = new Rectangle({ width: 3, height: 8, x: -4, y: 13, color: "#22aa22" });
+      const leg3 = new Rectangle({ width: 3, height: 8, x: 4, y: 13, color: "#22aa22" });
+      const leg4 = new Rectangle({ width: 3, height: 6, x: 10, y: 12, color: "#22aa22" });
+
+      group.add(head);
+      group.add(body);
+      group.add(leftEye);
+      group.add(rightEye);
+      group.add(leftAntenna);
+      group.add(rightAntenna);
+      group.add(leftTip);
+      group.add(rightTip);
+      group.add(leg1);
+      group.add(leg2);
+      group.add(leg3);
+      group.add(leg4);
+    }
+
+    return group;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.animTime += dt;
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    // Add subtle animation - render at origin with wobble offset
+    // Parent transform already positions us correctly
+    const wobble = Math.sin(this.animTime * 5) * 2;
+
+    this.shape.x = 0;
+    this.shape.y = wobble;
+    this.shape.render();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  getBounds() {
+    return {
+      x: this.x - ALIEN_WIDTH / 2,
+      y: this.y - ALIEN_HEIGHT / 2,
+      width: ALIEN_WIDTH,
+      height: ALIEN_HEIGHT,
+    };
+  }
+}

package/demos/js/space/boom.js

@@ -0,0 +1,98 @@
+import { GameObject, Rectangle, Circle } from "../../../src/index.js";
+
+export class Explosion extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+
+    this.particles = [];
+    this.lifetime = 0.4; // Shorter lifetime for better performance
+    this.age = 0;
+    this.baseColor = options.color || "#ffff00";
+
+    // Color palette for explosion - varies based on base color
+    const colors = this.baseColor === "#ffff00"
+      ? ["#ffffff", "#ffff00", "#ffaa00", "#ff6600"] // Yellow explosion
+      : ["#ffffff", "#ff8888", "#ff4444", "#ff0000"]; // Red explosion
+
+    // Optimized particle count (8 circles + 3 squares = 11 total)
+    const particleCount = 8;
+    for (let i = 0; i < particleCount; i++) {
+      const angle = (i / particleCount) * Math.PI * 2 + Math.random() * 0.5;
+      const speed = 80 + Math.random() * 100;
+      const size = 2 + Math.random() * 4;
+      const color = colors[Math.floor(Math.random() * colors.length)];
+
+      this.particles.push({
+        x: 0,
+        y: 0,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        size: size,
+        shape: new Circle(size, { color: color }),
+        rotSpeed: (Math.random() - 0.5) * 10,
+      });
+    }
+
+    // Add some square debris
+    for (let i = 0; i < 3; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = 40 + Math.random() * 60;
+      const size = 2 + Math.random() * 3;
+      const color = colors[Math.floor(Math.random() * colors.length)];
+
+      this.particles.push({
+        x: 0,
+        y: 0,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        size: size,
+        shape: new Rectangle({ width: size, height: size, color: color }),
+        rotSpeed: (Math.random() - 0.5) * 15,
+        rotation: 0,
+      });
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.age += dt;
+
+    if (this.age >= this.lifetime) {
+      this.active = false;
+      this.visible = false;
+      return;
+    }
+
+    // Update particles with gravity and fade
+    const progress = this.age / this.lifetime;
+    for (const p of this.particles) {
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.vy += 100 * dt; // Gravity
+      p.vx *= 0.99; // Air resistance
+
+      // Fade and shrink
+      p.shape.opacity = 1 - progress * progress;
+
+      // Rotate debris
+      if (p.rotation !== undefined) {
+        p.rotation += p.rotSpeed * dt;
+      }
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    // Render particles relative to origin - parent transform positions us correctly
+    for (const p of this.particles) {
+      p.shape.x = p.x;
+      p.shape.y = p.y;
+      if (p.rotation !== undefined) {
+        p.shape.rotation = p.rotation * (180 / Math.PI); // Convert to degrees
+      }
+      p.shape.render();
+    }
+  }
+}

package/demos/js/space/boss.js

@@ -0,0 +1,353 @@
+import { GameObject, Rectangle } from "../../../src/index.js";
+import { Alien } from "./alien.js";
+import {
+  ALIEN_WIDTH,
+  ALIEN_HEIGHT,
+  BOSS_SCALE,
+  BOSS_BASE_HEALTH,
+  BOSS_BASE_POINTS,
+  BOSS_BASE_MISSILE_INTERVAL,
+  BOSS_BASE_MINION_INTERVAL,
+  BOSS_BASE_MAX_MINIONS,
+  BOSS_BASE_MOVE_SPEED,
+  GAUNTLET_BOSS_SCALE,
+  GAUNTLET_BOSS_HEALTH_MULTIPLIER,
+  GAUNTLET_BOSS_COLORS,
+} from "./constants.js";
+
+/**
+ * Boss alien - uses composition to scale up a regular alien shape
+ * Difficulty scales with boss type:
+ * Type 0 = Squid (pink) - Level 3 boss (easiest, missiles only)
+ * Type 1 = Octopus (green) - Level 6 boss (medium, missiles + lasers)
+ * Type 2 = Crab (cyan) - Level 9 boss (hardest, missiles + lasers + lightning)
+ *
+ * Gauntlet mode: Larger scale, different colors, more health
+ */
+export class Boss extends GameObject {
+  constructor(game, options = {}) {
+    // Gauntlet mode uses larger scale - must determine before super()
+    const isGauntlet = options.isGauntlet || false;
+    const scale = isGauntlet ? GAUNTLET_BOSS_SCALE : BOSS_SCALE;
+
+    const width = ALIEN_WIDTH * scale;
+    const height = ALIEN_HEIGHT * scale;
+
+    super(game, {
+      width: width,
+      height: height,
+      ...options,
+    });
+
+    this.isGauntlet = isGauntlet;
+    this.scale = scale;
+
+    // Boss type determines which alien row shape to use AND difficulty scaling
+    // 0 = octopus (row 3), 1 = squid (row 0), 2 = crab (row 1)
+    this.bossType = options.bossType || 0;
+
+    // Scale difficulty based on boss type (0, 1, 2)
+    const difficultyScale = 1 + this.bossType * 0.5; // 1.0, 1.5, 2.0
+
+    // Gauntlet bosses have extra health
+    const gauntletMultiplier = this.isGauntlet ? GAUNTLET_BOSS_HEALTH_MULTIPLIER : 1;
+
+    // Health scales up: 30, 45, 60 (or 45, 68, 90 in gauntlet)
+    this.health = Math.floor(BOSS_BASE_HEALTH * difficultyScale * gauntletMultiplier);
+    this.maxHealth = this.health;
+
+    // Points scale up: 1000, 2000, 3000 (doubled in gauntlet)
+    this.points = BOSS_BASE_POINTS * (this.bossType + 1) * (this.isGauntlet ? 2 : 1);
+
+    // Animation
+    this.animTime = 0;
+    this.hitFlashTime = 0;
+    this.isFlashing = false;
+
+    // Movement - faster for harder bosses
+    this.moveDirection = 1;
+    this.moveSpeed = BOSS_BASE_MOVE_SPEED * (1 + this.bossType * 0.3); // 35, 45.5, 56
+
+    // Attack intervals - shorter for harder bosses
+    // Non-signature abilities are 20% slower to reduce spam
+    // Signature: Boss 0 = missiles, Boss 1 = lasers, Boss 2 = lightning
+    let baseMissileInterval = BOSS_BASE_MISSILE_INTERVAL / difficultyScale;
+    if (this.bossType >= 1) {
+      // Missiles are non-signature for bosses 1 & 2, slow down 20%
+      baseMissileInterval *= 1.2;
+    }
+    this.missileInterval = baseMissileInterval;
+
+    this.minionInterval = BOSS_BASE_MINION_INTERVAL / difficultyScale;
+    this.maxMinions = BOSS_BASE_MAX_MINIONS + this.bossType * 2; // 2, 4, 6
+
+    // Boss type 1+ (Octopus, Crab) use lasers
+    this.usesLasers = this.bossType >= 1;
+    if (this.bossType === 1) {
+      // Boss 1: Lasers are signature - tuned down 10% from 1.8 to 2.0
+      this.laserInterval = 2.0;
+    } else if (this.bossType === 2) {
+      // Boss 2: Lasers are non-signature - 20% slower
+      this.laserInterval = 2.2;
+    }
+
+    // Boss type 2 (Crab/final) uses lightning as signature move
+    this.usesLightning = this.bossType === 2;
+    this.lightningInterval = 2.5;
+
+    // Attack timers
+    this.missileTimer = 0;
+    this.minionTimer = 0;
+    this.laserTimer = 0;
+    this.lightningTimer = 0;
+    this.minionCount = 0; // Track active minions
+
+    // Entry animation
+    this.entering = true;
+    this.entryProgress = 0;
+    this.targetY = options.targetY || 150;
+    this.startY = -height;
+
+    // Create shape using composition - instantiate an Alien and reuse its shape
+    this.shape = this.createShape();
+
+    // Health bar
+    this.healthBarBg = new Rectangle({
+      width: width,
+      height: 8,
+      color: "#333333",
+    });
+    this.healthBarFg = new Rectangle({
+      width: width,
+      height: 8,
+      color: "#ff0000",
+    });
+  }
+
+  createShape() {
+    // Map boss type to the appropriate alien row
+    // Type 0 (Level 3) = Squid (pink) -> row 0
+    // Type 1 (Level 6) = Octopus (green) -> row 3
+    // Type 2 (Level 9) = Crab (cyan) -> row 1 (final boss!)
+    const rowMapping = [0, 3, 1];
+    const alienRow = rowMapping[this.bossType] ?? 0;
+
+    // Create a temporary alien to get its shape
+    const tempAlien = new Alien(this.game, { row: alienRow });
+    const shape = tempAlien.shape;
+
+    // Disable caching since boss scales up (would cause pixelation if cached at small size)
+    shape.cacheRendering = false;
+
+    // Apply scale transform (using instance scale which differs in gauntlet mode)
+    shape.transform.scale(this.scale);
+
+    // In gauntlet mode, recolor the shape with custom gauntlet colors
+    if (this.isGauntlet) {
+      const colors = GAUNTLET_BOSS_COLORS[this.bossType];
+      this.recolorShape(shape, colors);
+    }
+
+    return shape;
+  }
+
+  /**
+   * Recursively recolor all shapes in a group with gauntlet colors
+   */
+  recolorShape(shape, colors) {
+    if (shape.children) {
+      // It's a group - recursively recolor children
+      for (const child of shape.children) {
+        this.recolorShape(child, colors);
+      }
+    } else if (shape.color) {
+      // It's a shape with a color - determine which tier based on brightness
+      const hex = shape.color.toLowerCase();
+      // Check if it's a dark color (eyes, etc) - keep them dark
+      if (hex.includes("00") && !hex.includes("ff") && !hex.includes("dd") && !hex.includes("cc") && !hex.includes("aa") && !hex.includes("88")) {
+        shape.color = colors.dark;
+      } else if (hex.includes("cc") || hex.includes("aa") || hex.includes("88") || hex.includes("66")) {
+        // Secondary/darker accent colors
+        shape.color = colors.secondary;
+      } else {
+        // Primary bright colors
+        shape.color = colors.primary;
+      }
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.animTime += dt;
+
+    // Entry animation - descend from top
+    if (this.entering) {
+      this.entryProgress += dt * 0.5; // 2 seconds to enter
+      if (this.entryProgress >= 1) {
+        this.entryProgress = 1;
+        this.entering = false;
+      }
+      // Ease out cubic
+      const eased = 1 - Math.pow(1 - this.entryProgress, 3);
+      this.y = this.startY + (this.targetY - this.startY) * eased;
+      return; // Don't attack while entering
+    }
+
+    // Horizontal movement - drift back and forth
+    this.x += this.moveSpeed * this.moveDirection * dt;
+
+    // Bounce off screen edges
+    const halfWidth = this.width / 2;
+    if (this.x < halfWidth + 20) {
+      this.x = halfWidth + 20;
+      this.moveDirection = 1;
+    } else if (this.x > this.game.width - halfWidth - 20) {
+      this.x = this.game.width - halfWidth - 20;
+      this.moveDirection = -1;
+    }
+
+    // Attack timers
+    this.missileTimer += dt;
+    this.minionTimer += dt;
+    if (this.usesLasers) {
+      this.laserTimer += dt;
+    }
+    if (this.usesLightning) {
+      this.lightningTimer += dt;
+    }
+
+    // Fire missiles at player
+    if (this.missileTimer >= this.missileInterval) {
+      this.missileTimer = 0;
+      this.fireMissile();
+    }
+
+    // Fire lasers (boss type 1 special attack)
+    if (this.usesLasers && this.laserTimer >= this.laserInterval) {
+      this.laserTimer = 0;
+      this.fireLaser();
+    }
+
+    // Fire lightning (boss type 2 special attack)
+    if (this.usesLightning && this.lightningTimer >= this.lightningInterval) {
+      this.lightningTimer = 0;
+      this.fireLightning();
+    }
+
+    // Spawn minions
+    if (this.minionTimer >= this.minionInterval && this.minionCount < this.maxMinions) {
+      this.minionTimer = 0;
+      this.spawnMinion();
+    }
+
+    // Hit flash effect
+    if (this.isFlashing) {
+      this.hitFlashTime -= dt;
+      if (this.hitFlashTime <= 0) {
+        this.isFlashing = false;
+      }
+    }
+  }
+
+  fireMissile() {
+    // Fire a missile from boss position toward player
+    if (this.game.spawnBossMissile) {
+      this.game.spawnBossMissile(this.x, this.y + this.height / 2);
+    }
+  }
+
+  fireLaser() {
+    // Fire a laser beam directly at player's current position - forces them to move
+    if (this.game.spawnLaserBeam) {
+      this.game.spawnLaserBeam(this.game.player.x);
+    }
+  }
+
+  fireLightning() {
+    // Fire lightning - the ultimate "pay attention" move
+    if (this.game.spawnLightning) {
+      this.game.spawnLightning();
+    }
+  }
+
+  spawnMinion() {
+    // Spawn a minion that will float to a position
+    if (this.game.spawnBossMinion) {
+      const targetX = 100 + Math.random() * (this.game.width - 200);
+      const targetY = 200 + Math.random() * 150;
+
+      this.game.spawnBossMinion(this.x, this.y, targetX, targetY, this.bossType);
+      this.minionCount++;
+    }
+  }
+
+  onMinionDestroyed() {
+    this.minionCount = Math.max(0, this.minionCount - 1);
+  }
+
+  takeDamage() {
+    this.health--;
+    this.isFlashing = true;
+    this.hitFlashTime = 0.1;
+
+    if (this.health <= 0) {
+      this.destroy();
+      return true; // Boss defeated
+    }
+    return false;
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    // Wobble animation
+    const wobble = Math.sin(this.animTime * 3) * 3;
+
+    // Flash white when hit
+    if (this.isFlashing) {
+      this.shape.opacity = 0.5;
+    } else {
+      this.shape.opacity = 1;
+    }
+
+    // Render boss shape
+    this.shape.x = 0;
+    this.shape.y = wobble;
+    this.shape.render();
+
+    // Render health bar above boss (further up to avoid overlap with shape)
+    const healthPercent = this.health / this.maxHealth;
+    this.healthBarBg.x = 0;
+    this.healthBarBg.y = -this.height / 2 - 40;
+    this.healthBarBg.render();
+
+    this.healthBarFg.width = this.width * healthPercent;
+    this.healthBarFg.x = -(this.width * (1 - healthPercent)) / 2;
+    this.healthBarFg.y = -this.height / 2 - 40;
+
+    // Color based on health
+    if (healthPercent > 0.5) {
+      this.healthBarFg.color = "#00ff00";
+    } else if (healthPercent > 0.25) {
+      this.healthBarFg.color = "#ffff00";
+    } else {
+      this.healthBarFg.color = "#ff0000";
+    }
+    this.healthBarFg.render();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  getBounds() {
+    return {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+      width: this.width,
+      height: this.height,
+    };
+  }
+}

package/demos/js/space/buff.js

@@ -0,0 +1,73 @@
+import { GameObject, Circle } from "../../../src/index.js";
+
+export class AbsorbEffect extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+
+    this.particles = [];
+    this.lifetime = 0.4; // Shorter lifetime for better performance
+    this.age = 0;
+    this.targetX = options.targetX || this.x;
+    this.targetY = options.targetY || this.y;
+    this.color = options.color || "#98fb98";
+
+    // Create particles that will fly toward target (optimized count)
+    const particleCount = 8;
+    for (let i = 0; i < particleCount; i++) {
+      const angle = (i / particleCount) * Math.PI * 2;
+      const distance = 25 + Math.random() * 15;
+      const size = 3 + Math.random() * 3;
+
+      this.particles.push({
+        x: Math.cos(angle) * distance,
+        y: Math.sin(angle) * distance,
+        size: size,
+        shape: new Circle(size, {
+          color: this.color,
+        }),
+      });
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.age += dt;
+
+    if (this.age >= this.lifetime) {
+      this.active = false;
+      this.visible = false;
+      return;
+    }
+
+    // Update target to follow player
+    if (this.game.player) {
+      this.targetX = this.game.player.x;
+      this.targetY = this.game.player.y;
+    }
+
+    // Move particles toward target (relative to effect origin)
+    const progress = this.age / this.lifetime;
+    const targetRelX = this.targetX - this.x;
+    const targetRelY = this.targetY - this.y;
+
+    for (const p of this.particles) {
+      // Lerp toward target
+      p.x += (targetRelX - p.x) * dt * 5;
+      p.y += (targetRelY - p.y) * dt * 5;
+
+      // Shrink and fade
+      p.shape.opacity = 1 - progress;
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    for (const p of this.particles) {
+      p.shape.x = p.x;
+      p.shape.y = p.y;
+      p.shape.render();
+    }
+  }
+}