@guinetik/gcanvas 1.0.4 → 1.0.5

package/dist/js/starfaux/config.js

@@ -0,0 +1,118 @@
+/**
+ * StarFaux Configuration
+ * All game constants centralized here - NO magic numbers in code
+ */
+
+export const CONFIG = {
+  // Reference resolution for scaling (all sizes are relative to this)
+  // On larger screens, everything scales proportionally
+  referenceWidth: 1920,
+  referenceHeight: 1080,
+
+  // Rails camera system
+  rails: {
+    speed: 300,             // Forward movement units/sec
+    perspective: 500,       // Camera3D perspective distance
+    tiltX: 0,               // NO tilt - camera positioned above ground instead
+    cameraY: -500,          // Camera is HIGH above the ground plane
+    // Camera reaction to player movement (creates world-ship coupling)
+    cameraReactX: 0.08,     // How much camera rotates Y based on player X (subtle banking)
+    cameraReactY: 0.02,     // How much camera tilts based on player Y
+    cameraLag: 5,           // Smoothing factor for camera follow
+  },
+
+  // Player ship
+  player: {
+    moveSpeed: 500,         // X/Y movement speed (fast for wide arena)
+    bounds: {
+      x: 600,               // Max horizontal offset - MUCH wider to explore terrain
+      y: 180,               // Max vertical offset from center
+    },
+    size: 30,               // Ship size for collision
+    fireRate: 0.12,         // Seconds between shots
+    maxHealth: 3,           // Hit points
+    bankAngle: 0.5,         // Max banking rotation when strafing (radians)
+    bankSpeed: 8,           // Banking interpolation speed
+    shipZ: 100,             // Ship Z position (in front of camera)
+    crosshairZ: 400,        // Crosshair Z position (further ahead, where aiming)
+    screenY: -80,           // Ship Y offset - NEGATIVE to spawn higher on screen
+    invincibilityTime: 1.5, // Seconds of invincibility after taking damage
+    blinkRate: 0.1,         // Blink interval during invincibility
+    // Physics - inertia and damping
+    acceleration: 1800,     // How fast ship accelerates toward target velocity
+    damping: 0.92,          // Velocity decay when no input (0-1, lower = more drag)
+    gravity: 200,           // Downward pull (easier to fall than climb)
+    climbResistance: 0.6,   // Multiplier for upward movement (< 1 = harder to climb)
+  },
+
+  // Laser projectiles
+  laser: {
+    speed: 800,             // Forward velocity
+    lifetime: 1.5,          // Seconds before despawn
+    width: 6,               // Visual width
+    height: 20,             // Visual length
+    color: "#ff3333",       // RED laser - distinct from green terrain
+    glowColor: "#ff8888",   // Red glow
+    poolSize: 30,           // Pre-allocated laser pool
+    collisionSize: 25,      // Collision radius (larger than visual for better hit detection)
+  },
+
+  // Enemy configuration
+  enemy: {
+    spawnDistance: 1500,    // How far ahead to spawn
+    despawnDistance: -100,  // Behind camera threshold
+    spawnInterval: 1.2,     // Base seconds between spawns
+    spawnVariance: 0.5,     // Random variance on spawn timing
+    types: {
+      fighter: {
+        size: 40,
+        health: 1,
+        score: 100,
+        color: "#ff4444",
+        speed: 50,          // Additional approach speed
+      },
+    },
+  },
+
+  // Terrain grid
+  terrain: {
+    gridSpacing: 120,       // Distance between grid lines
+    lineCount: 25,          // Number of lines to draw
+    color: "#00aa00",       // Grid line color
+    lineWidth: 1,           // Line thickness
+    yPosition: 0,           // Ground plane at Y=0 (camera is above at Y=-150)
+    // Width is now calculated dynamically based on screen width
+    // widthMultiplier: how many screen widths the terrain spans
+    widthMultiplier: 6,     // Terrain width
+    numCols: 100,           // Many points per line for smooth waveforms
+    // Joy Division style - stacked horizontal waveforms with clear gaps
+    nearPlaneZ: 20,         // Start terrain
+    nearSpacing: 80,        // WIDER spacing between lines - more black gaps
+    totalRows: 35,          // More rows to reach horizon
+    // Terrain features (hills/obstacles)
+    features: {
+      spawnInterval: 800,   // Distance between terrain features
+      maxHeight: 350,       // Maximum hill height - TALLER mountains
+      width: 200,           // Feature width
+      color: "#006600",     // Darker green for hills
+      collisionHeight: 120, // Collide with medium+ terrain (120+ out of 350 max)
+    },
+  },
+
+  // Visual settings
+  colors: {
+    background: "#000011",  // Dark blue-black space
+    player: "#4488ff",      // Player ship blue
+    playerAccent: "#88aaff",
+    laser: "#00ff00",
+    enemyLaser: "#ff4444",
+    explosion: "#ffaa00",
+    hud: "#00ff00",
+  },
+
+  // HUD
+  hud: {
+    font: "bold 20px monospace",
+    margin: 20,
+  },
+};

