HTMLify

class GameObject {
    constructor(x, y, width, height, color) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
        this.vx = 0;
        this.vy = 0;
        this.onGround = false;
    }

    draw(ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

class Player extends GameObject {
    constructor(x, y) {
        super(x, y, 30, 50, '#e74c3c'); // Red player
        this.speed = 5.5; // Increased speed slightly
        this.jumpPower = 14; // Increased jump height
        this.lives = 3;
        this.score = 0;
        this.isJumping = false;
    }

    update(gravity, platforms) {
        // Apply horizontal movement
        this.x += this.vx;

        // Apply gravity and vertical movement
        this.vy += gravity;
        this.y += this.vy;
        this.onGround = false;

        // Collision detection with platforms
        platforms.forEach(platform => {
            if (this.isColliding(platform)) {
                // Check if falling onto the platform (Top collision)
                if (this.vy > 0 && this.y + this.height - this.vy <= platform.y + 5) { // Added tolerance of 5px
                    this.y = platform.y - this.height;
                    this.vy = 0;
                    this.onGround = true;
                    this.isJumping = false;
                } 
                // Check if hitting from below (Bottom collision)
                else if (this.vy < 0 && this.y - this.vy >= platform.y + platform.height - 5) { // Added tolerance of 5px
                    this.y = platform.y + platform.height;
                    this.vy = 0; // Stop upward movement
                }
                // Side collisions (Prevents clipping through walls)
                else if (this.y + this.height > platform.y && this.y < platform.y + platform.height) {
                    if (this.vx > 0 && this.x + this.width - this.vx <= platform.x) {
                        this.x = platform.x - this.width;
                        this.vx = 0;
                    } else if (this.vx < 0 && this.x - this.vx >= platform.x + platform.width) {
                        this.x = platform.x + platform.width;
                        this.vx = 0;
                    }
                }
            }
        });

        // Keep player within horizontal bounds (Level boundary handling should ideally be level-specific, but for now, canvas limits)
        if (this.x < 0) this.x = 0;
        if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;

        // Fall death check (if falls off bottom)
        if (this.y > canvas.height + 100) { // Increased tolerance for falling off screen
            this.die();
        }
    }

    jump() {
        if (this.onGround) {
            this.vy = -this.jumpPower;
            this.onGround = false;
            this.isJumping = true;
        }
    }

    move(direction) {
        this.vx = direction * this.speed;
    }

    stop() {
        this.vx = 0;
    }

    isColliding(other) {
        return this.x < other.x + other.width &&
               this.x + this.width > other.x &&
               this.y < other.y + other.height &&
               this.y + this.height > other.y;
    }

    die() {
        this.lives--;
        updateHUD();
        if (this.lives <= 0) {
            gameOver();
        } else {
            // Add a slight pause/visual feedback before resetting position
            isGameRunning = false; 
            setTimeout(() => {
                resetPlayerPosition();
                isGameRunning = true;
                gameLoop(); // Resume loop
            }, 800); // 0.8 seconds pause
        }
    }

    addScore(points) {
        this.score += points;
        updateHUD();
    }
}

class Enemy extends GameObject {
    constructor(x, y, type) {
        let color = '#2ecc71'; // Green enemy (Goomba-like)
        let width = 30;
        let height = 30;
        let speed = 1.2; // Slower for easier platforming balance

        if (type === 'flying') {
            color = '#9b59b6'; // Purple flying enemy (Koopa-like)
            height = 35;
            width = 35;
            speed = 0.8;
        }

        super(x, y, width, height, color);
        this.type = type;
        this.speed = speed;
        this.baseY = y;
        this.direction = 1; // 1 for right, -1 for left
    }

    update(gravity, platforms) {
        
        if (this.type === 'flying') {
            // Simple sine wave vertical movement for flying enemies
            // Calculate current phase based on X position and time/frame is better, but using X position for simplicity here
            this.y = this.baseY + Math.sin(this.x * 0.03) * 25; 
            this.x += this.speed * this.direction;
        } else {
            // Ground enemy physics
            this.vy += gravity;
            this.y += this.vy;
            this.onGround = false;

            platforms.forEach(platform => {
                if (this.isColliding(platform)) {
                    if (this.vy > 0 && this.y + this.height - this.vy <= platform.y + 5) {
                        this.y = platform.y - this.height;
                        this.vy = 0;
                        this.onGround = true;
                    } else if (this.vy < 0 && this.y - this.vy >= platform.y + platform.height - 5) {
                        this.y = platform.y + platform.height;
                        this.vy = 0;
                    }
                }
            });

            // Ground enemy direction change logic
            this.x += this.speed * this.direction;

            // Check for platform edge to turn around
            const checkGround = platforms.find(p => {
                // Check if the enemy is on top of this platform
                return (this.y + this.height - this.vy <= p.y + 5 && this.y + this.height > p.y) && 
                       (this.x + this.width * 0.5 > p.x && this.x + this.width * 0.5 < p.x + p.w);
            });

            if (checkGround) {
                // Check if the next step is an edge
                const nextX = this.x + (this.speed * this.direction * 2);
                const isAtEdge = !platforms.some(p => 
                    p !== checkGround && 
                    nextX + this.width > p.x && 
                    nextX < p.x + p.w &&
                    this.y + this.height > p.y // Simplified check for collision below
                );

                if (isAtEdge || nextX < checkGround.x || nextX + this.width > checkGround.x + checkGround.w) {
                    this.direction *= -1;
                    this.x += this.speed * this.direction; // Correct position immediately
                }
            }
        }

        // Reverse direction if hitting canvas edge
        if (this.x + this.width > canvas.width || this.x < 0) {
            this.direction *= -1;
            this.x += this.speed * this.direction; // Correct position after collision
        }
    }

    isColliding(other) {
        return this.x < other.x + other.width &&
               this.x + this.width > other.x &&
               this.y < other.y + other.height &&
               this.y + this.height > other.y;
    }

    // Custom collision for stomping player (player jumps on enemy)
    stompPlayer(player) {
        // Only consider stomp if player is moving downwards (vy > 0) and lands on top of the enemy
        if (player.isColliding(this) && player.vy > 0 && player.y + player.height - player.vy <= this.y + 10) {
            player.addScore(100);
            return true; // Enemy is defeated
        }
        return false; // Enemy still active
    }

    // Custom collision for player hitting enemy from side/below
    hitPlayer(player) {
        // Player hits enemy if they collide AND the player wasn't stomping them
        return player.isColliding(this) && !this.stompPlayer(player);
    }
}

// --- Game Setup ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

canvas.width = GAME_WIDTH;
canvas.height = GAME_HEIGHT;

const GRAVITY = 0.75; // Slightly increased gravity for snappier platforming feel
const TILE_SIZE = 40;

let player;
let enemies = [];
let platforms = [];
let currentLevel = 1;
let isGameRunning = false;
let keys = {};

const LEVEL_DATA = {
    1: {
        platforms: [
            // Ground
            { x: 0, y: GAME_HEIGHT - TILE_SIZE, w: GAME_WIDTH, h: TILE_SIZE, color: '#27ae60' }, // Ground
            // Floating platforms
            { x: 150, y: GAME_HEIGHT - 150, w: 180, h: TILE_SIZE, color: '#27ae60' }, // Wider platform
            { x: 450, y: GAME_HEIGHT - 250, w: 100, h: TILE_SIZE, color: '#27ae60' },
            { x: 600, y: GAME_HEIGHT - 380, w: 150, h: TILE_SIZE, color: '#27ae60' },
        ],
        enemies: [
            new Enemy(300, GAME_HEIGHT - TILE_SIZE - 30, 'ground'),
            new Enemy(500, GAME_HEIGHT - TILE_SIZE - 30, 'ground'),
        ],
        goal: { x: GAME_WIDTH - 120, y: GAME_HEIGHT - 150 - 60, w: 60, h: 60, color: '#f1c40f' } // Goal flag
    },
    2: {
        platforms: [
            { x: 0, y: GAME_HEIGHT - TILE_SIZE, w: 150, h: TILE_SIZE, color: '#27ae60' }, // Start section
            { x: 300, y: GAME_HEIGHT - 100, w: 100, h: TILE_SIZE, color: '#27ae60' },
            { x: 500, y: GAME_HEIGHT - 200, w: 80, h: TILE_SIZE, color: '#27ae60' },
            { x: 650, y: GAME_HEIGHT - 350, w: 150, h: TILE_SIZE, color: '#27ae60' }, // High platform
            { x: 100, y: GAME_HEIGHT - 450, w: 120, h: TILE_SIZE, color: '#27ae60' }, // Top small platform
        ],
        enemies: [
            new Enemy(400, GAME_HEIGHT - 100 - 30, 'ground'),
            new Enemy(550, GAME_HEIGHT - 350 - 30, 'flying'),
            new Enemy(700, GAME_HEIGHT - 350 - 30, 'flying'),
        ],
        goal: { x: 50, y: GAME_HEIGHT - 450 - 60, w: 60, h: 60, color: '#f1c40f' }
    },
    3: {
        platforms: [
            { x: 0, y: GAME_HEIGHT - TILE_SIZE, w: GAME_WIDTH, h: TILE_SIZE, color: '#27ae60' }, // Ground
            // Complex structure with gaps - requires precise jumps
            { x: 150, y: GAME_HEIGHT - 150, w: 80, h: TILE_SIZE, color: '#27ae60' },
            { x: 350, y: GAME_HEIGHT - 300, w: 50, h: TILE_SIZE, color: '#27ae60' }, // Small center pillar
            { x: 500, y: GAME_HEIGHT - 450, w: 120, h: TILE_SIZE, color: '#27ae60' },
            { x: 650, y: GAME_HEIGHT - 200, w: 50, h: TILE_SIZE, color: '#27ae60' },
        ],
        enemies: [
            new Enemy(200, GAME_HEIGHT - TILE_SIZE - 30, 'ground'),
            new Enemy(400, GAME_HEIGHT - 300 - 30, 'ground'),
            new Enemy(550, GAME_HEIGHT - 450 - 30, 'flying'),
            new Enemy(700, GAME_HEIGHT - 200 - 30, 'ground'),
            new Enemy(250, GAME_HEIGHT - 150 - 30, 'ground'), // Another ground enemy blocking lower path
        ],
        goal: { x: 500, y: GAME_HEIGHT - 450 - 60, w: 60, h: 60, color: '#f1c40f' }
    }
};

let currentGoal;

function loadLevel(levelNum) {
    const data = LEVEL_DATA[levelNum];
    if (!data) {
        winGame();
        return;
    }

    // Create new instances of GameObjects from level data definitions
    platforms = data.platforms.map(p => new GameObject(p.x, p.y, p.w, p.h, p.color));
    enemies = data.enemies.map(e => new Enemy(e.x, e.y, e.type));
    currentGoal = data.goal;

    resetPlayerPosition();
    updateHUD();
}

function resetPlayerPosition() {
    // Spawn player on the first platform found (or near the bottom left if none are defined robustly)
    player.x = 50;
    // Find the highest solid ground under the starting point
    let startY = GAME_HEIGHT - TILE_SIZE - player.height - 10;

    platforms.forEach(p => {
        if (player.x < p.x + p.w && player.x + player.width > p.x) { // Check if platform is under start X
            if (p.y > player.y && p.y - player.height < startY) {
                startY = p.y - player.height;
            }
        }
    });
    
    player.y = startY;
    player.vx = 0;
    player.vy = 0;
    player.onGround = false;
}

function initializeGame() {
    // Initialize player only once, or reset stats if restarting from Game Over
    if (!player) {
        player = new Player(50, GAME_HEIGHT - TILE_SIZE - 50);
    }
    player.lives = 3;
    player.score = 0;
    currentLevel = 1;
    
    loadLevel(currentLevel);
    
    isGameRunning = true;
    hideScreens();
    requestAnimationFrame(gameLoop);
}

function nextLevel() {
    currentLevel++;
    player.addScore(500); // Bonus points for completing a level
    loadLevel(currentLevel);
    // Briefly pause state change
    isGameRunning = false;
    setTimeout(() => {
        isGameRunning = true;
        gameLoop();
    }, 500);
}

function gameOver() {
    isGameRunning = false;
    document.getElementById('final-score').textContent = player.score;
    showScreen('game-over-screen');
}

function winGame() {
    isGameRunning = false;
    document.getElementById('win-final-score').textContent = player.score;
    showScreen('win-screen');
}

// --- Input Handling ---

document.addEventListener('keydown', (e) => {
    keys[e.code] = true;

    if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW') {
        player.jump();
    }
    if (e.code === 'Enter') {
        const startScreen = document.getElementById('start-screen');
        const gameOverScreen = document.getElementById('game-over-screen');
        const winScreen = document.getElementById('win-screen');

        if (startScreen.classList.contains('hidden') && gameOverScreen.classList.contains('hidden') && winScreen.classList.contains('hidden')) {
            // If game is running, do nothing, unless we implement a pause feature
        } else {
            // Restart/Start the game
            initializeGame();
        }
    }
});

