@guinetik/gcanvas 1.0.0

package/demos/js/space/minion.js

@@ -0,0 +1,192 @@
+import { GameObject, Motion } from "../../../src/index.js";
+import { Alien } from "./alien.js";
+import {
+  ALIEN_WIDTH,
+  ALIEN_HEIGHT,
+  ALIEN_BULLET_SPEED,
+  MINION_SCALE,
+  MINION_FLOAT_RADIUS,
+  MINION_FLOAT_SPEED,
+  MINION_BASE_SHOOT_CHANCE,
+  MINION_BASE_HEALTH,
+} from "./constants.js";
+
+/**
+ * BossMinion - smaller versions of the boss alien that float around and shoot
+ * Uses Motion.float for patrol-like floating movement
+ * Difficulty scales with minion type (matches boss type)
+ */
+export class BossMinion extends GameObject {
+  constructor(game, options = {}) {
+    const width = ALIEN_WIDTH * MINION_SCALE;
+    const height = ALIEN_HEIGHT * MINION_SCALE;
+
+    super(game, {
+      width: width,
+      height: height,
+      ...options,
+    });
+
+    // Type matches the boss type (0=squid, 1=crab, 2=octopus)
+    this.minionType = options.minionType || 0;
+
+    // Scale difficulty based on minion type
+    this.health = MINION_BASE_HEALTH + this.minionType; // 2, 3, 4
+    this.shootChance = MINION_BASE_SHOOT_CHANCE * (1 + this.minionType * 0.5); // 0.006, 0.009, 0.012
+    this.points = 50 * (this.minionType + 1); // 50, 100, 150
+
+    // Entry animation - fly to target position
+    this.entering = true;
+    this.entryProgress = 0;
+    this.startX = options.startX || this.x;
+    this.startY = options.startY || this.y;
+    this.targetX = options.targetX || this.game.width / 2;
+    this.targetY = options.targetY || 250;
+
+    // Float animation state
+    this.floatTime = 0;
+    this.floatState = null;
+
+    // Attack state
+    this.animTime = 0;
+    this.hitFlashTime = 0;
+    this.isFlashing = false;
+
+    // Reference to boss (for notifying when destroyed)
+    this.boss = options.boss || null;
+
+    // Create shape using composition - same as Boss but smaller
+    this.shape = this.createShape();
+  }
+
+  createShape() {
+    // Map minion type to the appropriate alien row (must match Boss rowMapping!)
+    // Type 0 = Squid (pink) -> row 0
+    // Type 1 = Octopus (green) -> row 3
+    // Type 2 = Crab (cyan) -> row 1
+    const rowMapping = [0, 3, 1];
+    const alienRow = rowMapping[this.minionType] ?? 3;
+
+    // Create a temporary alien to get its shape
+    const tempAlien = new Alien(this.game, { row: alienRow });
+    const shape = tempAlien.shape;
+
+    // Apply scale transform to make it MINION_SCALE times the size
+    shape.transform.scale(MINION_SCALE);
+
+    return shape;
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.animTime += dt;
+
+    // Entry animation - fly to target position
+    if (this.entering) {
+      this.entryProgress += dt * 2; // 0.5 seconds to reach target
+      if (this.entryProgress >= 1) {
+        this.entryProgress = 1;
+        this.entering = false;
+        // Set position exactly at target for float center
+        this.x = this.targetX;
+        this.y = this.targetY;
+      } else {
+        // Ease out cubic interpolation
+        const eased = 1 - Math.pow(1 - this.entryProgress, 3);
+        this.x = this.startX + (this.targetX - this.startX) * eased;
+        this.y = this.startY + (this.targetY - this.startY) * eased;
+      }
+      return; // Don't shoot while entering
+    }
+
+    // Float animation using Motion.float
+    this.floatTime += dt;
+    const floatResult = Motion.float(
+      { x: this.targetX, y: this.targetY }, // Center point
+      this.floatTime,
+      10, // Duration of one full cycle
+      MINION_FLOAT_SPEED,
+      0.5, // Randomness
+      MINION_FLOAT_RADIUS,
+      true, // Loop
+      null, // No easing
+      {}, // No callbacks
+      this.floatState
+    );
+
+    this.x = floatResult.x;
+    this.y = floatResult.y;
+    this.floatState = floatResult.state;
+
+    // Shooting - random chance per frame (scaled by minion type)
+    if (Math.random() < this.shootChance) {
+      this.shoot();
+    }
+
+    // Hit flash effect
+    if (this.isFlashing) {
+      this.hitFlashTime -= dt;
+      if (this.hitFlashTime <= 0) {
+        this.isFlashing = false;
+      }
+    }
+  }
+
+  shoot() {
+    // Fire a bullet downward toward player
+    if (this.game.spawnAlienBullet) {
+      this.game.spawnAlienBullet(this.x, this.y + this.height / 2, ALIEN_BULLET_SPEED);
+    }
+  }
+
+  takeDamage() {
+    this.health--;
+    this.isFlashing = true;
+    this.hitFlashTime = 0.1;
+
+    if (this.health <= 0) {
+      this.destroy();
+      return true; // Minion defeated
+    }
+    return false;
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    // Wobble animation
+    const wobble = Math.sin(this.animTime * 6) * 2;
+
+    // Flash when hit
+    if (this.isFlashing) {
+      this.shape.opacity = 0.5;
+    } else {
+      this.shape.opacity = 1;
+    }
+
+    // Render minion shape
+    this.shape.x = 0;
+    this.shape.y = wobble;
+    this.shape.render();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+
+    // Notify boss that this minion was destroyed
+    if (this.boss && this.boss.onMinionDestroyed) {
+      this.boss.onMinionDestroyed();
+    }
+  }
+
+  getBounds() {
+    return {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+      width: this.width,
+      height: this.height,
+    };
+  }
+}

