@guinetik/gcanvas 1.0.1 → 1.0.2

package/demos/js/dino.js

@@ -0,0 +1,1420 @@
+import {
+  Game,
+  GameObject,
+  Text,
+  Rectangle,
+  Circle,
+  Keys,
+  FPSCounter,
+  PlatformerScene,
+  Collision,
+  Painter,
+  Position,
+  Group,
+  Synth,
+  Sprite,
+} from "../../src/index.js";
+
+// ==================== Configuration ====================
+const CONFIG = {
+  // Theme - Vercel meets Terminal (default)
+  theme: {
+    background: "#000000",
+    primary: "#00ff00",      // Terminal green
+    secondary: "#0a0a0a",
+    accent: "#00cc00",
+    text: "#ffffff",
+    textDim: "#666666",
+    ground: "#1a1a1a",
+    groundLine: "#00ff00",
+    obstacle: "#00ff00",
+    dino: "#00ff00",
+  },
+
+  // Theme - 80s Outrun (unlocks at 1000 points)
+  outrunTheme: {
+    background: "#1a1a2e",    // Deep purple-blue
+    primary: "#ff6b9d",       // Hot pink
+    secondary: "#c44569",
+    accent: "#f8b500",        // Orange/gold
+    text: "#ffffff",
+    textDim: "#9d65c9",       // Purple
+    ground: "#16213e",
+    groundLine: "#ff6b9d",
+    obstacle: "#f8b500",      // Orange palm trees
+    dino: "#00d9ff",          // Cyan dino
+    sun: "#ff6b9d",           // Sun gradient colors
+    sunGlow: "#f8b500",
+  },
+
+  // Level transition thresholds
+  outrunStartScore: 2000,     // Enter outrun at 2k
+  outrunDuration: 1000,       // Stay in outrun for 1k points
+  levelCycle: 3000,           // Full cycle length (2k + 1k)
+
+  // Game settings
+  gravity: 2800,
+  jumpVelocity: -750,
+
+  // Player (Dino)
+  dinoScale: 1.0,
+
+  // Ground - centered layout
+  groundHeight: 2,
+
+  // Obstacles (Cacti / Palm Trees)
+  cactusWidth: 15,
+  cactusMinHeight: 30,
+  cactusMaxHeight: 50,
+  cactusSpawnMinInterval: 1.0,
+  cactusSpawnMaxInterval: 2.2,
+
+  // Scrolling
+  scrollSpeed: 350,
+  scrollAcceleration: 8,
+  maxScrollSpeed: 800,
+
+  // Sound
+  soundEnabled: true,
+  masterVolume: 0.3,
+};
+
+// ==================== Sound Effects ====================
+/**
+ * SFX - Retro 8-bit style sound effects for the dino game
+ */
+class SFX {
+  static initialized = false;
+
+  static init() {
+    if (this.initialized || !CONFIG.soundEnabled) return;
+
+    Synth.init({ masterVolume: CONFIG.masterVolume });
+    this.initialized = true;
+  }
+
+  static async resume() {
+    if (!this.initialized) return;
+    await Synth.resume();
+  }
+
+  /**
+   * Jump sound - Quick upward sweep
+   */
+  static jump() {
+    if (!this.initialized) return;
+
+    // Retro jump: quick upward frequency sweep
+    Synth.osc.sweep(150, 400, 0.15, {
+      type: "square",
+      volume: 0.25,
+    });
+  }
+
+  /**
+   * Score milestone sound - Quick double beep
+   */
+  static milestone() {
+    if (!this.initialized) return;
+
+    const now = Synth.now;
+
+    // Two quick beeps
+    Synth.osc.tone(880, 0.08, {
+      type: "square",
+      volume: 0.2,
+      attack: 0.01,
+      decay: 0.02,
+      sustain: 0.5,
+      release: 0.05,
+      startTime: now,
+    });
+
+    Synth.osc.tone(1100, 0.1, {
+      type: "square",
+      volume: 0.2,
+      attack: 0.01,
+      decay: 0.02,
+      sustain: 0.5,
+      release: 0.05,
+      startTime: now + 0.1,
+    });
+  }
+
+  /**
+   * Game over sound - Sad descending tone
+   */
+  static gameOver() {
+    if (!this.initialized) return;
+
+    const now = Synth.now;
+
+    // Descending arpeggio
+    const notes = [440, 349, 293, 220];
+    notes.forEach((freq, i) => {
+      Synth.osc.tone(freq, 0.2, {
+        type: "square",
+        volume: 0.25,
+        attack: 0.01,
+        decay: 0.05,
+        sustain: 0.6,
+        release: 0.15,
+        startTime: now + i * 0.12,
+      });
+    });
+
+    // Final low buzz
+    Synth.osc.tone(110, 0.4, {
+      type: "sawtooth",
+      volume: 0.15,
+      attack: 0.05,
+      decay: 0.1,
+      sustain: 0.3,
+      release: 0.25,
+      startTime: now + 0.5,
+    });
+  }
+
+  /**
+   * Start game sound - Ascending beep
+   */
+  static start() {
+    if (!this.initialized) return;
+
+    Synth.osc.sweep(200, 600, 0.2, {
+      type: "square",
+      volume: 0.2,
+    });
+  }
+
+  /**
+   * Theme transition sound - Synth flourish
+   */
+  static themeTransition(toOutrun = true) {
+    if (!this.initialized) return;
+
+    const now = Synth.now;
+
+    if (toOutrun) {
+      // Ascending arpeggio for entering outrun mode
+      const notes = [330, 440, 550, 660, 880];
+      notes.forEach((freq, i) => {
+        Synth.osc.tone(freq, 0.15, {
+          type: "sawtooth",
+          volume: 0.2,
+          attack: 0.01,
+          decay: 0.03,
+          sustain: 0.7,
+          release: 0.1,
+          startTime: now + i * 0.08,
+        });
+      });
+    } else {
+      // Descending for returning to normal
+      const notes = [660, 550, 440, 330];
+      notes.forEach((freq, i) => {
+        Synth.osc.tone(freq, 0.12, {
+          type: "square",
+          volume: 0.15,
+          attack: 0.01,
+          decay: 0.02,
+          sustain: 0.6,
+          release: 0.08,
+          startTime: now + i * 0.06,
+        });
+      });
+    }
+  }
+}
+
+// ==================== Dino Shape Factory ====================
+/**
+ * Creates pixelated T-Rex dinosaur frames using rectangles
+ * Supports different leg positions for walking animation
+ */
+class DinoShapeFactory {
+  /**
+   * Creates a dino frame with specified leg position
+   * @param {Object} options
+   * @param {string} [options.color] - Dino color
+   * @param {number} [options.scale] - Scale factor
+   * @param {string} [options.legPose] - 'stand' | 'left' | 'right'
+   * @returns {Group} A Group containing the dino shape
+   */
+  static createFrame(options = {}) {
+    const color = options.color || CONFIG.theme.dino;
+    const scale = options.scale || 1;
+    const legPose = options.legPose || 'stand';
+    const px = 3 * scale;
+
+    const group = new Group({});
+
+    // Body pixels (shared across all frames) - tail handled separately
+    const bodyPixels = [
+      // Head (top)
+      { x: 6, y: 0, w: 7, h: 1 },
+      { x: 5, y: 1, w: 9, h: 1 },
+      { x: 5, y: 2, w: 9, h: 1 },
+      // Eye (gap)
+      { x: 5, y: 3, w: 4, h: 1 },
+      { x: 11, y: 3, w: 3, h: 1 },
+      // Mouth area
+      { x: 5, y: 4, w: 9, h: 1 },
+      { x: 3, y: 5, w: 11, h: 1 },
+      { x: 2, y: 6, w: 8, h: 1 },
+      // Neck
+      { x: 2, y: 7, w: 5, h: 1 },
+      { x: 1, y: 8, w: 5, h: 1 },
+      // Body
+      { x: 0, y: 9, w: 6, h: 1 },
+      { x: 0, y: 10, w: 6, h: 1 },
+      { x: 0, y: 11, w: 6, h: 1 },
+      // Tiny T-Rex arms (high on chest, classic style)
+      { x: 5, y: 7, w: 2, h: 1 },  // Upper arm
+      { x: 6, y: 8, w: 2, h: 1 },  // Forearm
+      // Lower body (connects to legs)
+      { x: 0, y: 12, w: 6, h: 1 },
+      { x: 0, y: 13, w: 6, h: 1 },
+    ];
+
+    // Tail pixels based on pose
+    let tailPixels = [];
+    if (legPose === 'jump') {
+      // Tail up during jump
+      tailPixels = [
+        { x: -3, y: 9, w: 3, h: 1 },
+        { x: -4, y: 8, w: 4, h: 1 },
+        { x: -5, y: 7, w: 4, h: 1 },
+        { x: -6, y: 6, w: 3, h: 1 },
+      ];
+    } else {
+      // Normal tail position
+      tailPixels = [
+        { x: -3, y: 10, w: 3, h: 1 },
+        { x: -4, y: 11, w: 4, h: 1 },
+        { x: -5, y: 12, w: 5, h: 1 },
+        { x: -5, y: 13, w: 6, h: 1 },
+      ];
+    }
+
+    // Leg pixels based on pose
+    let legPixels = [];
+
+    switch (legPose) {
+      case 'left':
+        // Left leg forward, right leg back
+        legPixels = [
+          // Left leg (forward, extended)
+          { x: 0, y: 14, w: 2, h: 1 },
+          { x: -1, y: 15, w: 2, h: 1 },
+          { x: -2, y: 16, w: 3, h: 1 },
+          // Right leg (back, lifted)
+          { x: 4, y: 14, w: 2, h: 1 },
+          { x: 5, y: 15, w: 2, h: 1 },
+        ];
+        break;
+
+      case 'right':
+        // Right leg forward, left leg back
+        legPixels = [
+          // Left leg (back, lifted)
+          { x: 0, y: 14, w: 2, h: 1 },
+          { x: -1, y: 15, w: 2, h: 1 },
+          // Right leg (forward, extended)
+          { x: 4, y: 14, w: 2, h: 1 },
+          { x: 5, y: 15, w: 2, h: 1 },
+          { x: 6, y: 16, w: 3, h: 1 },
+        ];
+        break;
+
+      case 'jump':
+        // Legs tucked together during jump
+        legPixels = [
+          { x: 1, y: 14, w: 4, h: 1 },
+          { x: 2, y: 15, w: 3, h: 1 },
+          { x: 3, y: 16, w: 2, h: 1 },
+        ];
+        break;
+
+      case 'stand':
+      default:
+        // Both legs down (standing/idle)
+        legPixels = [
+          { x: 0, y: 14, w: 2, h: 1 },
+          { x: 4, y: 14, w: 2, h: 1 },
+          { x: 0, y: 15, w: 2, h: 1 },
+          { x: 4, y: 15, w: 2, h: 1 },
+          { x: -1, y: 16, w: 3, h: 1 },
+          { x: 3, y: 16, w: 3, h: 1 },
+        ];
+        break;
+    }
+
+    const allPixels = [...bodyPixels, ...tailPixels, ...legPixels];
+
+    // Center offset
+    const offsetX = -3 * px;
+    const offsetY = -8 * px;
+
+    allPixels.forEach(p => {
+      const rect = new Rectangle({
+        x: p.x * px + offsetX + (p.w * px) / 2,
+        y: p.y * px + offsetY + (p.h * px) / 2,
+        width: p.w * px,
+        height: p.h * px,
+        color: color,
+      });
+      group.add(rect);
+    });
+
+    return group;
+  }
+
+  /**
+   * Creates all walking animation frames
+   * @param {Object} options
+   * @returns {Group[]} Array of frame groups
+   */
+  static createWalkFrames(options = {}) {
+    return [
+      this.createFrame({ ...options, legPose: 'left' }),
+      this.createFrame({ ...options, legPose: 'stand' }),
+      this.createFrame({ ...options, legPose: 'right' }),
+      this.createFrame({ ...options, legPose: 'stand' }),
+    ];
+  }
+
+  /**
+   * Creates the idle frame
+   * @param {Object} options
+   * @returns {Group}
+   */
+  static createIdleFrame(options = {}) {
+    return this.createFrame({ ...options, legPose: 'stand' });
+  }
+
+  /**
+   * Creates the jump frame with tucked legs and raised tail
+   * @param {Object} options
+   * @returns {Group}
+   */
+  static createJumpFrame(options = {}) {
+    return this.createFrame({ ...options, legPose: 'jump' });
+  }
+}
+
+// ==================== Dino (Player) ====================
+/**
+ * Dino - The player character as an animated Sprite
+ */
+class Dino extends Sprite {
+  constructor(game, options = {}) {
+    super(game, {
+      ...options,
+      frameRate: 10,
+      loop: true,
+    });
+
+    this.width = 50;
+    this.height = 55;
+    this.vx = 0;
+    this.vy = 0;
+    this._grounded = true;
+    this._isRunning = false; // Track if game has started
+    this._currentTheme = CONFIG.theme;
+    this._targetRotation = 0;
+    this._rotationSpeed = 8; // How fast to lerp rotation
+
+    this.buildAnimations(CONFIG.theme);
+
+    // Start with idle animation (legs don't move before game starts)
+    this.stopAnimation('idle');
+  }
+
+  buildAnimations(theme) {
+    // Clear existing animations
+    this._animations.clear();
+
+    const frameOptions = {
+      color: theme.dino,
+      scale: CONFIG.dinoScale,
+    };
+
+    // Add animations
+    this.addAnimation('walk', DinoShapeFactory.createWalkFrames(frameOptions), {
+      frameRate: 12,
+    });
+    this.addAnimation('idle', [DinoShapeFactory.createIdleFrame(frameOptions)], {
+      loop: false,
+    });
+    this.addAnimation('jump', [DinoShapeFactory.createJumpFrame(frameOptions)], {
+      loop: false,
+    });
+  }
+
+  setTheme(theme) {
+    if (this._currentTheme === theme) return;
+    this._currentTheme = theme;
+    const currentAnim = this.currentAnimationName;
+    this.buildAnimations(theme);
+    if (currentAnim) {
+      this.playAnimation(currentAnim);
+    }
+  }
+
+  startRunning() {
+    this._isRunning = true;
+    this.playAnimation('walk');
+  }
+
+  stopRunning() {
+    this._isRunning = false;
+    this.stopAnimation('idle');
+  }
+
+  update(dt) {
+    super.update(dt);
+
+    // Don't animate if game hasn't started
+    if (!this._isRunning) return;
+
+    // Switch animations based on state
+    if (!this._grounded) {
+      if (this.currentAnimationName !== 'jump') {
+        this.playAnimation('jump');
+      }
+      // Target tilt when jumping (upward)
+      this._targetRotation = -0.3;
+    } else {
+      if (this.currentAnimationName !== 'walk') {
+        this.playAnimation('walk');
+      }
+      // Reset rotation when grounded
+      this._targetRotation = 0;
+    }
+
+    // Smoothly animate rotation towards target
+    const rotationDiff = this._targetRotation - this.rotation;
+    this.rotation += rotationDiff * this._rotationSpeed * dt;
+  }
+
+  getBounds() {
+    // Shrink hitbox for fairness
+    const shrink = 8;
+    return {
+      x: this.x - this.width / 2 + shrink,
+      y: this.y - this.height / 2 + shrink,
+      width: this.width - shrink * 2,
+      height: this.height - shrink * 2,
+    };
+  }
+}
+
+// ==================== Obstacle (Cactus / Palm Tree) ====================
+/**
+ * Obstacle - A pixel-art style obstacle (cactus or palm tree)
+ */
+class Obstacle extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.width = CONFIG.cactusWidth;
+    this.height = options.height || CONFIG.cactusMinHeight +
+      Math.random() * (CONFIG.cactusMaxHeight - CONFIG.cactusMinHeight);
+    this.isPalmTree = options.isPalmTree || false;
+    this.theme = options.theme || CONFIG.theme;
+
+    this.group = new Group({});
+    this.build();
+  }
+
+  build() {
+    this.group.clear();
+
+    if (this.isPalmTree) {
+      this.buildPalmTree();
+    } else {
+      this.buildCactus();
+    }
+  }
+
+  buildCactus() {
+    const c = this.theme.obstacle;
+    const w = this.width;
+    const h = this.height;
+
+    // Main stem
+    this.group.add(new Rectangle({
+      x: 0,
+      y: 0,
+      width: w * 0.6,
+      height: h,
+      color: c,
+    }));
+
+    // Left arm (if tall enough)
+    if (h > 35) {
+      this.group.add(new Rectangle({
+        x: -w * 0.5,
+        y: -h * 0.2,
+        width: w * 0.4,
+        height: h * 0.3,
+        color: c,
+      }));
+      this.group.add(new Rectangle({
+        x: -w * 0.5,
+        y: -h * 0.35,
+        width: w * 0.4,
+        height: w * 0.4,
+        color: c,
+      }));
+    }
+
+    // Right arm (if even taller)
+    if (h > 45) {
+      this.group.add(new Rectangle({
+        x: w * 0.5,
+        y: -h * 0.1,
+        width: w * 0.4,
+        height: h * 0.25,
+        color: c,
+      }));
+      this.group.add(new Rectangle({
+        x: w * 0.5,
+        y: -h * 0.27,
+        width: w * 0.4,
+        height: w * 0.4,
+        color: c,
+      }));
+    }
+  }
+
+  buildPalmTree() {
+    const trunkColor = "#8B4513"; // Brown trunk
+    const leafColor = this.theme.obstacle; // Orange/gold leaves
+    const w = this.width;
+    const h = this.height * 1.5; // Palm trees are taller
+
+    // Trunk (slightly curved look with segments)
+    const trunkWidth = w * 0.4;
+    const segments = 4;
+    for (let i = 0; i < segments; i++) {
+      const segY = (i / segments) * h - h * 0.3;
+      const segH = h / segments + 2;
+      this.group.add(new Rectangle({
+        x: (i % 2 === 0 ? 1 : -1) * 1, // Slight wobble
+        y: segY,
+        width: trunkWidth,
+        height: segH,
+        color: trunkColor,
+      }));
+    }
+
+    // Palm fronds (leaves) - radiating from top
+    const leafLength = w * 2.5;
+    const leafWidth = w * 0.3;
+    const topY = -h * 0.5 - 5;
+
+    // Left fronds
+    this.group.add(new Rectangle({
+      x: -leafLength * 0.4,
+      y: topY - 5,
+      width: leafLength,
+      height: leafWidth,
+      color: leafColor,
+    }));
+    this.group.add(new Rectangle({
+      x: -leafLength * 0.3,
+      y: topY - 12,
+      width: leafLength * 0.8,
+      height: leafWidth,
+      color: leafColor,
+    }));
+
+    // Right fronds
+    this.group.add(new Rectangle({
+      x: leafLength * 0.4,
+      y: topY - 5,
+      width: leafLength,
+      height: leafWidth,
+      color: leafColor,
+    }));
+    this.group.add(new Rectangle({
+      x: leafLength * 0.3,
+      y: topY - 12,
+      width: leafLength * 0.8,
+      height: leafWidth,
+      color: leafColor,
+    }));
+
+    // Center/top fronds
+    this.group.add(new Rectangle({
+      x: 0,
+      y: topY - 18,
+      width: leafLength * 0.6,
+      height: leafWidth,
+      color: leafColor,
+    }));
+
+    // Coconuts (small circles near top)
+    const coconutColor = "#654321";
+    this.group.add(new Circle({
+      x: -3,
+      y: topY + 3,
+      radius: 4,
+      color: coconutColor,
+    }));
+    this.group.add(new Circle({
+      x: 4,
+      y: topY + 5,
+      radius: 4,
+      color: coconutColor,
+    }));
+  }
+
+  draw() {
+    super.draw();
+    this.group.render();
+  }
+
+  getBounds() {
+    // Use consistent hitbox regardless of visual style
+    return {
+      x: this.x - this.width / 2,
+      y: this.y - this.height / 2,
+      width: this.width,
+      height: this.height,
+    };
+  }
+}
+
+// Alias for backwards compatibility
+const Cactus = Obstacle;
+
+// ==================== Ground ====================
+/**
+ * Ground - Terminal-style ground with scrolling texture
+ */
+class Ground extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.groundWidth = options.width || game.width * 3;
+    this.scrollOffset = 0;
+    this._theme = CONFIG.theme;
+
+    // Main ground line
+    this.line = new Rectangle({
+      width: this.groundWidth,
+      height: CONFIG.groundHeight,
+      color: this._theme.groundLine,
+    });
+
+    // Generate ground texture marks (will scroll)
+    this.marks = [];
+    const markSpacing = 15;
+    const numMarks = Math.ceil(this.groundWidth / markSpacing) + 10;
+    for (let i = 0; i < numMarks; i++) {
+      // Different mark types for variety
+      const type = Math.random();
+      if (type < 0.3) {
+        // Small dash
+        this.marks.push({
+          baseX: i * markSpacing,
+          y: 4 + Math.random() * 3,
+          width: 2 + Math.random() * 4,
+          height: 1,
+        });
+      } else if (type < 0.5) {
+        // Tall tick
+        this.marks.push({
+          baseX: i * markSpacing,
+          y: 3,
+          width: 1,
+          height: 3 + Math.random() * 4,
+        });
+      } else if (type < 0.6) {
+        // Double dash
+        this.marks.push({
+          baseX: i * markSpacing,
+          y: 4,
+          width: 6 + Math.random() * 8,
+          height: 1,
+        });
+        this.marks.push({
+          baseX: i * markSpacing + 2,
+          y: 7,
+          width: 4 + Math.random() * 4,
+          height: 1,
+        });
+      }
+    }
+    this.markCycleWidth = numMarks * markSpacing;
+  }
+
+  setTheme(theme) {
+    this._theme = theme;
+    this.line.color = theme.groundLine;
+  }
+
+  setScrollOffset(offset) {
+    this.scrollOffset = offset % this.markCycleWidth;
+  }
+
+  draw() {
+    super.draw();
+    this.line.render();
+
+    // Draw scrolling ground texture
+    Painter.useCtx((ctx) => {
+      ctx.fillStyle = this._theme.textDim;
+      const startX = -this.groundWidth / 2;
+      this.marks.forEach(m => {
+        // Calculate scrolled position
+        let x = startX + m.baseX - this.scrollOffset;
+        // Wrap around
+        while (x < startX - 20) x += this.markCycleWidth;
+        while (x > startX + this.groundWidth) x -= this.markCycleWidth;
+        ctx.fillRect(x, m.y, m.width, m.height);
+      });
+    });
+  }
+}
+
+// ==================== Sky Layer ====================
+/**
+ * SkyLayer - Parallax sky with Tron clouds or Outrun sun
+ */
+class SkyLayer extends GameObject {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.cloudWidth = game.width * 2;
+    this.scrollOffset = 0;
+    this._theme = CONFIG.theme;
+    this._isOutrunMode = false;
+
+    // Generate cloud grid lines
+    this.gridLines = [];
+    this.glowLines = [];
+
+    // Horizontal scan lines (main cloud layer)
+    const numLines = 8;
+    for (let i = 0; i < numLines; i++) {
+      const y = -150 + i * 25 + (Math.random() - 0.5) * 10;
+      const segments = [];
+
+      // Create broken line segments for cloud effect
+      let x = 0;
+      while (x < this.cloudWidth) {
+        if (Math.random() > 0.4) {
+          const segWidth = 50 + Math.random() * 150;
+          const opacity = 0.1 + Math.random() * 0.3;
+          segments.push({
+            x: x - this.cloudWidth / 2,
+            width: segWidth,
+            opacity,
+            glow: Math.random() > 0.7,
+          });
+        }
+        x += 30 + Math.random() * 80;
+      }
+
+      this.gridLines.push({ y, segments });
+    }
+
+    // Vertical grid lines (sparse, for depth)
+    const numVerticals = 12;
+    for (let i = 0; i < numVerticals; i++) {
+      const x = (i / numVerticals) * this.cloudWidth - this.cloudWidth / 2;
+      if (Math.random() > 0.5) {
+        this.glowLines.push({
+          x,
+          y1: -180 + Math.random() * 30,
+          y2: -80 + Math.random() * 40,
+          opacity: 0.05 + Math.random() * 0.15,
+        });
+      }
+    }
+  }
+
+  setTheme(theme, isOutrun = false) {
+    this._theme = theme;
+    this._isOutrunMode = isOutrun;
+  }
+
+  setScrollOffset(offset) {
+    this.scrollOffset = offset % this.cloudWidth;
+  }
+
+  drawOutrunSun(ctx) {
+    const sunX = 0;
+    const sunY = -120;
+    const sunRadius = 80;
+
+    // Sun glow
+    const gradient = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius * 1.5);
+    gradient.addColorStop(0, this._theme.sunGlow || '#f8b500');
+    gradient.addColorStop(0.5, this._theme.sun || '#ff6b9d');
+    gradient.addColorStop(1, 'transparent');
+
+    ctx.globalAlpha = 0.6;
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(sunX, sunY, sunRadius * 1.5, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Sun body with horizontal stripes (retrowave style)
+    ctx.globalAlpha = 1;
+    const stripeCount = 8;
+    for (let i = 0; i < stripeCount; i++) {
+      const stripeY = sunY - sunRadius + (i * 2 + 1) * (sunRadius / stripeCount);
+      const stripeHeight = sunRadius / stripeCount - 2;
+
+      // Calculate stripe width at this y position (circle intersection)
+      const dy = Math.abs(stripeY - sunY);
+      if (dy < sunRadius) {
+        const stripeHalfWidth = Math.sqrt(sunRadius * sunRadius - dy * dy);
+
+        // Gradient from orange to pink
+        const t = i / stripeCount;
+        const r = Math.floor(255 - t * 50);
+        const g = Math.floor(107 + t * 50);
+        const b = Math.floor(0 + t * 157);
+
+        ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+        ctx.fillRect(sunX - stripeHalfWidth, stripeY, stripeHalfWidth * 2, stripeHeight);
+      }
+    }
+
+    // Horizontal lines cutting through sun (retrowave effect)
+    ctx.strokeStyle = this._theme.background || '#1a1a2e';
+    ctx.lineWidth = 3;
+    for (let i = 1; i < 6; i++) {
+      const lineY = sunY + sunRadius * 0.2 + i * 12;
+      if (lineY < sunY + sunRadius) {
+        const dy = Math.abs(lineY - sunY);
+        const halfWidth = Math.sqrt(sunRadius * sunRadius - dy * dy);
+        ctx.beginPath();
+        ctx.moveTo(sunX - halfWidth, lineY);
+        ctx.lineTo(sunX + halfWidth, lineY);
+        ctx.stroke();
+      }
+    }
+  }
+
+  draw() {
+    super.draw();
+
+    Painter.useCtx((ctx) => {
+      // Draw outrun sun if in outrun mode
+      if (this._isOutrunMode) {
+        this.drawOutrunSun(ctx);
+      }
+
+      const baseX = -this.scrollOffset;
+
+      // Draw vertical grid lines
+      ctx.strokeStyle = this._theme.primary;
+      this.glowLines.forEach(line => {
+        let x = line.x + baseX;
+        // Wrap
+        while (x < -this.cloudWidth / 2) x += this.cloudWidth;
+        while (x > this.cloudWidth / 2) x -= this.cloudWidth;
+
+        ctx.globalAlpha = line.opacity;
+        ctx.beginPath();
+        ctx.moveTo(x, line.y1);
+        ctx.lineTo(x, line.y2);
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      });
+
+      // Draw horizontal cloud lines
+      this.gridLines.forEach(line => {
+        line.segments.forEach(seg => {
+          let x = seg.x + baseX;
+          // Wrap
+          while (x < -this.cloudWidth / 2 - 200) x += this.cloudWidth;
+          while (x > this.cloudWidth / 2 + 200) x -= this.cloudWidth;
+
+          // Glow effect
+          if (seg.glow) {
+            ctx.globalAlpha = seg.opacity * 0.3;
+            ctx.fillStyle = this._theme.primary;
+            ctx.fillRect(x - 2, line.y - 2, seg.width + 4, 5);
+          }
+
+          // Main line
+          ctx.globalAlpha = seg.opacity;
+          ctx.fillStyle = this._theme.primary;
+          ctx.fillRect(x, line.y, seg.width, 1);
+        });
+      });
+
+      // Add some "data" dots traveling along lines
+      const time = Date.now() / 1000;
+      ctx.fillStyle = this._theme.primary;
+      for (let i = 0; i < 5; i++) {
+        const lineIdx = i % this.gridLines.length;
+        const line = this.gridLines[lineIdx];
+        if (line.segments.length > 0) {
+          const seg = line.segments[i % line.segments.length];
+          const dotX = seg.x + baseX + ((time * 50 * (i + 1)) % seg.width);
+          let x = dotX;
+          while (x < -this.cloudWidth / 2 - 200) x += this.cloudWidth;
+          while (x > this.cloudWidth / 2 + 200) x -= this.cloudWidth;
+
+          ctx.globalAlpha = 0.8;
+          ctx.fillRect(x, line.y - 1, 3, 3);
+        }
+      }
+
+      ctx.globalAlpha = 1;
+    });
+  }
+}
+
+// Alias for backwards compatibility
+const TronClouds = SkyLayer;
+
+// ==================== AutoScrollScene ====================
+/**
+ * AutoScrollScene - A PlatformerScene for endless runner
+ * Full screen centered layout
+ */
+class AutoScrollScene extends PlatformerScene {
+  constructor(game, options = {}) {
+    super(game, {
+      ...options,
+      autoInput: false,
+    });
+    this.scrollSpeed = options.scrollSpeed || CONFIG.scrollSpeed;
+  }
+
+  updateCamera(dt) {
+    // No camera following in endless runner
+  }
+
+  getCameraOffset() {
+    return { x: 0, y: 0 };
+  }
+}
+
+// ==================== DinoGame ====================
+/**
+ * DinoGame - Vercel/Terminal aesthetic endless runner
+ */
+class DinoGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = CONFIG.theme.background;
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    SFX.init();
+    this.setupGame();
+    this.setupInput();
+  }
+
+  setupGame() {
+    // Game state
+    this.score = 0;
+    this.highScore = parseInt(localStorage.getItem('dinoHighScore') || '0');
+    this.scrollSpeed = CONFIG.scrollSpeed;
+    this.gameOver = false;
+    this.gameStarted = false;
+    this.distance = 0;
+    this.nextCactusSpawn = this.getRandomSpawnTime();
+    this.cacti = [];
+
+    // Theme state
+    this.isOutrunMode = false;
+    this.currentTheme = CONFIG.theme;
+    this._lastThemeScore = 0; // Track last theme transition
+
+    // Calculate ground Y - centered vertically, slightly below center
+    this.groundY = this.height * 0.65;
+
+    // Create player at left side of screen
+    this.dino = new Dino(this, {
+      x: this.width * 0.15,
+      y: this.groundY - 27,
+    });
+
+    // Create platformer scene - full screen at origin
+    this.level = new AutoScrollScene(this, {
+      player: this.dino,
+      gravity: CONFIG.gravity,
+      jumpVelocity: CONFIG.jumpVelocity,
+      groundY: this.groundY - 27,
+      scrollSpeed: this.scrollSpeed,
+      x: 0,
+      y: 0,
+    });
+
+    // Add Tron-style clouds (slow parallax)
+    this.clouds = new TronClouds(this, {
+      x: this.width / 2,
+      y: this.groundY - 100,
+    });
+    this.level.addLayer(this.clouds, { speed: 0.3 });
+
+    // Add ground - spans full width
+    this.ground = new Ground(this, {
+      x: this.width / 2,
+      y: this.groundY,
+      width: this.width * 3,
+    });
+    this.level.addLayer(this.ground, { speed: 0 });
+
+    // Add player to scene
+    this.level.add(this.dino);
+
+    this.pipeline.add(this.level);
+
+    // UI Elements
+    this.createUI();
+
+    // FPS counter
+    this.pipeline.add(
+      new FPSCounter(this, {
+        color: CONFIG.theme.textDim,
+        anchor: Position.BOTTOM_RIGHT
+      })
+    );
+  }
+
+  createUI() {
+    // Score display (top right)
+    this.scoreText = new Text(this, "00000", {
+      font: "bold 24px 'Courier New', monospace",
+      color: CONFIG.theme.primary,
+      align: "right",
+      anchor: Position.BOTTOM_LEFT,
+      anchorOffsetX: -30,
+    });
+    this.pipeline.add(this.scoreText);
+
+    // High score (next to score)
+    this.highScoreText = new Text(this, this.highScore > 0 ? `HI ${String(this.highScore).padStart(5, "0")}` : "", {
+      font: "16px 'Courier New', monospace",
+      color: CONFIG.theme.textDim,
+      align: "right",
+      anchor: Position.TOP_RIGHT,
+      anchorOffsetX: -30,
+      anchorOffsetY: 55,
+    });
+    this.pipeline.add(this.highScoreText);
+
+    // Start message - centered
+    this.startText = new Text(this, "[ PRESS SPACE TO START ]", {
+      font: "18px 'Courier New', monospace",
+      color: CONFIG.theme.primary,
+      align: "center",
+      anchor: Position.CENTER,
+    });
+    this.pipeline.add(this.startText);
+
+    // Subtitle
+    this.subtitleText = new Text(this, "avoid the obstacles", {
+      font: "14px 'Courier New', monospace",
+      color: CONFIG.theme.textDim,
+      align: "center",
+      anchor: Position.CENTER,
+      anchorOffsetY: 30,
+    });
+    this.pipeline.add(this.subtitleText);
+
+    // Game over text (hidden)
+    this.gameOverText = new Text(this, "GAME OVER", {
+      font: "bold 36px 'Courier New', monospace",
+      color: CONFIG.theme.primary,
+      align: "center",
+      anchor: Position.CENTER,
+      anchorOffsetY: -30,
+      visible: false,
+    });
+    this.pipeline.add(this.gameOverText);
+
+    // Restart instruction (hidden)
+    this.restartText = new Text(this, "[ PRESS SPACE TO RESTART ]", {
+      font: "16px 'Courier New', monospace",
+      color: CONFIG.theme.textDim,
+      align: "center",
+      anchor: Position.CENTER,
+      anchorOffsetY: 20,
+      visible: false,
+    });
+    this.pipeline.add(this.restartText);
+
+    // Final score text (hidden)
+    this.finalScoreText = new Text(this, "", {
+      font: "20px 'Courier New', monospace",
+      color: CONFIG.theme.text,
+      align: "center",
+      anchor: Position.CENTER,
+      anchorOffsetY: 60,
+      visible: false,
+    });
+    this.pipeline.add(this.finalScoreText);
+  }
+
+  setupInput() {
+    this.events.on(Keys.SPACE, () => this.handleJump());
+    this.events.on(Keys.UP, () => this.handleJump());
+    this.events.on(Keys.W, () => this.handleJump());
+  }
+
+  async handleJump() {
+    // Resume audio on first interaction
+    await SFX.resume();
+
+    if (this.gameOver) {
+      this.restartGame();
+      return;
+    }
+
+    if (!this.gameStarted) {
+      this.startGame();
+      return;
+    }
+
+    if (this.level.isPlayerGrounded()) {
+      this.dino.vy = CONFIG.jumpVelocity;
+      this.dino._grounded = false;
+      SFX.jump();
+    }
+  }
+
+  startGame() {
+    this.gameStarted = true;
+    this.startText.visible = false;
+    this.subtitleText.visible = false;
+    this.dino.startRunning(); // Start walking animation
+    SFX.start();
+  }
+
+  restartGame() {
+    // Save high score to localStorage
+    if (this.score > this.highScore) {
+      this.highScore = this.score;
+      localStorage.setItem('dinoHighScore', String(this.highScore));
+    }
+
+    // Clear and restart
+    this.pipeline.clear();
+    this.setupGame();
+
+    // Auto-start after game over
+    this.gameStarted = true;
+    this.startText.visible = false;
+    this.subtitleText.visible = false;
+    this.dino.startRunning(); // Start walking animation
+  }
+
+  getRandomSpawnTime() {
+    return CONFIG.cactusSpawnMinInterval +
+      Math.random() * (CONFIG.cactusSpawnMaxInterval - CONFIG.cactusSpawnMinInterval);
+  }
+
+  /**
+   * Transition to a new theme (normal or outrun)
+   * @param {boolean} toOutrun - True to switch to outrun mode
+   */
+  setTheme(toOutrun) {
+    if (this.isOutrunMode === toOutrun) return;
+
+    this.isOutrunMode = toOutrun;
+    this.currentTheme = toOutrun ? CONFIG.outrunTheme : CONFIG.theme;
+
+    // Update background
+    this.backgroundColor = this.currentTheme.background;
+
+    // Update dino
+    if (this.dino) {
+      this.dino.setTheme(this.currentTheme);
+    }
+
+    // Update ground
+    if (this.ground) {
+      this.ground.setTheme(this.currentTheme);
+    }
+
+    // Update clouds/sky
+    if (this.clouds) {
+      this.clouds.setTheme(this.currentTheme, toOutrun);
+    }
+
+    // Update UI colors
+    if (this.scoreText) {
+      this.scoreText.color = this.currentTheme.primary;
+    }
+    if (this.highScoreText) {
+      this.highScoreText.color = this.currentTheme.textDim;
+    }
+    if (this.startText) {
+      this.startText.color = this.currentTheme.primary;
+    }
+    if (this.gameOverText) {
+      this.gameOverText.color = this.currentTheme.primary;
+    }
+    if (this.restartText) {
+      this.restartText.color = this.currentTheme.textDim;
+    }
+    if (this.finalScoreText) {
+      this.finalScoreText.color = this.currentTheme.text;
+    }
+
+    // Play transition sound
+    SFX.themeTransition(toOutrun);
+  }
+
+  /**
+   * Check and handle theme transitions based on score
+   */
+  checkThemeTransition() {
+    // Calculate position in the level cycle
+    const cyclePosition = this.score % CONFIG.levelCycle;
+
+    // Within first 1000 points: normal theme
+    // From 1000 to 6000: outrun theme
+    const shouldBeOutrun = cyclePosition >= CONFIG.outrunStartScore;
+
+    // Only transition if state changed
+    if (shouldBeOutrun !== this.isOutrunMode) {
+      this.setTheme(shouldBeOutrun);
+    }
+  }
+
+  update(dt) {
+    if (!this.gameStarted || this.gameOver) {
+      // Blinking effect for start text
+      if (!this.gameStarted && this.startText) {
+        const blink = Math.sin(Date.now() / 500) > 0;
+        this.startText.opacity = blink ? 1 : 0.5;
+      }
+      super.update(dt);
+      return;
+    }
+
+    // Update distance/score
+    this.distance += this.scrollSpeed * dt;
+    this.score = Math.floor(this.distance / 10);
+    this.scoreText.text = String(this.score).padStart(5, "0");
+
+    // Check for theme transitions (normal <-> outrun)
+    this.checkThemeTransition();
+
+    // Update scroll offsets for ground and clouds
+    if (this.ground) {
+      this.ground.setScrollOffset(this.distance);
+    }
+    if (this.clouds) {
+      this.clouds.setScrollOffset(this.distance * 0.3); // Slower parallax
+    }
+
+    // Milestone flash effect (every 100 points)
+    if (this.score > 0 && this.score % 100 === 0 && !this._lastMilestone) {
+      this._lastMilestone = this.score;
+      this.scoreText.color = this.currentTheme.text;
+      SFX.milestone();
+      setTimeout(() => {
+        if (this.scoreText) this.scoreText.color = this.currentTheme.primary;
+      }, 100);
+    } else if (this.score % 100 !== 0) {
+      this._lastMilestone = null;
+    }
+
+    // Increase speed over time
+    this.scrollSpeed = Math.min(
+      CONFIG.maxScrollSpeed,
+      this.scrollSpeed + CONFIG.scrollAcceleration * dt
+    );
+
+    // Spawn cacti
+    this.nextCactusSpawn -= dt;
+    if (this.nextCactusSpawn <= 0) {
+      this.spawnCactus();
+      this.nextCactusSpawn = this.getRandomSpawnTime();
+    }
+
+    // Update cacti and check collisions
+    for (let i = this.cacti.length - 1; i >= 0; i--) {
+      const cactus = this.cacti[i];
+      cactus.x -= this.scrollSpeed * dt;
+
+      // Remove off-screen
+      if (cactus.x < -100) {
+        this.level.remove(cactus);
+        this.cacti.splice(i, 1);
+        continue;
+      }
+
+      // Collision check
+      if (Collision.rectRect(this.dino.getBounds(), cactus.getBounds())) {
+        this.triggerGameOver();
+        break;
+      }
+    }
+
+    super.update(dt);
+  }
+
+  spawnCactus() {
+    const cactusHeight = CONFIG.cactusMinHeight +
+      Math.random() * (CONFIG.cactusMaxHeight - CONFIG.cactusMinHeight);
+
+    // In outrun mode, spawn palm trees instead of cacti
+    const obstacle = new Obstacle(this, {
+      x: this.width + 50,
+      y: this.groundY - cactusHeight / 2,
+      height: cactusHeight,
+      isPalmTree: this.isOutrunMode,
+      theme: this.currentTheme,
+    });
+
+    this.cacti.push(obstacle);
+    this.level.add(obstacle);
+  }
+
+  triggerGameOver() {
+    this.gameOver = true;
+    this.dino.stopRunning();
+    this.gameOverText.visible = true;
+    this.restartText.visible = true;
+    this.finalScoreText.visible = true;
+    this.finalScoreText.text = `SCORE: ${this.score}`;
+    SFX.gameOver();
+
+    // Update high score
+    if (this.score > this.highScore) {
+      this.highScore = this.score;
+      this.highScoreText.text = `HI ${String(this.highScore).padStart(5, "0")}`;
+      localStorage.setItem('dinoHighScore', String(this.highScore));
+    }
+  }
+
+  onResize() {
+    // Recalculate positions on resize
+    if (this.dino) {
+      this.groundY = this.height * 0.65;
+      this.dino.x = this.width * 0.15;
+      this.level.groundY = this.groundY - 27;
+      if (this.ground) {
+        this.ground.x = this.width / 2;
+        this.ground.y = this.groundY;
+      }
+      if (this.clouds) {
+        this.clouds.x = this.width / 2;
+        this.clouds.y = this.groundY - 100;
+      }
+    }
+  }
+}
+
+// ==================== Initialize ====================
+window.addEventListener("load", () => {
+  const canvas = document.getElementById("game");
+  const game = new DinoGame(canvas);
+  game.start();
+});