@guinetik/gcanvas 1.0.0

package/demos/js/space/player.js

@@ -0,0 +1,430 @@
+import { GameObject, Rectangle, Circle, Group, Keys, Painter } from "../../../src/index.js";
+import {
+  PLAYER_SPEED,
+  PLAYER_WIDTH,
+  PLAYER_HEIGHT,
+  STARPOWER_DURATION,
+  STARPOWER_SPEED_MULTIPLIER,
+  SHIELD_MAX_ENERGY,
+  SHIELD_DRAIN_RATE,
+  SHIELD_RECHARGE_RATE,
+  SHIELD_RECHARGE_DELAY,
+} from "./constants.js";
+
+export class Player extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: PLAYER_WIDTH,
+      height: PLAYER_HEIGHT,
+      ...options,
+    });
+
+    // Classic arcade-style spaceship using grouped shapes
+    this.ship = new Group({});
+
+    // Main hull (center body)
+    const hull = new Rectangle({
+      width: 16,
+      height: 12,
+      y: 2,
+      color: "#00ff00",
+    });
+
+    // Cannon (top center)
+    const cannon = new Rectangle({
+      width: 4,
+      height: 10,
+      y: -8,
+      color: "#00ff00",
+    });
+
+    // Cannon tip
+    const cannonTip = new Rectangle({
+      width: 2,
+      height: 4,
+      y: -14,
+      color: "#88ff88",
+    });
+
+    // Left wing
+    const leftWing = new Rectangle({
+      width: 10,
+      height: 6,
+      x: -13,
+      y: 5,
+      color: "#00dd00",
+    });
+
+    // Right wing
+    const rightWing = new Rectangle({
+      width: 10,
+      height: 6,
+      x: 13,
+      y: 5,
+      color: "#00dd00",
+    });
+
+    // Left wing detail
+    const leftWingTip = new Rectangle({
+      width: 4,
+      height: 4,
+      x: -19,
+      y: 6,
+      color: "#00aa00",
+    });
+
+    // Right wing detail
+    const rightWingTip = new Rectangle({
+      width: 4,
+      height: 4,
+      x: 19,
+      y: 6,
+      color: "#00aa00",
+    });
+
+    // Engine glow left
+    const engineLeft = new Rectangle({
+      width: 4,
+      height: 4,
+      x: -6,
+      y: 10,
+      color: "#ffaa00",
+    });
+
+    // Engine glow right
+    const engineRight = new Rectangle({
+      width: 4,
+      height: 4,
+      x: 6,
+      y: 10,
+      color: "#ffaa00",
+    });
+
+    this.ship.add(hull);
+    this.ship.add(cannon);
+    this.ship.add(cannonTip);
+    this.ship.add(leftWing);
+    this.ship.add(rightWing);
+    this.ship.add(leftWingTip);
+    this.ship.add(rightWingTip);
+    this.ship.add(engineLeft);
+    this.ship.add(engineRight);
+
+    // Store refs for animation and color changes
+    this.engineLeft = engineLeft;
+    this.engineRight = engineRight;
+    this.engineTimer = 0;
+    this.cannon = cannon;
+    this.cannonTip = cannonTip;
+    this.leftWing = leftWing;
+    this.rightWing = rightWing;
+    this.leftWingTip = leftWingTip;
+    this.rightWingTip = rightWingTip;
+
+    // Banking/tilt when moving
+    this.targetTilt = 0;
+    this.currentTilt = 0;
+    this.maxTilt = 15; // Max degrees of rotation
+    this.tiltSpeed = 8; // How fast to reach target tilt
+
+    this.canShoot = true;
+    this.shootCooldown = 0.25; // seconds (base cooldown)
+    this.shootTimer = 0;
+
+    // Star power state
+    this.starPower = false;
+    this.starPowerTimer = 0;
+    this.starPowerFlash = 0;
+
+    // Store hull ref for star power glow
+    this.hull = hull;
+    this.originalHullColor = "#00ff00";
+
+    // Upgrades - applied as player progresses
+    this.speedMultiplier = 1.0; // Movement speed multiplier
+    this.shootCooldownMultiplier = 1.0; // Lower = faster shooting
+    this.tripleShot = false; // Shoots 3 bullets in spread pattern
+
+    // Shield system (unlocked after level 9 boss)
+    this.shieldUnlocked = false;
+    this.shieldActive = false;
+    this.shieldEnergy = SHIELD_MAX_ENERGY;
+    this.shieldRechargeDelay = 0; // Time before recharge starts
+    this.shieldFlash = 0; // For visual effect
+
+  }
+
+  /**
+   * Apply upgrade after completing a level
+   * Ship color progression: Green → Blue → Yellow → Red
+   */
+  applyUpgrade(upgradeType) {
+    switch (upgradeType) {
+      case "speed1":
+        // After level 3 boss - faster movement, BLUE ship
+        this.speedMultiplier = 1.4; // 40% faster (very noticeable)
+        this.hull.color = "#0088ff";
+        this.originalHullColor = "#0088ff";
+        this.cannon.color = "#0088ff";
+        this.cannonTip.color = "#44aaff";
+        this.leftWing.color = "#0066dd";
+        this.rightWing.color = "#0066dd";
+        this.leftWingTip.color = "#0044aa";
+        this.rightWingTip.color = "#0044aa";
+        break;
+      case "firerate1":
+        // After level 4 - faster shooting, YELLOW ship
+        this.shootCooldownMultiplier = 0.6; // 40% faster shooting
+        this.hull.color = "#ffdd00";
+        this.originalHullColor = "#ffdd00";
+        this.cannon.color = "#ffdd00";
+        this.cannonTip.color = "#ffff44";
+        this.leftWing.color = "#ddbb00";
+        this.rightWing.color = "#ddbb00";
+        this.leftWingTip.color = "#aa8800";
+        this.rightWingTip.color = "#aa8800";
+        break;
+      case "speed2":
+        // After level 5 - even faster movement (keep yellow, brighter)
+        this.speedMultiplier = 1.7; // 70% faster total
+        this.hull.color = "#ffff00";
+        this.originalHullColor = "#ffff00";
+        this.cannonTip.color = "#ffffff";
+        break;
+      case "tripleshot":
+        // After level 6 boss - triple shot, RED ship (final form)
+        this.tripleShot = true;
+        this.hull.color = "#ff0000";
+        this.originalHullColor = "#ff0000";
+        this.cannon.color = "#ff0000";
+        this.cannonTip.color = "#ff4444";
+        this.leftWing.color = "#dd0000";
+        this.rightWing.color = "#dd0000";
+        this.leftWingTip.color = "#aa0000";
+        this.rightWingTip.color = "#aa0000";
+        break;
+      case "shield":
+        // After level 9 boss - unlock shield ability
+        this.shieldUnlocked = true;
+        this.shieldEnergy = SHIELD_MAX_ENERGY;
+        break;
+    }
+  }
+
+  /**
+   * Reset upgrades (on game restart)
+   */
+  resetUpgrades() {
+    this.speedMultiplier = 1.0;
+    this.shootCooldownMultiplier = 1.0;
+    this.tripleShot = false;
+
+    // Reset shield
+    this.shieldUnlocked = false;
+    this.shieldActive = false;
+    this.shieldEnergy = SHIELD_MAX_ENERGY;
+    this.shieldRechargeDelay = 0;
+
+    // Reset colors to original green
+    this.hull.color = "#00ff00";
+    this.originalHullColor = "#00ff00";
+    this.cannon.color = "#00ff00";
+    this.cannonTip.color = "#88ff88";
+    this.leftWing.color = "#00dd00";
+    this.rightWing.color = "#00dd00";
+    this.leftWingTip.color = "#00aa00";
+    this.rightWingTip.color = "#00aa00";
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Only allow movement during active gameplay (including boss fight)
+    const canMove = this.game.gameState === "playing" || this.game.gameState === "bossfight";
+
+    // Handle movement (arrow keys and WASD)
+    const movingLeft = canMove && (Keys.isDown(Keys.LEFT) || Keys.isDown("a") || Keys.isDown("A"));
+    const movingRight = canMove && (Keys.isDown(Keys.RIGHT) || Keys.isDown("d") || Keys.isDown("D"));
+
+    // Speed boost during star power + upgrade multiplier
+    let speed = PLAYER_SPEED * this.speedMultiplier;
+    if (this.starPower) {
+      speed *= STARPOWER_SPEED_MULTIPLIER;
+    }
+
+    if (movingLeft) {
+      this.x -= speed * dt;
+      this.targetTilt = -this.maxTilt;
+    }
+    if (movingRight) {
+      this.x += speed * dt;
+      this.targetTilt = this.maxTilt;
+    }
+    if (!movingLeft && !movingRight) {
+      this.targetTilt = 0;
+    }
+
+    // Smoothly interpolate current tilt toward target
+    this.currentTilt += (this.targetTilt - this.currentTilt) * this.tiltSpeed * dt;
+
+    // Clamp to screen bounds (only during gameplay)
+    if (canMove) {
+      const halfWidth = PLAYER_WIDTH / 2;
+      this.x = Math.max(halfWidth, Math.min(this.game.width - halfWidth, this.x));
+    }
+
+    // Animate engine flicker
+    this.engineTimer += dt * 20;
+    const flicker = Math.sin(this.engineTimer) > 0;
+    this.engineLeft.color = flicker ? "#ffaa00" : "#ff6600";
+    this.engineRight.color = flicker ? "#ff6600" : "#ffaa00";
+
+    // Star power timer and effects
+    if (this.starPower) {
+      this.starPowerTimer -= dt;
+      this.starPowerFlash += dt * 15;
+
+      // Rainbow/golden glow effect
+      const hue = (Math.sin(this.starPowerFlash) + 1) / 2;
+      const colors = ["#ffff00", "#ff8800", "#ffff00", "#ffffff"];
+      const colorIndex = Math.floor(this.starPowerFlash * 2) % colors.length;
+      this.hull.color = colors[colorIndex];
+
+      // End star power
+      if (this.starPowerTimer <= 0) {
+        this.starPower = false;
+        this.hull.color = this.originalHullColor;
+        this.shootCooldown = 0.25; // Reset to normal
+      }
+    }
+
+    // Shooting cooldown (faster during star power, affected by upgrade)
+    let currentCooldown = this.shootCooldown * this.shootCooldownMultiplier;
+    if (this.starPower) {
+      currentCooldown = 0.08; // Star power overrides with very fast shooting
+    }
+    if (!this.canShoot) {
+      this.shootTimer += dt;
+      if (this.shootTimer >= currentCooldown) {
+        this.canShoot = true;
+        this.shootTimer = 0;
+      }
+    }
+
+    // Handle shooting (only during active gameplay, including boss fight)
+    if (Keys.isDown(Keys.SPACE) && this.canShoot && canMove) {
+      this.shoot();
+    }
+
+    // Shield system
+    if (this.shieldUnlocked && canMove) {
+      const shiftPressed = Keys.isDown(Keys.SHIFT);
+
+      if (shiftPressed && this.shieldEnergy > 0) {
+        // Activate shield
+        this.shieldActive = true;
+        this.shieldEnergy -= SHIELD_DRAIN_RATE * dt;
+        this.shieldEnergy = Math.max(0, this.shieldEnergy);
+        this.shieldRechargeDelay = SHIELD_RECHARGE_DELAY;
+        this.shieldFlash += dt * 10;
+      } else {
+        // Deactivate shield
+        this.shieldActive = false;
+
+        // Recharge after delay
+        if (this.shieldRechargeDelay > 0) {
+          this.shieldRechargeDelay -= dt;
+        } else {
+          this.shieldEnergy += SHIELD_RECHARGE_RATE * dt;
+          this.shieldEnergy = Math.min(SHIELD_MAX_ENERGY, this.shieldEnergy);
+        }
+      }
+    }
+  }
+
+  activateStarPower() {
+    this.starPower = true;
+    this.starPowerTimer = STARPOWER_DURATION;
+    this.starPowerFlash = 0;
+  }
+
+  shoot() {
+    if (!this.canShoot) return;
+    this.canShoot = false;
+
+    if (this.tripleShot) {
+      // Triple shot: center + two angled bullets
+      this.game.spawnPlayerBullet(this.x, this.y - PLAYER_HEIGHT, 0); // Center
+      this.game.spawnPlayerBullet(this.x - 8, this.y - PLAYER_HEIGHT, -15); // Left angle
+      this.game.spawnPlayerBullet(this.x + 8, this.y - PLAYER_HEIGHT, 15); // Right angle
+    } else {
+      this.game.spawnPlayerBullet(this.x, this.y - PLAYER_HEIGHT, 0);
+    }
+  }
+
+  draw() {
+    super.draw();
+
+    // Render ship first
+    this.ship.x = 0;
+    this.ship.y = 0;
+    this.ship.rotation = this.currentTilt; // Apply banking tilt
+    this.ship.render();
+
+    // Draw shield arc on top if unlocked (shows energy level as arc size)
+    if (this.shieldUnlocked && this.shieldEnergy > 0) {
+      const ctx = Painter.ctx;
+      const energyPercent = this.shieldEnergy / SHIELD_MAX_ENERGY;
+
+      // Arc radius and thickness
+      const radius = 30;
+      const lineWidth = this.shieldActive ? 4 : 2;
+
+      // Arc spans from energyPercent (full = 180 degrees, empty = 0)
+      // Arc goes from left to right across front of ship
+      const arcAngle = Math.PI * energyPercent; // 0 to PI based on energy
+      const startAngle = Math.PI + (Math.PI - arcAngle) / 2; // Centered at top
+      const endAngle = startAngle + arcAngle;
+
+      // Color based on state - yellow/gold tones
+      let strokeColor, alpha;
+      let o = ctx.globalAlpha;
+      if (this.shieldActive) {
+        // Active shield - bright gold with pulse
+        const pulse = 0.6 + Math.sin(this.shieldFlash) * 0.4;
+        strokeColor = `rgba(255, 255, 255, ${pulse})`;
+      } else if (this.shieldRechargeDelay > 0) {
+        // Recharge delay - dim orange
+        strokeColor = "rgba(255, 255, 255, 1)";
+      } else {
+        // Recharging - gradually brightening yellow
+        const brightness = 0.3 + energyPercent * 0.5;
+        strokeColor = `rgba(255, 255, 255, ${brightness})`;
+      }
+      ctx.save();
+
+      // Explicitly prevent any fill
+      ctx.fillStyle = "transparent";
+
+      // Draw arc stroke only
+      ctx.beginPath();
+      ctx.arc(0, -5, radius, startAngle, endAngle);
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = lineWidth;
+      ctx.lineCap = "round";
+      ctx.stroke();
+
+      // Clear the path to prevent any accidental fills later
+      ctx.beginPath();
+
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Check if shield is currently protecting the player
+   */
+  isShielded() {
+    return this.shieldActive && this.shieldEnergy > 0;
+  }
+}

package/demos/js/space/powerup.js

@@ -0,0 +1,90 @@
+import { GameObject, Circle, TextShape, Group } from "../../../src/index.js";
+import { POWERUP_SIZE, POWERUP_FALL_SPEED } from "./constants.js";
+
+export class PowerUp extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: POWERUP_SIZE,
+      height: POWERUP_SIZE,
+      ...options,
+    });
+
+    this.speed = POWERUP_FALL_SPEED;
+    this.bobTime = Math.random() * Math.PI * 2;
+
+    // Create 1-Up visual - pastel green life icon (cached for performance)
+    this.shape = new Group({ cacheRendering: true });
+
+    // Glowing background
+    const glow = new Circle(POWERUP_SIZE / 2 + 4, {
+      color: "rgba(144, 238, 144, 0.4)",
+    });
+
+    // Main body - pastel green
+    const body = new Circle(POWERUP_SIZE / 2, {
+      color: "#98fb98", // Pale green
+    });
+
+    // "1UP" text
+    this.label = new TextShape("1UP", {
+      font: "bold 10px monospace",
+      color: "#ffffff",
+      align: "center",
+      baseline: "middle",
+    });
+
+    this.shape.add(glow);
+    this.shape.add(body);
+
+    // Store glow for animation
+    this.glow = glow;
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Fall down
+    this.y += this.speed * dt;
+
+    // Bob side to side
+    this.bobTime += dt * 3;
+    this.x += Math.sin(this.bobTime) * 30 * dt;
+
+    // Pulse glow - pastel green
+    const pulse = 0.4 + Math.sin(this.bobTime * 2) * 0.2;
+    this.glow.color = `rgba(144, 238, 144, ${pulse})`;
+
+    // Remove if off screen
+    if (this.y > this.game.height + POWERUP_SIZE) {
+      this.destroy();
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    super.draw();
+
+    this.shape.x = 0;
+    this.shape.y = 0;
+    this.shape.render();
+
+    // Draw label on top
+    this.label.x = 0;
+    this.label.y = 0;
+    this.label.render();
+  }
+
+  destroy() {
+    this.active = false;
+    this.visible = false;
+  }
+
+  getBounds() {
+    return {
+      x: this.x - POWERUP_SIZE / 2,
+      y: this.y - POWERUP_SIZE / 2,
+      width: POWERUP_SIZE,
+      height: POWERUP_SIZE,
+    };
+  }
+}

