Add multiple levels and sound effects system

app/components/GameCanvas.tsx

@@ -1,30 +1,35 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { Game } from '@/lib/engine/Game';
 import { GAME_CONFIG } from '@/lib/constants';
 
 interface GameCanvasProps {
     onGameOver: (isWin: boolean, score: number) => void;
+    startLevel?: number;
 }
 
-export default function GameCanvas({ onGameOver }: GameCanvasProps) {
+export default function GameCanvas({ onGameOver, startLevel = 0 }: GameCanvasProps) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const gameRef = useRef<Game | null>(null);
 
+    const handleGameOver = useCallback((isWin: boolean, score: number) => {
+        onGameOver(isWin, score);
+    }, [onGameOver]);
+
     useEffect(() => {
         if (!canvasRef.current) return;
 
-        const game = new Game(canvasRef.current);
+        const game = new Game(canvasRef.current, startLevel);
         gameRef.current = game;
 
-        game.setOnGameOver(onGameOver);
+        game.setOnGameOver(handleGameOver);
         game.start();
 
         return () => {
             game.stop();
         };
-    }, [onGameOver]);
+    }, [handleGameOver, startLevel]);
 
     return (
         <canvas

app/components/StartScreen.tsx

@@ -1,10 +1,22 @@
 'use client';
 
+import { getAudioManager } from '@/lib/engine/AudioManager';
+import { LevelManager } from '@/lib/engine/LevelManager';
+
 interface StartScreenProps {
-    onStart: () => void;
+    onStart: (levelIndex?: number) => void;
 }
 
 export default function StartScreen({ onStart }: StartScreenProps) {
+    const levelManager = new LevelManager();
+    const levels = levelManager.getAllLevels();
+
+    const handleToggleSound = () => {
+        const audioManager = getAudioManager();
+        audioManager.toggleMute();
+        // Force re-render would be needed for UI update
+    };
+
     return (
         <div className="start-screen">
             <div className="title-container">
@@ -13,7 +25,19 @@ export default function StartScreen({ onStart }: StartScreenProps) {
                 <p className="subtitle">WEB EDITION</p>
             </div>
 
-            <button className="start-button" onClick={onStart}>
+            <div className="level-buttons">
+                {levels.map((level, index) => (
+                    <button
+                        key={level.id}
+                        className={`level-button ${level.theme}`}
+                        onClick={() => onStart(index)}
+                    >
+                        {level.name}
+                    </button>
+                ))}
+            </div>
+
+            <button className="start-button" onClick={() => onStart(0)}>
                 START GAME
             </button>
 

app/globals.css

@@ -39,15 +39,23 @@ body {
 }
 
 @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
+
+    0%,
+    50% {
+        opacity: 1;
+    }
+
+    51%,
+    100% {
+        opacity: 0;
+    }
 }
 
 /* Game Canvas */
 .game-canvas {
     border: 4px solid #333;
     border-radius: 8px;
-    box-shadow: 
+    box-shadow:
         0 0 0 4px var(--mario-red),
         0 0 30px rgba(229, 37, 33, 0.3),
         0 20px 60px rgba(0, 0, 0, 0.5);
@@ -66,7 +74,7 @@ body {
     background: linear-gradient(180deg, var(--sky-blue) 0%, #87ceeb 60%, var(--mario-green) 60%, #2d5a27 100%);
     border: 4px solid #333;
     border-radius: 8px;
-    box-shadow: 
+    box-shadow:
         0 0 0 4px var(--mario-red),
         0 0 30px rgba(229, 37, 33, 0.3),
         0 20px 60px rgba(0, 0, 0, 0.5);
@@ -83,7 +91,7 @@ body {
     height: 40px;
     background: white;
     border-radius: 50%;
-    box-shadow: 
+    box-shadow:
         100px 20px 0 30px white,
         250px -10px 0 20px white,
         400px 10px 0 25px white;
@@ -99,7 +107,7 @@ body {
 .game-title {
     font-size: 48px;
     color: white;
-    text-shadow: 
+    text-shadow:
         4px 4px 0 #000,
         -2px -2px 0 #000,
         2px -2px 0 #000,
@@ -115,8 +123,13 @@ body {
 }
 
 @keyframes bounce {
-    from { transform: translateY(0); }
-    to { transform: translateY(-8px); }
+    from {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(-8px);
+    }
 }
 
 .subtitle {
@@ -127,6 +140,49 @@ body {
     letter-spacing: 6px;
 }
 
+/* Level Selection */
+.level-buttons {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+    z-index: 1;
+}
+
+.level-button {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 10px;
+    padding: 10px 15px;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    text-shadow: 1px 1px 0 #000;
+    transition: all 0.1s ease;
+}
+
+.level-button.overworld {
+    background: linear-gradient(180deg, var(--sky-blue) 0%, #4a7acc 100%);
+    box-shadow: 0 4px 0 #3a5a9c;
+}
+
+.level-button.underground {
+    background: linear-gradient(180deg, #4a4a6a 0%, #2a2a4a 100%);
+    box-shadow: 0 4px 0 #1a1a3a;
+}
+
+.level-button.castle {
+    background: linear-gradient(180deg, #8b3030 0%, #5a2020 100%);
+    box-shadow: 0 4px 0 #3a1010;
+}
+
+.level-button:hover {
+    transform: translateY(-2px);
+}
+
+.level-button:active {
+    transform: translateY(2px);
+}
+
 .start-button {
     font-family: 'Press Start 2P', cursive;
     font-size: 18px;
@@ -137,7 +193,7 @@ body {
     border-radius: 8px;
     cursor: pointer;
     text-shadow: 2px 2px 0 #000;
-    box-shadow: 
+    box-shadow:
         0 6px 0 #8b0000,
         0 8px 20px rgba(0, 0, 0, 0.4);
     transition: all 0.1s ease;
@@ -146,14 +202,14 @@ body {
 
 .start-button:hover {
     transform: translateY(-2px);
-    box-shadow: 
+    box-shadow:
         0 8px 0 #8b0000,
         0 10px 25px rgba(0, 0, 0, 0.5);
 }
 
 .start-button:active {
     transform: translateY(4px);
-    box-shadow: 
+    box-shadow:
         0 2px 0 #8b0000,
         0 4px 10px rgba(0, 0, 0, 0.4);
 }
@@ -209,7 +265,7 @@ body {
     height: 480px;
     border: 4px solid #333;
     border-radius: 8px;
-    box-shadow: 
+    box-shadow:
         0 0 0 4px var(--mario-red),
         0 0 30px rgba(229, 37, 33, 0.3),
         0 20px 60px rgba(0, 0, 0, 0.5);
@@ -230,7 +286,7 @@ body {
 .result-title {
     font-size: 32px;
     color: white;
-    text-shadow: 
+    text-shadow:
         4px 4px 0 #000,
         -2px -2px 0 #000;
     margin-bottom: 30px;
@@ -275,7 +331,7 @@ body {
     border-radius: 8px;
     cursor: pointer;
     text-shadow: 2px 2px 0 #000;
-    box-shadow: 
+    box-shadow:
         0 6px 0 #025a7c,
         0 8px 20px rgba(0, 0, 0, 0.4);
     transition: all 0.1s ease;
@@ -284,20 +340,21 @@ body {
 
 .restart-button:hover {
     transform: translateY(-2px);
-    box-shadow: 
+    box-shadow:
         0 8px 0 #025a7c,
         0 10px 25px rgba(0, 0, 0, 0.5);
 }
 
 .restart-button:active {
     transform: translateY(4px);
-    box-shadow: 
+    box-shadow:
         0 2px 0 #025a7c,
         0 4px 10px rgba(0, 0, 0, 0.4);
 }
 
 /* Responsive */
 @media (max-width: 850px) {
+
     .game-canvas,
     .start-screen,
     .game-over-screen {
@@ -306,12 +363,12 @@ body {
         height: auto;
         aspect-ratio: 800 / 480;
     }
-    
+
     .game-title {
         font-size: 32px;
     }
-    
+
     .game-title.mario {
         font-size: 40px;
     }
-}
+}

app/page.tsx

@@ -17,8 +17,10 @@ export default function Home() {
   const [currentScreen, setCurrentScreen] = useState<GameScreen>('start');
   const [isWin, setIsWin] = useState(false);
   const [finalScore, setFinalScore] = useState(0);
+  const [startLevel, setStartLevel] = useState(0);
 
-  const handleStart = useCallback(() => {
+  const handleStart = useCallback((levelIndex: number = 0) => {
+    setStartLevel(levelIndex);
     setCurrentScreen('playing');
   }, []);
 
@@ -39,7 +41,11 @@ export default function Home() {
       )}
 
       {currentScreen === 'playing' && (
-        <GameCanvas onGameOver={handleGameOver} />
+        <GameCanvas
+          key={startLevel}
+          onGameOver={handleGameOver}
+          startLevel={startLevel}
+        />
       )}
 
       {currentScreen === 'gameOver' && (

lib/constants.ts

@@ -40,7 +40,7 @@ export const GAME_CONFIG = {
 } as const;
 
 export const KEYS = {
-    LEFT: ['ArrowLeft', 'KeyA'],
-    RIGHT: ['ArrowRight', 'KeyD'],
-    JUMP: ['ArrowUp', 'KeyW', 'Space'],
-} as const;
+    LEFT: ['ArrowLeft', 'KeyA'] as string[],
+    RIGHT: ['ArrowRight', 'KeyD'] as string[],
+    JUMP: ['ArrowUp', 'KeyW', 'Space'] as string[],
+};

lib/engine/AudioManager.ts

@@ -0,0 +1,219 @@
+// Audio Manager - handles all game sounds and music
+
+export type SoundEffect = 'jump' | 'coin' | 'stomp' | 'death' | 'levelup' | 'gameover';
+
+export class AudioManager {
+    private sounds: Map<string, HTMLAudioElement> = new Map();
+    private bgm: HTMLAudioElement | null = null;
+    private isMuted: boolean = false;
+    private volume: number = 0.5;
+    private initialized: boolean = false;
+
+    constructor() {
+        if (typeof window !== 'undefined') {
+            this.initSounds();
+        }
+    }
+
+    private initSounds(): void {
+        // Create audio elements with Web Audio API fallback
+        const soundEffects: SoundEffect[] = ['jump', 'coin', 'stomp', 'death', 'levelup', 'gameover'];
+
+        soundEffects.forEach(sound => {
+            const audio = new Audio();
+            audio.volume = this.volume;
+            // Use data URLs for simple 8-bit sounds
+            audio.src = this.getDataUrl(sound);
+            audio.preload = 'auto';
+            this.sounds.set(sound, audio);
+        });
+
+        // Background music
+        this.bgm = new Audio();
+        this.bgm.volume = this.volume * 0.3;
+        this.bgm.loop = true;
+
+        this.initialized = true;
+    }
+
+    private getDataUrl(sound: SoundEffect): string {
+        // Generate simple 8-bit style sounds using oscillator tones encoded as data URLs
+        // These are placeholder audio - in production, use actual audio files
+        const ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+
+        const frequencies: Record<SoundEffect, { freq: number; duration: number; type: OscillatorType }> = {
+            jump: { freq: 400, duration: 0.15, type: 'square' },
+            coin: { freq: 800, duration: 0.1, type: 'square' },
+            stomp: { freq: 200, duration: 0.1, type: 'square' },
+            death: { freq: 150, duration: 0.5, type: 'sawtooth' },
+            levelup: { freq: 600, duration: 0.3, type: 'square' },
+            gameover: { freq: 100, duration: 0.8, type: 'sawtooth' },
+        };
+
+        // Store context for later use
+        this.audioContext = ctx;
+        this.soundConfigs = frequencies;
+
+        // Return empty data URL - we'll use Web Audio API directly
+        return 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQAAAAA=';
+    }
+
+    private audioContext: AudioContext | null = null;
+    private soundConfigs: Record<SoundEffect, { freq: number; duration: number; type: OscillatorType }> | null = null;
+
+    play(sound: SoundEffect): void {
+        if (this.isMuted || !this.initialized) return;
+
+        // Use Web Audio API for dynamic sound generation
+        if (this.audioContext && this.soundConfigs) {
+            try {
+                const config = this.soundConfigs[sound];
+                const oscillator = this.audioContext.createOscillator();
+                const gainNode = this.audioContext.createGain();
+
+                oscillator.type = config.type;
+                oscillator.frequency.setValueAtTime(config.freq, this.audioContext.currentTime);
+
+                // Frequency slide for jump sound
+                if (sound === 'jump') {
+                    oscillator.frequency.exponentialRampToValueAtTime(
+                        config.freq * 2,
+                        this.audioContext.currentTime + config.duration
+                    );
+                }
+
+                // Frequency drop for death sound
+                if (sound === 'death' || sound === 'gameover') {
+                    oscillator.frequency.exponentialRampToValueAtTime(
+                        config.freq * 0.5,
+                        this.audioContext.currentTime + config.duration
+                    );
+                }
+
+                // Coin sound - quick double beep
+                if (sound === 'coin') {
+                    oscillator.frequency.setValueAtTime(config.freq, this.audioContext.currentTime);
+                    oscillator.frequency.setValueAtTime(config.freq * 1.5, this.audioContext.currentTime + 0.05);
+                }
+
+                gainNode.gain.setValueAtTime(this.volume * 0.3, this.audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + config.duration);
+
+                oscillator.connect(gainNode);
+                gainNode.connect(this.audioContext.destination);
+
+                oscillator.start(this.audioContext.currentTime);
+                oscillator.stop(this.audioContext.currentTime + config.duration);
+            } catch (e) {
+                console.warn('Audio playback failed:', e);
+            }
+        }
+    }
+
+    playBGM(): void {
+        if (this.isMuted || !this.bgm) return;
+
+        // Create a simple looping melody using Web Audio API
+        if (this.audioContext) {
+            this.createBGMLoop();
+        }
+    }
+
+    private bgmInterval: ReturnType<typeof setInterval> | null = null;
+
+    private createBGMLoop(): void {
+        if (!this.audioContext || this.bgmInterval) return;
+
+        const notes = [262, 294, 330, 349, 392, 440, 494, 523]; // C major scale
+        let noteIndex = 0;
+
+        this.bgmInterval = setInterval(() => {
+            if (this.isMuted || !this.audioContext) {
+                if (this.bgmInterval) clearInterval(this.bgmInterval);
+                return;
+            }
+
+            const oscillator = this.audioContext.createOscillator();
+            const gainNode = this.audioContext.createGain();
+
+            oscillator.type = 'square';
+            oscillator.frequency.setValueAtTime(notes[noteIndex % notes.length], this.audioContext.currentTime);
+
+            gainNode.gain.setValueAtTime(this.volume * 0.1, this.audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + 0.15);
+
+            oscillator.connect(gainNode);
+            gainNode.connect(this.audioContext.destination);
+
+            oscillator.start(this.audioContext.currentTime);
+            oscillator.stop(this.audioContext.currentTime + 0.15);
+
+            noteIndex++;
+        }, 200);
+    }
+
+    stopBGM(): void {
+        if (this.bgmInterval) {
+            clearInterval(this.bgmInterval);
+            this.bgmInterval = null;
+        }
+        if (this.bgm) {
+            this.bgm.pause();
+            this.bgm.currentTime = 0;
+        }
+    }
+
+    setVolume(volume: number): void {
+        this.volume = Math.max(0, Math.min(1, volume));
+
+        this.sounds.forEach(audio => {
+            audio.volume = this.volume;
+        });
+
+        if (this.bgm) {
+            this.bgm.volume = this.volume * 0.3;
+        }
+    }
+
+    getVolume(): number {
+        return this.volume;
+    }
+
+    toggleMute(): boolean {
+        this.isMuted = !this.isMuted;
+
+        if (this.isMuted) {
+            this.stopBGM();
+        }
+
+        return this.isMuted;
+    }
+
+    isSoundMuted(): boolean {
+        return this.isMuted;
+    }
+
+    setMuted(muted: boolean): void {
+        this.isMuted = muted;
+        if (muted) {
+            this.stopBGM();
+        }
+    }
+
+    // Resume audio context (needed after user interaction)
+    resume(): void {
+        if (this.audioContext && this.audioContext.state === 'suspended') {
+            this.audioContext.resume();
+        }
+    }
+}
+
+// Singleton instance
+let audioManagerInstance: AudioManager | null = null;
+
+export function getAudioManager(): AudioManager {
+    if (!audioManagerInstance) {
+        audioManagerInstance = new AudioManager();
+    }
+    return audioManagerInstance;
+}

lib/engine/Game.ts

@@ -4,36 +4,53 @@ import { GameState, KeyState, PlayerState, Enemy, Block } from './types';
 import { Renderer } from './Renderer';
 import { Physics } from './Physics';
 import { Collision } from './Collision';
-import { createLevel1 } from './Level';
+import { LevelManager, LevelTheme } from './LevelManager';
+import { getAudioManager, SoundEffect } from './AudioManager';
 import { GAME_CONFIG, KEYS } from '../constants';
 
 const { CANVAS_WIDTH, CANVAS_HEIGHT, LEVEL_HEIGHT, PLAYER_WIDTH, PLAYER_HEIGHT } = GAME_CONFIG;
 
+export interface GameCallbacks {
+    onGameOver?: (isWin: boolean, score: number) => void;
+    onLevelComplete?: (levelNumber: number, nextLevel: number | null) => void;
+    onGameComplete?: (totalScore: number) => void;
+}
+
 export class Game {
     private canvas: HTMLCanvasElement;
     private ctx: CanvasRenderingContext2D;
     private renderer: Renderer;
     private physics: Physics;
     private collision: Collision;
+    private levelManager: LevelManager;
     private state: GameState;
     private keys: KeyState;
     private animationId: number | null = null;
-    private onGameOver?: (isWin: boolean, score: number) => void;
+    private callbacks: GameCallbacks = {};
+    private totalScore: number = 0;
+    private currentTheme: LevelTheme = 'overworld';
 
-    constructor(canvas: HTMLCanvasElement) {
+    constructor(canvas: HTMLCanvasElement, startLevel: number = 0) {
         this.canvas = canvas;
         this.ctx = canvas.getContext('2d')!;
         this.renderer = new Renderer(this.ctx);
         this.physics = new Physics();
         this.collision = new Collision();
+        this.levelManager = new LevelManager();
         this.keys = { left: false, right: false, jump: false };
-        this.state = this.createInitialState();
 
+        // Set starting level
+        if (startLevel > 0) {
+            this.levelManager.setLevel(startLevel);
+        }
+
+        this.state = this.createInitialState();
+        this.currentTheme = this.levelManager.getCurrentLevelInfo().theme;
         this.setupEventListeners();
     }
 
     private createInitialState(): GameState {
-        const level = createLevel1();
+        const level = this.levelManager.getCurrentLevel();
 
         return {
             player: {
@@ -47,7 +64,7 @@ export class Game {
                 isFalling: true,
                 facingRight: true,
                 isAlive: true,
-                score: 0,
+                score: this.totalScore,
                 coins: 0,
             },
             enemies: level.enemies.map(e => ({ ...e })),
@@ -73,6 +90,10 @@ export class Game {
             if (KEYS.JUMP.includes(e.code)) {
                 this.keys.jump = true;
                 e.preventDefault();
+                // Play jump sound
+                if (this.state.isRunning && !this.state.player.isJumping && !this.state.player.isFalling) {
+                    getAudioManager().play('jump');
+                }
             }
         };
 
@@ -125,6 +146,7 @@ export class Game {
             hitBlock.hasCoin = false;
             this.state.player.coins++;
             this.state.player.score += 100;
+            getAudioManager().play('coin');
         }
 
         // Check coin collection
@@ -135,6 +157,7 @@ export class Game {
                 this.state.blocks.splice(index, 1);
                 this.state.player.coins++;
                 this.state.player.score += 50;
+                getAudioManager().play('coin');
             }
         });
 
@@ -154,6 +177,7 @@ export class Game {
                     enemy.isAlive = false;
                     this.state.player.vy = -8; // Bounce off enemy
                     this.state.player.score += 200;
+                    getAudioManager().play('stomp');
                 } else if (playerHit) {
                     this.gameOver(false);
                 }
@@ -162,7 +186,7 @@ export class Game {
 
         // Check flag collision (win)
         if (this.collision.checkFlagCollision(this.state.player, this.state.level.flagPosition)) {
-            this.gameOver(true);
+            this.levelComplete();
         }
 
         // Check fall death
@@ -175,7 +199,7 @@ export class Game {
     }
 
     private render(): void {
-        this.renderer.render(this.state);
+        this.renderer.render(this.state, this.currentTheme, this.levelManager.getCurrentLevelNumber());
     }
 
     private gameLoop = (): void => {
@@ -187,26 +211,66 @@ export class Game {
         }
     };
 
+    private levelComplete(): void {
+        this.state.isGameOver = true;
+        this.state.isWin = true;
+        this.state.player.score += 1000; // Level completion bonus
+        this.totalScore = this.state.player.score;
+
+        getAudioManager().play('levelup');
+
+        // Render final frame
+        this.render();
+
+        const currentLevelNum = this.levelManager.getCurrentLevelNumber();
+
+        // Check if there are more levels
+        if (!this.levelManager.isLastLevel()) {
+            // Proceed to next level after delay
+            setTimeout(() => {
+                const nextLevel = this.levelManager.nextLevel();
+                if (nextLevel) {
+                    this.currentTheme = this.levelManager.getCurrentLevelInfo().theme;
+                    this.state = this.createInitialState();
+                    this.state.isRunning = true;
+                    this.gameLoop();
+
+                    if (this.callbacks.onLevelComplete) {
+                        this.callbacks.onLevelComplete(currentLevelNum, this.levelManager.getCurrentLevelNumber());
+                    }
+                }
+            }, 2000);
+        } else {
+            // Game complete!
+            setTimeout(() => {
+                if (this.callbacks.onGameComplete) {
+                    this.callbacks.onGameComplete(this.totalScore);
+                } else if (this.callbacks.onGameOver) {
+                    this.callbacks.onGameOver(true, this.totalScore);
+                }
+            }, 2000);
+        }
+    }
+
     private gameOver(isWin: boolean): void {
         this.state.isGameOver = true;
         this.state.isWin = isWin;
-        this.state.player.isAlive = !isWin ? false : true;
+        this.state.player.isAlive = false;
 
-        if (isWin) {
-            this.state.player.score += 1000; // Bonus for completing level
-        }
+        getAudioManager().play('death');
 
         // Render final frame
         this.render();
 
-        if (this.onGameOver) {
+        if (this.callbacks.onGameOver) {
             setTimeout(() => {
-                this.onGameOver!(isWin, this.state.player.score);
-            }, 1000);
+                this.callbacks.onGameOver!(false, this.state.player.score);
+            }, 1500);
         }
     }
 
     start(): void {
+        getAudioManager().resume();
         this.state = this.createInitialState();
         this.state.isRunning = true;
         this.gameLoop();
@@ -218,19 +282,36 @@ export class Game {
             cancelAnimationFrame(this.animationId);
             this.animationId = null;
         }
+        getAudioManager().stopBGM();
     }
 
     reset(): void {
         this.stop();
+        this.totalScore = 0;
+        this.levelManager.resetToFirstLevel();
+        this.currentTheme = this.levelManager.getCurrentLevelInfo().theme;
         this.state = this.createInitialState();
         this.render();
     }
 
+    setCallbacks(callbacks: GameCallbacks): void {
+        this.callbacks = callbacks;
+    }
+
+    // Legacy support
     setOnGameOver(callback: (isWin: boolean, score: number) => void): void {
-        this.onGameOver = callback;
+        this.callbacks.onGameOver = callback;
     }
 
     getState(): GameState {
         return this.state;
     }
+
+    getCurrentLevel(): number {
+        return this.levelManager.getCurrentLevelNumber();
+    }
+
+    getTotalLevels(): number {
+        return this.levelManager.getLevelCount();
+    }
 }

lib/engine/Level2.ts

@@ -0,0 +1,204 @@
+// Level 2 - Underground Cave Theme
+
+import { Level, Block, Enemy } from './types';
+import { GAME_CONFIG } from '../constants';
+
+const { TILE_SIZE, LEVEL_HEIGHT } = GAME_CONFIG;
+
+const LEVEL_2_WIDTH = 3600;
+
+export function createLevel2(): Level {
+    const blocks: Block[] = [];
+    const enemies: Enemy[] = [];
+
+    // Ground blocks with more gaps
+    for (let x = 0; x < LEVEL_2_WIDTH; x += TILE_SIZE) {
+        // Multiple gaps for underground feel
+        const gaps = [
+            { start: 800, end: 900 },
+            { start: 1400, end: 1550 },
+            { start: 2200, end: 2350 },
+            { start: 2800, end: 2900 },
+        ];
+
+        const inGap = gaps.some(gap => x >= gap.start && x < gap.end);
+        if (inGap) continue;
+
+        // Ground layer (2 blocks high)
+        blocks.push({
+            x,
+            y: LEVEL_HEIGHT - TILE_SIZE,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+        blocks.push({
+            x,
+            y: LEVEL_HEIGHT - TILE_SIZE * 2,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+    }
+
+    // Ceiling blocks for underground feel
+    for (let x = 0; x < LEVEL_2_WIDTH; x += TILE_SIZE) {
+        blocks.push({
+            x,
+            y: 0,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+        blocks.push({
+            x,
+            y: TILE_SIZE,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+    }
+
+    // Underground platforms - brick style
+    const platforms = [
+        // First section - stepping stones
+        { x: 200, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 280, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 360, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+
+        // Question blocks with coins
+        { x: 500, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+        { x: 600, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+
+        // Long platform section
+        { x: 700, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 732, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 764, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+
+        // After first gap
+        { x: 950, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 1000, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'question' as const, hasCoin: true },
+        { x: 1050, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Mid-level platforms
+        { x: 1200, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 1232, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 1264, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 1296, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+
+        // High platform section
+        { x: 1600, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'brick' as const },
+        { x: 1632, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'brick' as const },
+        { x: 1664, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'question' as const, hasCoin: true },
+        { x: 1696, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'brick' as const },
+
+        // Low platforms
+        { x: 1800, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 1900, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 2000, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+
+        // After gaps section
+        { x: 2400, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2500, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+        { x: 2600, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+
+        // Final staircase
+        { x: 3000, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3032, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3032, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3064, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3064, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3064, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'ground' as const },
+        { x: 3096, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3096, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3096, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'ground' as const },
+        { x: 3096, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'ground' as const },
+    ];
+
+    platforms.forEach(p => {
+        blocks.push({
+            x: p.x,
+            y: p.y,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: p.type,
+            hasCoin: p.hasCoin,
+        });
+    });
+
+    // More pipes in underground
+    const pipes = [
+        { x: 400, height: 2 },
+        { x: 1100, height: 3 },
+        { x: 1750, height: 2 },
+        { x: 2100, height: 4 },
+        { x: 2700, height: 2 },
+    ];
+
+    pipes.forEach(pipe => {
+        for (let h = 0; h < pipe.height; h++) {
+            blocks.push({
+                x: pipe.x,
+                y: LEVEL_HEIGHT - TILE_SIZE * 2 - (h * TILE_SIZE),
+                width: TILE_SIZE * 2,
+                height: TILE_SIZE,
+                type: 'pipe',
+            });
+        }
+    });
+
+    // Floating coins
+    const coinPositions = [
+        { x: 250, y: LEVEL_HEIGHT - TILE_SIZE * 7 },
+        { x: 282, y: LEVEL_HEIGHT - TILE_SIZE * 8 },
+        { x: 314, y: LEVEL_HEIGHT - TILE_SIZE * 7 },
+        { x: 1650, y: LEVEL_HEIGHT - TILE_SIZE * 9 },
+        { x: 2550, y: LEVEL_HEIGHT - TILE_SIZE * 8 },
+    ];
+
+    coinPositions.forEach(pos => {
+        blocks.push({
+            x: pos.x,
+            y: pos.y,
+            width: 24,
+            height: 24,
+            type: 'coin',
+        });
+    });
+
+    // More enemies - including Koopas
+    const enemyPositions = [
+        { x: 350, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 650, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 750, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'goomba' as const },
+        { x: 1050, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'koopa' as const },
+        { x: 1350, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 1650, y: LEVEL_HEIGHT - TILE_SIZE * 9, type: 'goomba' as const },
+        { x: 1950, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'koopa' as const },
+        { x: 2450, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 2650, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+    ];
+
+    enemyPositions.forEach(pos => {
+        enemies.push({
+            x: pos.x,
+            y: pos.y,
+            vx: -1,
+            vy: 0,
+            width: 32,
+            height: pos.type === 'koopa' ? 40 : 32,
+            type: pos.type,
+            isAlive: true,
+            direction: -1,
+        });
+    });
+
+    return {
+        width: LEVEL_2_WIDTH,
+        height: LEVEL_HEIGHT,
+        blocks,
+        enemies,
+        startPosition: { x: 64, y: LEVEL_HEIGHT - TILE_SIZE * 4 },
+        flagPosition: { x: 3200, y: LEVEL_HEIGHT - TILE_SIZE * 10 },
+    };
+}

lib/engine/Level3.ts

@@ -0,0 +1,213 @@
+// Level 3 - Castle Theme
+
+import { Level, Block, Enemy } from './types';
+import { GAME_CONFIG } from '../constants';
+
+const { TILE_SIZE, LEVEL_HEIGHT } = GAME_CONFIG;
+
+const LEVEL_3_WIDTH = 4000;
+
+export function createLevel3(): Level {
+    const blocks: Block[] = [];
+    const enemies: Enemy[] = [];
+
+    // Ground blocks with lava pits
+    for (let x = 0; x < LEVEL_3_WIDTH; x += TILE_SIZE) {
+        // Lava pit positions (deadly gaps)
+        const lavaPits = [
+            { start: 600, end: 750 },
+            { start: 1200, end: 1400 },
+            { start: 1800, end: 1950 },
+            { start: 2400, end: 2600 },
+            { start: 3000, end: 3150 },
+        ];
+
+        const inLava = lavaPits.some(pit => x >= pit.start && x < pit.end);
+        if (inLava) continue;
+
+        // Castle floor (darker ground)
+        blocks.push({
+            x,
+            y: LEVEL_HEIGHT - TILE_SIZE,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+        blocks.push({
+            x,
+            y: LEVEL_HEIGHT - TILE_SIZE * 2,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: 'ground',
+        });
+    }
+
+    // Castle walls and platforms
+    const platforms = [
+        // Early section - stepping platforms
+        { x: 200, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 300, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 400, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'question' as const, hasCoin: true },
+        { x: 500, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Over first lava pit
+        { x: 620, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 680, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+        { x: 740, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Mid section
+        { x: 850, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 950, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+        { x: 1050, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+        { x: 1100, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+
+        // Over second lava pit - tricky jumps
+        { x: 1220, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 1280, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'brick' as const },
+        { x: 1340, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Question block cluster
+        { x: 1500, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+        { x: 1532, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+        { x: 1564, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'question' as const, hasCoin: true },
+
+        // High platform section
+        { x: 1650, y: LEVEL_HEIGHT - TILE_SIZE * 8, type: 'brick' as const },
+        { x: 1682, y: LEVEL_HEIGHT - TILE_SIZE * 8, type: 'brick' as const },
+        { x: 1714, y: LEVEL_HEIGHT - TILE_SIZE * 8, type: 'brick' as const },
+
+        // Over third lava pit
+        { x: 1820, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 1880, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+        { x: 1940, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Long platform run
+        { x: 2050, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2082, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2114, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2146, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2178, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2210, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2242, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2274, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+
+        // Over fourth lava pit
+        { x: 2420, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 2480, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'question' as const, hasCoin: true },
+        { x: 2540, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Pre-boss section
+        { x: 2700, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'brick' as const },
+        { x: 2800, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 2900, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+
+        // Over fifth lava pit
+        { x: 3020, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+        { x: 3080, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'brick' as const },
+        { x: 3140, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'brick' as const },
+
+        // Final staircase to flag
+        { x: 3300, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3332, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3332, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3364, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3364, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3364, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'ground' as const },
+        { x: 3396, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3396, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3396, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'ground' as const },
+        { x: 3396, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'ground' as const },
+        { x: 3428, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'ground' as const },
+        { x: 3428, y: LEVEL_HEIGHT - TILE_SIZE * 4, type: 'ground' as const },
+        { x: 3428, y: LEVEL_HEIGHT - TILE_SIZE * 5, type: 'ground' as const },
+        { x: 3428, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'ground' as const },
+        { x: 3428, y: LEVEL_HEIGHT - TILE_SIZE * 7, type: 'ground' as const },
+    ];
+
+    platforms.forEach(p => {
+        blocks.push({
+            x: p.x,
+            y: p.y,
+            width: TILE_SIZE,
+            height: TILE_SIZE,
+            type: p.type,
+            hasCoin: p.hasCoin,
+        });
+    });
+
+    // Fewer pipes in castle
+    const pipes = [
+        { x: 800, height: 2 },
+        { x: 2000, height: 2 },
+        { x: 2650, height: 3 },
+    ];
+
+    pipes.forEach(pipe => {
+        for (let h = 0; h < pipe.height; h++) {
+            blocks.push({
+                x: pipe.x,
+                y: LEVEL_HEIGHT - TILE_SIZE * 2 - (h * TILE_SIZE),
+                width: TILE_SIZE * 2,
+                height: TILE_SIZE,
+                type: 'pipe',
+            });
+        }
+    });
+
+    // Floating coins - harder to get
+    const coinPositions = [
+        { x: 680, y: LEVEL_HEIGHT - TILE_SIZE * 8 },
+        { x: 1280, y: LEVEL_HEIGHT - TILE_SIZE * 9 },
+        { x: 1880, y: LEVEL_HEIGHT - TILE_SIZE * 8 },
+        { x: 2480, y: LEVEL_HEIGHT - TILE_SIZE * 9 },
+        { x: 3080, y: LEVEL_HEIGHT - TILE_SIZE * 8 },
+    ];
+
+    coinPositions.forEach(pos => {
+        blocks.push({
+            x: pos.x,
+            y: pos.y,
+            width: 24,
+            height: 24,
+            type: 'coin',
+        });
+    });
+
+    // Many enemies - challenging!
+    const enemyPositions = [
+        { x: 250, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 450, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'koopa' as const },
+        { x: 900, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 1000, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 1450, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'koopa' as const },
+        { x: 1700, y: LEVEL_HEIGHT - TILE_SIZE * 10, type: 'goomba' as const },
+        { x: 2100, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'goomba' as const },
+        { x: 2200, y: LEVEL_HEIGHT - TILE_SIZE * 6, type: 'koopa' as const },
+        { x: 2750, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 2850, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'goomba' as const },
+        { x: 3200, y: LEVEL_HEIGHT - TILE_SIZE * 3, type: 'koopa' as const },
+    ];
+
+    enemyPositions.forEach(pos => {
+        enemies.push({
+            x: pos.x,
+            y: pos.y,
+            vx: -1,
+            vy: 0,
+            width: 32,
+            height: pos.type === 'koopa' ? 40 : 32,
+            type: pos.type,
+            isAlive: true,
+            direction: -1,
+        });
+    });
+
+    return {
+        width: LEVEL_3_WIDTH,
+        height: LEVEL_HEIGHT,
+        blocks,
+        enemies,
+        startPosition: { x: 64, y: LEVEL_HEIGHT - TILE_SIZE * 4 },
+        flagPosition: { x: 3550, y: LEVEL_HEIGHT - TILE_SIZE * 10 },
+    };
+}

lib/engine/LevelManager.ts

@@ -0,0 +1,93 @@
+// Level Manager - handles multiple levels and level transitions
+
+import { Level } from './types';
+import { createLevel1 } from './Level';
+import { createLevel2 } from './Level2';
+import { createLevel3 } from './Level3';
+
+export type LevelTheme = 'overworld' | 'underground' | 'castle';
+
+export interface LevelInfo {
+    id: number;
+    name: string;
+    theme: LevelTheme;
+    createLevel: () => Level;
+}
+
+export class LevelManager {
+    private levels: LevelInfo[] = [
+        {
+            id: 1,
+            name: 'World 1-1',
+            theme: 'overworld',
+            createLevel: createLevel1,
+        },
+        {
+            id: 2,
+            name: 'World 1-2',
+            theme: 'underground',
+            createLevel: createLevel2,
+        },
+        {
+            id: 3,
+            name: 'World 1-3',
+            theme: 'castle',
+            createLevel: createLevel3,
+        },
+    ];
+
+    private currentLevelIndex: number = 0;
+
+    getCurrentLevel(): Level {
+        return this.levels[this.currentLevelIndex].createLevel();
+    }
+
+    getCurrentLevelInfo(): LevelInfo {
+        return this.levels[this.currentLevelIndex];
+    }
+
+    getLevelCount(): number {
+        return this.levels.length;
+    }
+
+    getCurrentLevelNumber(): number {
+        return this.currentLevelIndex + 1;
+    }
+
+    setLevel(levelIndex: number): Level | null {
+        if (levelIndex >= 0 && levelIndex < this.levels.length) {
+            this.currentLevelIndex = levelIndex;
+            return this.getCurrentLevel();
+        }
+        return null;
+    }
+
+    nextLevel(): Level | null {
+        if (this.currentLevelIndex < this.levels.length - 1) {
+            this.currentLevelIndex++;
+            return this.getCurrentLevel();
+        }
+        return null; // No more levels - game complete!
+    }
+
+    previousLevel(): Level | null {
+        if (this.currentLevelIndex > 0) {
+            this.currentLevelIndex--;
+            return this.getCurrentLevel();
+        }
+        return null;
+    }
+
+    resetToFirstLevel(): Level {
+        this.currentLevelIndex = 0;
+        return this.getCurrentLevel();
+    }
+
+    isLastLevel(): boolean {
+        return this.currentLevelIndex === this.levels.length - 1;
+    }
+
+    getAllLevels(): LevelInfo[] {
+        return [...this.levels];
+    }
+}

lib/engine/Renderer.ts

@@ -2,9 +2,16 @@
 
 import { GameState, Block, Enemy, PlayerState, Position } from './types';
 import { GAME_CONFIG } from '../constants';
+import { LevelTheme } from './LevelManager';
 
 const { CANVAS_WIDTH, CANVAS_HEIGHT, TILE_SIZE, COLORS } = GAME_CONFIG;
 
+const THEME_COLORS = {
+    overworld: { sky: COLORS.SKY, ground: COLORS.GROUND },
+    underground: { sky: '#1a1a2e', ground: '#4a4a4a' },
+    castle: { sky: '#2d1b1b', ground: '#5a3030' },
+};
+
 export class Renderer {
     private ctx: CanvasRenderingContext2D;
     private animationFrame: number = 0;
@@ -13,9 +20,11 @@ export class Renderer {
         this.ctx = ctx;
     }
 
+    private currentTheme: LevelTheme = 'overworld';
+
     clear(): void {
-        // Draw sky background
-        this.ctx.fillStyle = COLORS.SKY;
+        // Draw sky background based on theme
+        this.ctx.fillStyle = THEME_COLORS[this.currentTheme].sky;
         this.ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
     }
 
@@ -248,6 +257,11 @@ export class Renderer {
 
         if (!enemy.isAlive) return;
 
+        if (enemy.type === 'koopa') {
+            this.drawKoopa(screenX, enemy);
+            return;
+        }
+
         // Goomba body
         this.ctx.fillStyle = COLORS.GOOMBA;
 
@@ -289,6 +303,44 @@ export class Renderer {
         this.ctx.stroke();
     }
 
+    private drawKoopa(screenX: number, enemy: Enemy): void {
+        // Shell (green)
+        this.ctx.fillStyle = '#00aa00';
+        this.ctx.beginPath();
+        this.ctx.ellipse(screenX + enemy.width / 2, enemy.y + enemy.height - 12, 14, 10, 0, 0, Math.PI * 2);
+        this.ctx.fill();
+
+        // Shell pattern
+        this.ctx.strokeStyle = '#006600';
+        this.ctx.lineWidth = 2;
+        this.ctx.beginPath();
+        this.ctx.arc(screenX + enemy.width / 2, enemy.y + enemy.height - 12, 8, 0, Math.PI * 2);
+        this.ctx.stroke();
+
+        // Head
+        this.ctx.fillStyle = '#ffcc00';
+        this.ctx.beginPath();
+        this.ctx.arc(screenX + enemy.width / 2, enemy.y + 10, 10, 0, Math.PI * 2);
+        this.ctx.fill();
+
+        // Eyes
+        this.ctx.fillStyle = '#fff';
+        this.ctx.fillRect(screenX + enemy.width / 2 - 6, enemy.y + 6, 5, 6);
+        this.ctx.fillRect(screenX + enemy.width / 2 + 1, enemy.y + 6, 5, 6);
+
+        // Pupils
+        this.ctx.fillStyle = '#000';
+        const pupilOffset = enemy.direction > 0 ? 2 : 0;
+        this.ctx.fillRect(screenX + enemy.width / 2 - 4 + pupilOffset, enemy.y + 8, 2, 3);
+        this.ctx.fillRect(screenX + enemy.width / 2 + 2 + pupilOffset, enemy.y + 8, 2, 3);
+
+        // Feet
+        const footOffset = Math.sin(this.animationFrame * 0.3) * 2;
+        this.ctx.fillStyle = '#ffcc00';
+        this.ctx.fillRect(screenX + 4, enemy.y + enemy.height - 6, 8, 6 + footOffset);
+        this.ctx.fillRect(screenX + enemy.width - 12, enemy.y + enemy.height - 6, 8, 6 - footOffset);
+    }
+
     drawFlag(position: Position, cameraX: number): void {
         const screenX = position.x - cameraX;
 
@@ -321,10 +373,10 @@ export class Renderer {
         this.ctx.fillText('★', screenX + 22 + flagWave / 2, position.y + 25);
     }
 
-    drawUI(player: PlayerState): void {
+    drawUI(player: PlayerState, levelNumber: number = 1): void {
         // UI Background
         this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        this.ctx.fillRect(10, 10, 200, 60);
+        this.ctx.fillRect(10, 10, 280, 60);
 
         // Score
         this.ctx.fillStyle = '#fff';
@@ -341,15 +393,25 @@ export class Renderer {
 
         this.ctx.fillStyle = '#fff';
         this.ctx.fillText(`×${player.coins}`, 165, 40);
+
+        // Level indicator
+        this.ctx.fillStyle = '#fff';
+        this.ctx.fillText(`WORLD`, 220, 32);
+        this.ctx.fillText(`1-${levelNumber}`, 220, 52);
     }
 
     update(): void {
         this.animationFrame++;
     }
 
-    render(state: GameState): void {
+    render(state: GameState, theme: LevelTheme = 'overworld', levelNumber: number = 1): void {
+        this.currentTheme = theme;
         this.clear();
-        this.drawClouds(state.camera.x);
+
+        // Only draw clouds in overworld
+        if (theme === 'overworld') {
+            this.drawClouds(state.camera.x);
+        }
 
         // Draw all blocks
         state.blocks.forEach(block => this.drawBlock(block, state.camera.x));
@@ -364,7 +426,7 @@ export class Renderer {
         this.drawPlayer(state.player, state.camera.x);
 
         // Draw UI
-        this.drawUI(state.player);
+        this.drawUI(state.player, levelNumber);
 
         this.update();
     }