package/demos/js/space/missile.js

@@ -0,0 +1,212 @@
+import { GameObject, Rectangle, Triangle, Circle, Group, Motion, Easing } from "../../../src/index.js";
+import { MISSILE_DURATION, MISSILE_WIDTH, MISSILE_HEIGHT } from "./constants.js";
+
+export class Missile extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: MISSILE_WIDTH,
+      height: MISSILE_HEIGHT,
+      ...options,
+    });
+
+    // Bezier curve points
+    this.startPoint = [options.x, options.y];
+
+    // Target is where the player WAS when missile spawned (not tracking)
+    // Extend past the screen so missile flies through
+    const targetX = options.targetX || game.player.x;
+    const targetY = (options.targetY || game.player.y) + 150; // Go past the player
+    this.endPoint = [targetX, targetY];
+
+    // Create curved control points for interesting trajectory
+    // Randomize which side the curve bends
+    const curveDirection = Math.random() > 0.5 ? 1 : -1;
+    const curveIntensity = 100 + Math.random() * 150; // How much it curves
+
+    // Control point 1: near start, curved to one side
+    this.controlPoint1 = [
+      this.startPoint[0] + curveDirection * curveIntensity,
+      this.startPoint[1] + (this.endPoint[1] - this.startPoint[1]) * 0.3
+    ];
+
+    // Control point 2: near end, curved to same side (smooth S-curve if opposite)
+    const curve2Direction = Math.random() > 0.7 ? -curveDirection : curveDirection;
+    this.controlPoint2 = [
+      this.endPoint[0] + curve2Direction * curveIntensity * 0.5,
+      this.endPoint[1] - (this.endPoint[1] - this.startPoint[1]) * 0.3
+    ];
+
+    this.elapsedTime = 0;
+    this.duration = MISSILE_DURATION;
+    this.trailPoints = []; // For visual trail effect
+    this.hasCorrected = false; // One-time mid-flight course correction
+    this.correctionTime = 0.45 + Math.random() * 0.15; // Correct at 45-60% of flight (later)
+
+    // Create torpedo visual: |_________________|>
+    // All positions relative to center (0,0), pointing RIGHT (cached for performance)
+    this.shape = new Group({ cacheRendering: true });
+
+    const bodyLength = MISSILE_WIDTH - MISSILE_HEIGHT;
+    const halfBody = bodyLength / 2;
+
+    // Main body - centered, long rectangle
+    const body = new Rectangle({
+      width: bodyLength,
+      height: MISSILE_HEIGHT,
+      color: "#cc3300",
+    });
+    // body stays at x=0 (centered)
+
+    // Lighter stripe on body for depth
+    const stripe = new Rectangle({
+      width: bodyLength,
+      height: MISSILE_HEIGHT / 3,
+      color: "#ff4400",
+    });
+    // stripe stays at x=0 (centered)
+
+    // Nose cone - triangle at the RIGHT end (front)
+    const nose = new Triangle(MISSILE_HEIGHT, {
+      color: "#ff6600",
+      rotation: 90,
+    });
+    nose.x = halfBody + MISSILE_HEIGHT / 3; // Right edge of body + small offset
+
+    // Engine exhaust at the LEFT end (back)
+    this.engineGlow = new Circle(MISSILE_HEIGHT / 2, {
+      color: "#ffaa00",
+    });
+    this.engineGlow.x = -halfBody - MISSILE_HEIGHT / 3; // Left edge of body - small offset
+
+    // Warning indicator
+    this.warningFlash = 0;
+
+    this.shape.add(body);
+    this.shape.add(stripe);
+    this.shape.add(nose);
+    this.shape.add(this.engineGlow);
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    this.elapsedTime += dt;
+
+    // Mid-flight course correction - track player's current position ONCE
+    const progress = this.elapsedTime / this.duration;
+    if (!this.hasCorrected && progress >= this.correctionTime) {
+      this.hasCorrected = true;
+
+      // New trajectory starts from current position
+      this.startPoint = [this.x, this.y];
+
+      // New target is player's CURRENT position (+ offset to fly past)
+      const newTargetX = this.game.player.x;
+      const newTargetY = this.game.player.y + 150;
+      this.endPoint = [newTargetX, newTargetY];
+
+      // Recalculate control points for the new curve
+      const curveDirection = Math.random() > 0.5 ? 1 : -1;
+      const curveIntensity = 80 + Math.random() * 100;
+
+      this.controlPoint1 = [
+        this.startPoint[0] + curveDirection * curveIntensity * 0.5,
+        this.startPoint[1] + (this.endPoint[1] - this.startPoint[1]) * 0.3
+      ];
+      this.controlPoint2 = [
+        this.endPoint[0] + curveDirection * curveIntensity * 0.3,
+        this.endPoint[1] - (this.endPoint[1] - this.startPoint[1]) * 0.2
+      ];
+
+      // Reset timing for remaining journey
+      this.elapsedTime = 0;
+      this.duration = this.duration * (1 - this.correctionTime); // Remaining time
+    }
+
+    // Get position from bezier curve
+    const result = Motion.bezier(
+      this.startPoint,
+      this.controlPoint1,
+      this.controlPoint2,
+      this.endPoint,
+      this.elapsedTime,
+      this.duration,
+      false, // no loop
+      false, // no yoyo
+      Easing.easeInQuad // Accelerate as it approaches
+    );
+
+    // Store previous position for rotation calculation
+    const prevX = this.x;
+    const prevY = this.y;
+
+    this.x = result.x;
+    this.y = result.y;
+
+    // Calculate rotation to face movement direction
+    const dx = this.x - prevX;
+    const dy = this.y - prevY;
+    if (dx !== 0 || dy !== 0) {
+      this.shape.rotation = Math.atan2(dy, dx) * (180 / Math.PI);
+    }
+
+    // Store trail points
+    this.trailPoints.push({ x: this.x, y: this.y, age: 0 });
+    if (this.trailPoints.length > 10) {
+      this.trailPoints.shift();
+    }
+    // Age trail points
+    for (const point of this.trailPoints) {
+      point.age += dt;
+    }
+
+    // Engine flicker
+    this.warningFlash += dt * 20;
+    const flicker = Math.sin(this.warningFlash) > 0;
+    this.engineGlow.color = flicker ? "#ffff00" : "#ff6600";
+
+    // Destroy when animation completes or goes off screen
+    if (result.complete || this.y > this.game.height + 50 ||
+        this.x < -50 || this.x > this.game.width + 50) {
+      this.destroy();
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+
+    // Draw trail first (behind missile)
+    for (let i = 0; i < this.trailPoints.length; i++) {
+      const point = this.trailPoints[i];
+      const alpha = (1 - point.age * 3) * (i / this.trailPoints.length) * 0.6;
+      if (alpha > 0) {
+        const size = (MISSILE_HEIGHT / 2) * (i / this.trailPoints.length);
+        const trail = new Circle(size, {
+          color: `rgba(255, 100, 0, ${alpha})`,
+        });
+        trail.x = point.x;
+        trail.y = point.y;
+        trail.render();
+      }
+    }
+
+    super.draw();
+    this.shape.x = 0;
+    this.shape.y = 0;
+    this.shape.render();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  getBounds() {
+    return {
+      x: this.x - MISSILE_WIDTH / 2,
+      y: this.y - MISSILE_HEIGHT / 2,
+      width: MISSILE_WIDTH,
+      height: MISSILE_HEIGHT,
+    };
+  }
+}