package/demos/js/space/starfield.js

@@ -0,0 +1,58 @@
+import { GameObject, Circle } from "../../../src/index.js";
+
+export class Starfield extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.stars = [];
+    this.initialized = false;
+  }
+
+  initStars() {
+    if (this.initialized || this.game.width === 0) return;
+    this.initialized = true;
+
+    // Optimized star count - cap at 100 stars max
+    const area = this.game.width * this.game.height;
+    const starCount = Math.min(100, Math.floor(area / 15000)); // ~1 star per 15000 pixels, max 100
+
+    for (let i = 0; i < starCount; i++) {
+      const size = 1 + Math.random() * 1.5;
+      this.stars.push({
+        x: Math.random() * this.game.width,
+        y: Math.random() * this.game.height,
+        size: size,
+        speed: 15 + Math.random() * 30,
+        shape: new Circle(size, {
+          color: `rgba(255,255,255,${0.4 + Math.random() * 0.5})`,
+        }),
+      });
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Initialize stars on first update when dimensions are known
+    if (!this.initialized) {
+      this.initStars();
+    }
+
+    for (const star of this.stars) {
+      star.y += star.speed * dt;
+      if (star.y > this.game.height) {
+        star.y = 0;
+        star.x = Math.random() * this.game.width;
+      }
+    }
+  }
+
+  draw() {
+    super.draw();
+
+    for (const star of this.stars) {
+      star.shape.x = star.x;
+      star.shape.y = star.y;
+      star.shape.render();
+    }
+  }
+}