package/dist/js/starfaux/enemy.js

@@ -0,0 +1,353 @@
+/**
+ * Enemy - Enemy fighter system for StarFaux
+ *
+ * Enemies spawn far away (high Z, at horizon) and move
+ * toward the camera (Z decreases). When Z < 0, they've passed.
+ */
+
+import { Painter, Easing } from "/gcanvas.es.min.js";
+import { CONFIG } from "./config.js";
+
+/**
+ * Individual enemy fighter
+ */
+class Enemy {
+  constructor() {
+    this.reset();
+  }
+
+  reset() {
+    this.worldX = 0;
+    this.worldY = 0;
+    this.worldZ = 0;
+    this.alive = false;
+    this.health = 1;
+    this.size = CONFIG.enemy.types.fighter.size;
+    this.scoreValue = CONFIG.enemy.types.fighter.score;
+    this.rotation = 0;
+    this.rotationSpeed = 0;
+    this.damageFlash = 0;  // Flash timer when hit
+    // Spawn animation
+    this.spawnTime = 0;
+    this.spawnDuration = 0.5;  // Half second spawn animation
+    this.spawnProgress = 0;
+  }
+
+  init(x, y, z) {
+    const cfg = CONFIG.enemy.types.fighter;
+    this.worldX = x;
+    this.worldY = y;
+    this.worldZ = z;
+    this.alive = true;
+    this.health = cfg.health;
+    this.size = cfg.size;
+    this.scoreValue = cfg.score;
+    this.rotation = Math.random() * Math.PI * 2;
+    this.rotationSpeed = (Math.random() - 0.5) * 2;
+    // Reset spawn animation
+    this.spawnTime = 0;
+    this.spawnProgress = 0;
+  }
+
+  update(dt) {
+    if (!this.alive) return;
+
+    // Update spawn animation
+    if (this.spawnProgress < 1) {
+      this.spawnTime += dt;
+      this.spawnProgress = Math.min(1, this.spawnTime / this.spawnDuration);
+    }
+
+    // Move TOWARD camera (Z decreases)
+    // Also factor in the "rails speed" - world moves toward us
+    this.worldZ -= (CONFIG.rails.speed + CONFIG.enemy.types.fighter.speed) * dt;
+
+    // Slight wobble movement for visual interest
+    this.worldX += Math.sin(this.worldZ * 0.02) * 0.3;
+
+    // Rotation animation
+    this.rotation += this.rotationSpeed * dt;
+
+    // Damage flash decay
+    if (this.damageFlash > 0) {
+      this.damageFlash -= dt * 5;  // Flash fades quickly
+    }
+
+    // Check if passed camera (despawn)
+    if (this.worldZ < CONFIG.enemy.despawnDistance) {
+      this.alive = false;
+    }
+  }
+
+  takeDamage() {
+    this.health--;
+    this.damageFlash = 1;  // Start flash
+    if (this.health <= 0) {
+      this.alive = false;
+    }
+  }
+
+  render(ctx, camera, resScale = 1, groundY = 0) {
+    if (!this.alive) return;
+
+    const projected = camera.project(this.worldX, this.worldY, this.worldZ);
+
+    // Don't render if behind camera
+    if (projected.scale <= 0) return;
+
+    // Don't render if too small (too far away)
+    if (projected.scale < 0.08) return;
+
+    // Calculate spawn animation values using easing
+    const spawnEased = Easing.easeOutBack(this.spawnProgress);
+    const spawnScale = spawnEased;
+    const spawnAlpha = Easing.easeOutQuad(this.spawnProgress);
+
+    // Draw shadow on ground (also affected by spawn)
+    if (this.spawnProgress > 0.3) {
+      this.drawShadow(ctx, camera, resScale * spawnScale, groundY, spawnAlpha);
+    }
+
+    ctx.save();
+    ctx.translate(projected.x, projected.y);
+    ctx.rotate(this.rotation);
+
+    // Apply spawn scale animation (easeOutBack gives a nice overshoot pop-in)
+    const totalScale = projected.scale * resScale * spawnScale;
+    ctx.scale(totalScale, totalScale);
+
+    // Apply spawn alpha (fade in)
+    ctx.globalAlpha = spawnAlpha;
+
+    // Apply damage flash - make whole ship white
+    if (this.damageFlash > 0) {
+      ctx.globalAlpha = (0.3 + this.damageFlash * 0.7) * spawnAlpha;
+    }
+
+    this.drawFighter(ctx, this.damageFlash > 0);
+
+    ctx.restore();
+  }
+
+  /**
+   * Draw shadow on ground plane to help judge depth
+   */
+  drawShadow(ctx, camera, resScale, groundY, spawnAlpha = 1) {
+    // Project shadow position (same X/Z but at ground level)
+    const shadowProjected = camera.project(this.worldX, groundY, this.worldZ);
+    if (shadowProjected.scale <= 0) return;
+
+    const shadowSize = this.size * 0.6 * shadowProjected.scale * resScale;
+    const alpha = Math.min(0.4, shadowProjected.scale * 2) * spawnAlpha;
+
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = "#000000";
+
+    // Ellipse shadow (wider than tall for ground projection)
+    ctx.beginPath();
+    ctx.ellipse(shadowProjected.x, shadowProjected.y, shadowSize, shadowSize * 0.3, 0, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.restore();
+  }
+
+  /**
+   * Draw enemy fighter shape
+   */
+  drawFighter(ctx, isFlashing = false) {
+    const size = this.size;
+    const color = isFlashing ? "#ffffff" : CONFIG.enemy.types.fighter.color;
+
+    // Main body - angular fighter shape
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(0, -size * 0.6);           // Top point
+    ctx.lineTo(-size * 0.5, size * 0.3);  // Bottom left
+    ctx.lineTo(-size * 0.2, size * 0.1);  // Inner left
+    ctx.lineTo(0, size * 0.4);            // Bottom center
+    ctx.lineTo(size * 0.2, size * 0.1);   // Inner right
+    ctx.lineTo(size * 0.5, size * 0.3);   // Bottom right
+    ctx.closePath();
+    ctx.fill();
+
+    // Wings
+    ctx.fillStyle = isFlashing ? "#ffffff" : "#aa2222";
+    ctx.beginPath();
+    ctx.moveTo(-size * 0.3, 0);
+    ctx.lineTo(-size * 0.8, size * 0.2);
+    ctx.lineTo(-size * 0.5, size * 0.3);
+    ctx.closePath();
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.moveTo(size * 0.3, 0);
+    ctx.lineTo(size * 0.8, size * 0.2);
+    ctx.lineTo(size * 0.5, size * 0.3);
+    ctx.closePath();
+    ctx.fill();
+
+    // Cockpit
+    ctx.fillStyle = "#ffff00";
+    ctx.beginPath();
+    ctx.arc(0, -size * 0.1, size * 0.12, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Outline for visibility
+    ctx.strokeStyle = "#ff6666";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(0, -size * 0.6);
+    ctx.lineTo(-size * 0.5, size * 0.3);
+    ctx.lineTo(size * 0.5, size * 0.3);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+/**
+ * EnemySpawner - Manages enemy spawning and lifecycle
+ */
+export class EnemySpawner {
+  constructor(game, camera) {
+    this.game = game;
+    this.camera = camera;
+
+    // Enemy pool
+    this.pool = [];
+    this.active = [];
+
+    // Pre-allocate enemy pool
+    for (let i = 0; i < 30; i++) {
+      this.pool.push(new Enemy());
+    }
+
+    // Spawn timing
+    this.spawnTimer = 0;
+    this.nextSpawnTime = CONFIG.enemy.spawnInterval;
+  }
+
+  update(dt) {
+    // Spawn new enemies
+    this.spawnTimer += dt;
+    if (this.spawnTimer >= this.nextSpawnTime) {
+      this.spawnWave();
+      this.spawnTimer = 0;
+      this.nextSpawnTime = CONFIG.enemy.spawnInterval +
+        (Math.random() - 0.5) * CONFIG.enemy.spawnVariance * 2;
+    }
+
+    // Update active enemies
+    for (let i = this.active.length - 1; i >= 0; i--) {
+      const enemy = this.active[i];
+      enemy.update(dt);
+
+      // Return dead enemies to pool
+      if (!enemy.alive) {
+        enemy.reset();
+        this.pool.push(enemy);
+        this.active.splice(i, 1);
+      }
+    }
+  }
+
+  /**
+   * Spawn a wave of enemies
+   */
+  spawnWave() {
+    const patterns = ["single", "pair", "vFormation", "line"];
+    const pattern = patterns[Math.floor(Math.random() * patterns.length)];
+
+    // Spawn far away (high Z = at horizon)
+    const spawnZ = CONFIG.enemy.spawnDistance;
+    // Use scaled bounds for spawn positions
+    const scale = this.game.scaleFactor || 1;
+    const bounds = {
+      x: CONFIG.player.bounds.x * scale,
+      y: CONFIG.player.bounds.y * scale
+    };
+
+    switch (pattern) {
+      case "single":
+        // Spawn anywhere across the wide playfield
+        this.spawnEnemy(
+          (Math.random() - 0.5) * bounds.x * 1.8,
+          (Math.random() - 0.5) * bounds.y,
+          spawnZ
+        );
+        break;
+
+      case "pair":
+        // Wide pair spread across arena
+        this.spawnEnemy(-bounds.x * 0.7, 0, spawnZ);
+        this.spawnEnemy(bounds.x * 0.7, 0, spawnZ);
+        break;
+
+      case "vFormation":
+        // Spread V formation across wider area
+        this.spawnEnemy(0, -bounds.y * 0.3, spawnZ);
+        this.spawnEnemy(-bounds.x * 0.6, bounds.y * 0.1, spawnZ + 100);
+        this.spawnEnemy(bounds.x * 0.6, bounds.y * 0.1, spawnZ + 100);
+        break;
+
+      case "line":
+        // Line spread across full width
+        for (let i = 0; i < 4; i++) {
+          this.spawnEnemy(
+            -bounds.x * 0.8 + i * (bounds.x * 0.53),
+            0,
+            spawnZ + i * 80
+          );
+        }
+        break;
+    }
+  }
+
+  /**
+   * Spawn a single enemy at position
+   */
+  spawnEnemy(x, y, z) {
+    let enemy;
+
+    if (this.pool.length > 0) {
+      enemy = this.pool.pop();
+    } else {
+      enemy = new Enemy();
+    }
+
+    enemy.init(x, y, z);
+    this.active.push(enemy);
+  }
+
+  render() {
+    const ctx = Painter.ctx;
+    const resScale = this.game.scaleFactor || 1;
+    const groundY = CONFIG.terrain.yPosition;
+
+    // Sort by Z for proper depth rendering (furthest first = highest Z first)
+    this.active.sort((a, b) => b.worldZ - a.worldZ);
+
+    for (const enemy of this.active) {
+      enemy.render(ctx, this.camera, resScale, groundY);
+    }
+  }
+
+  /**
+   * Get all active enemies for collision detection
+   */
+  getActiveEnemies() {
+    return this.active;
+  }
+
+  /**
+   * Reset all enemies (on game restart)
+   */
+  reset() {
+    for (const enemy of this.active) {
+      enemy.reset();
+      this.pool.push(enemy);
+    }
+    this.active = [];
+    this.spawnTimer = 0;
+  }
+}

package/dist/js/starfaux/hud.js

@@ -0,0 +1,78 @@
+/**
+ * HUD - Heads-Up Display for StarFaux
+ *
+ * Displays score and health. The crosshair is rendered by
+ * the Player class since it follows the ship position.
+ */
+
+import { GameObject, Painter } from "/gcanvas.es.min.js";
+import { CONFIG } from "./config.js";
+
+export class HUD extends GameObject {
+  constructor(game) {
+    super(game, {});
+
+    this.score = 0;
+    this.health = CONFIG.player.maxHealth;
+    this.maxHealth = CONFIG.player.maxHealth;
+  }
+
+  setScore(score) {
+    this.score = score;
+  }
+
+  setHealth(health) {
+    this.health = health;
+  }
+
+  draw() {
+    const ctx = Painter.ctx;
+    const scale = this.game.scaleFactor || 1;
+    const margin = CONFIG.hud.margin * scale;
+
+    ctx.save();
+
+    // Score display (top-left) - scale font size with resolution
+    ctx.fillStyle = CONFIG.colors.hud;
+    const fontSize = 20 * scale;
+    ctx.font = `bold ${fontSize}px monospace`;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(`SCORE: ${this.score}`, margin, margin);
+
+    // Health display (bottom-center) - in the UI area below terrain
+    this.drawHealth(ctx, this.game.width / 2, this.game.height - margin - 40 * scale, scale);
+
+    ctx.restore();
+  }
+
+  /**
+   * Draw health indicator as shield bars (centered at bottom)
+   */
+  drawHealth(ctx, x, y, scale = 1) {
+    const fontSize = 16 * scale;
+    ctx.font = `bold ${fontSize}px monospace`;
+    ctx.textAlign = "center";
+    ctx.fillStyle = CONFIG.colors.hud;
+    ctx.fillText("SHIELD", x, y);
+
+    const barWidth = 120 * scale;
+    const barHeight = 14 * scale;
+    const barX = x - barWidth / 2;
+    const barY = y + 20 * scale;
+
+    // Background bar
+    ctx.fillStyle = "#222222";
+    ctx.fillRect(barX, barY, barWidth, barHeight);
+
+    // Health bar
+    const healthPercent = this.health / this.maxHealth;
+    ctx.fillStyle = healthPercent > 0.3 ? CONFIG.colors.hud : "#ff4444";
+    ctx.fillRect(barX, barY, barWidth * healthPercent, barHeight);
+
+    // Border
+    ctx.strokeStyle = CONFIG.colors.hud;
+    ctx.lineWidth = 2 * scale;
+    ctx.strokeRect(barX, barY, barWidth, barHeight);
+  }
+}