document.addEventListener('keyup', (e) => {
    keys[e.code] = false;
});

function handleInput() {
    if (!isGameRunning) return;

    player.stop();
    if (keys['ArrowLeft'] || keys['KeyA']) {
        player.move(-1);
    }
    if (keys['ArrowRight'] || keys['KeyD']) {
        player.move(1);
    }
}

// --- UI & HUD Management ---

function updateHUD() {
    document.getElementById('score').textContent = player.score;
    document.getElementById('lives').textContent = player.lives;
    document.getElementById('level').textContent = currentLevel;
}

function showScreen(screenId) {
    document.querySelectorAll('.screen').forEach(screen => {
        screen.classList.add('hidden');
    });
    document.getElementById(screenId).classList.remove('hidden');
}

function hideScreens() {
    document.querySelectorAll('.screen').forEach(screen => {
        screen.classList.add('hidden');
    });
}

// --- Game Loop ---

function update() {
    if (!isGameRunning) return;

    handleInput();
    player.update(GRAVITY, platforms);

    // Enemy movement and collision
    const remainingEnemies = [];
    let playerHit = false;

    enemies.forEach(enemy => {
        enemy.update(GRAVITY, platforms);

        // 1. Player Stomp Check
        if (enemy.stompPlayer(player)) {
            // Enemy is defeated, do not add it back to remainingEnemies
            player.addScore(100);
        } 
        // 2. Player Hit Check (only if not stomped)
        else if (enemy.hitPlayer(player)) {
            playerHit = true;
        }
        // 3. Keep enemy if still alive
        else {
            remainingEnemies.push(enemy);
        }
    });

    enemies = remainingEnemies;

    if (playerHit) {
        player.die();
        // Stop further logic execution for this frame if player died
        return;
    }

    // Goal Check
    if (player.isColliding(currentGoal)) {
        nextLevel();
    }
}