package/demos/js/space/starpower.js

@@ -0,0 +1,90 @@
+import { GameObject, Circle, Star, Group } from "../../../src/index.js";
+import { POWERUP_SIZE, POWERUP_FALL_SPEED } from "./constants.js";
+
+export class StarPowerUp extends GameObject {
+  constructor(game, options = {}) {
+    super(game, {
+      width: POWERUP_SIZE,
+      height: POWERUP_SIZE,
+      ...options,
+    });
+
+    this.speed = POWERUP_FALL_SPEED * 0.8; // Slightly slower
+    this.bobTime = Math.random() * Math.PI * 2;
+    this.spinAngle = 0;
+
+    // Create star visual using the Star shape
+    this.shape = new Group({});
+
+    // Glowing background
+    const glow = new Circle(POWERUP_SIZE / 2 + 6, {
+      color: "rgba(255, 215, 0, 0.4)",
+    });
+
+    // Main star - golden
+    this.star = new Star(POWERUP_SIZE / 2, 5, 0.5, {
+      color: "#ffd700", // Gold
+    });
+
+    // Inner highlight
+    const innerStar = new Star(POWERUP_SIZE / 4, 5, 0.5, {
+      color: "#ffec8b", // Light gold
+    });
+
+    this.shape.add(glow);
+    this.shape.add(this.star);
+    this.shape.add(innerStar);
+
+    // Store refs for animation
+    this.glow = glow;
+    this.innerStar = innerStar;
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Fall down
+    this.y += this.speed * dt;
+
+    // Bob side to side
+    this.bobTime += dt * 3;
+    this.x += Math.sin(this.bobTime) * 40 * dt;
+
+    // Spin the star
+    this.spinAngle += dt * 180; // Degrees per second
+    this.star.rotation = this.spinAngle;
+    this.innerStar.rotation = -this.spinAngle * 0.5;
+
+    // Pulse glow
+    const pulse = 0.4 + Math.sin(this.bobTime * 2) * 0.2;
+    this.glow.color = `rgba(255, 215, 0, ${pulse})`;
+
+    // Remove if off screen
+    if (this.y > this.game.height + POWERUP_SIZE) {
+      this.destroy();
+    }
+  }
+
+  draw() {
+    if (!this.visible) return;
+    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 - POWERUP_SIZE / 2,
+      y: this.y - POWERUP_SIZE / 2,
+      width: POWERUP_SIZE,
+      height: POWERUP_SIZE,
+    };
+  }
+}