function draw() {
    // Clear canvas
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    // Draw Platforms (Added a slight ambient shadow/color shift)
    platforms.forEach(platform => {
        ctx.fillStyle = platform.color;
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
        // Add slight surface definition
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.lineWidth = 1;
        ctx.strokeRect(platform.x, platform.y, platform.width, platform.height);
    });

    // Draw Goal (More prominent goal structure)
    const goal = currentGoal;
    ctx.fillStyle = goal.color;
    ctx.fillRect(goal.x, goal.y, goal.w, goal.h); // Base block
    
    // Flag Pole
    ctx.fillStyle = '#95a5a6'; // Grey pole
    ctx.fillRect(goal.x + goal.w / 2 - 3, goal.y - 70, 6, 70);
    // Flag cloth
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.moveTo(goal.x + goal.w + 5, goal.y - 60);
    ctx.lineTo(goal.x + goal.w + 5, goal.y - 40);
    ctx.lineTo(goal.x + goal.w + 25, goal.y - 50);
    ctx.closePath();
    ctx.fill();

    // Draw Enemies
    enemies.forEach(enemy => {
        // Draw body
        enemy.draw(ctx);
        
        // Draw details based on type
        ctx.fillStyle = '#f1c40f'; // Accent color for features
        if (enemy.type === 'ground') {
            // Eyes
            ctx.fillRect(enemy.x + 5, enemy.y + 5, 5, 5);
            ctx.fillRect(enemy.x + 20, enemy.y + 5, 5, 5);
            // Simple feet/base shading
            ctx.fillStyle = '#1e8449';
            ctx.fillRect(enemy.x, enemy.y + enemy.height - 5, enemy.width, 5);
        } else if (enemy.type === 'flying') {
            // Simple eye/face
            ctx.fillRect(enemy.x + 8, enemy.y + 8, 5, 5);
            ctx.fillRect(enemy.x + 22, enemy.y + 8, 5, 5);
            // Wings
            ctx.fillStyle = '#c0392b';
            ctx.beginPath();
            ctx.arc(enemy.x + enemy.width/2, enemy.y + enemy.height/2, enemy.width/2 + 2, 0, Math.PI * 2);
            ctx.fill();
        }
    });

    // Draw Player (Player character appearance refinement)
    // Player body is red, but we add a hat/mushroom look
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y + 5, player.width, player.height - 5); // Body

    // Hat/Head (Simulating a cap)
    ctx.fillStyle = '#e74c3c'; // Hat base color
    ctx.fillRect(player.x - 2, player.y, player.width + 4, 8); // Hat brim
    ctx.fillStyle = '#f1c40f'; // Hat top color
    ctx.fillRect(player.x, player.y, player.width, 5);

    // Face/Eyes
    ctx.fillStyle = 'white';
    ctx.fillRect(player.x + 8, player.y + 10, 5, 5); // Eye 1
    ctx.fillRect(player.x + 17, player.y + 10, 5, 5); // Eye 2
}

let lastTime = 0;
function gameLoop(timestamp = 0) {
    if (!isGameRunning) {
        // If the game paused due to death or level transition, requestAnimationFrame should only resume when isGameRunning becomes true again
        if (lastTime === 0) {
             lastTime = timestamp; // Set initial time reference if we were paused at start
        }
        return;
    }

    const deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    update();
    draw();

    requestAnimationFrame(gameLoop);
}

// --- Initialization ---

window.onload = () => {
    // Show start screen initially
    showScreen('start-screen');

    // Handle click/touch to start game
    document.getElementById('start-screen').addEventListener('click', initializeGame);
    document.getElementById('game-over-screen').addEventListener('click', initializeGame);
    document.getElementById('win-screen').addEventListener('click', initializeGame);
    let b = document.getElementById("karbon-promo-banner");
    if (b) {
        b.innerHTML = "<div>Made by <b>Sameer Kumar</b></div>";
    }
};