Block Runner

This is the ugliest version of this game I think there has ever been. I doubt I will update it. Thanks to Claude.ai for knocking this out in litterally seconds.

document.addEventListener('DOMContentLoaded', () => {
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
const scoreElement = document.getElementById('score');
const speedElement = document.getElementById('speed');
const jumpBtn = document.getElementById('jump-btn');
const slideBtn = document.getElementById('slide-btn');
const gameOverScreen = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const restartBtn = document.getElementById('restart-btn');

let isJumping = false;
let isSliding = false;
let score = 0;
let gameSpeed = 5;
let baseGameSpeed = 5;
let obstacles = [];
let collectibles = [];
let animationFrameId;
let isGameOver = false;
let lastObstacleTime = 0;
let lastCollectibleTime = 0;

// Game initialization
function init() {
    score = 0;
    gameSpeed = 5;
    baseGameSpeed = 5;
    obstacles = [];
    collectibles = [];
    isGameOver = false;
    scoreElement.textContent = `Score: ${score}`;
    speedElement.textContent = `Speed: ${gameSpeed.toFixed(1)}`;
    gameOverScreen.style.display = 'none';

    // Remove any existing obstacles and collectibles
    document.querySelectorAll('.obstacle, .collectible').forEach(element => {
        element.remove();
    });

    // Reset player position and style
    player.style.transform = 'translateY(0)';
    player.style.height = '15%';

    // Start the game loop
    lastObstacleTime = Date.now();
    lastCollectibleTime = Date.now() + 1000; // Delay first collectible
    gameLoop();
}

// Jump function
function jump() {
    if (!isJumping && !isSliding && !isGameOver) {
        isJumping = true;
        player.style.transform = 'translateY(-20vh)';

        setTimeout(() => {
            player.style.transform = 'translateY(0)';
            setTimeout(() => {
                isJumping = false;
            }, 200);
        }, 500);
    }
}

// Slide function
function slide() {
    if (!isSliding && !isJumping && !isGameOver) {
        isSliding = true;
        player.style.height = '7%';

        setTimeout(() => {
            player.style.height = '15%';
            isSliding = false;
        }, 700);
    }
}

// Create obstacle
function createObstacle() {
    const obstacle = document.createElement('div');
    obstacle.classList.add('obstacle');

    // Randomly generate obstacle type
    // 0: high obstacle (need to slide under)
    // 1: low obstacle (need to jump over)
    // 2: extra tall obstacle (need to jump over)
    // 3: wide obstacle (need to jump over)
    // 4: floating obstacle (can run under or slide under)
    const type = Math.floor(Math.random() * 5);

    let obstacleWidth, obstacleHeight, obstacleBottom;

    switch(type) {
        case 0: // High obstacle (need to slide under)
            obstacleWidth = 5 + Math.random() * 5; // 5-10%
            obstacleHeight = 15 + Math.random() * 10; // 15-25%
            obstacleBottom = 20; // On the ground
            break;
        case 1: // Low obstacle (need to jump over)
            obstacleWidth = 5 + Math.random() * 5; // 5-10%
            obstacleHeight = 5 + Math.random() * 5; // 5-10%
            obstacleBottom = 20; // On the ground
            break;
        case 2: // Extra tall obstacle (need to jump over)
            obstacleWidth = 5 + Math.random() * 3; // 5-8%
            obstacleHeight = 15 + Math.random() * 15; // 15-30% (up to 2x normal height)
            obstacleBottom = 20; // On the ground
            break;
        case 3: // Wide obstacle (need to jump over)
            obstacleWidth = 10 + Math.random() * 10; // 10-20% (up to 2x normal width)
            obstacleHeight = 5 + Math.random() * 5; // 5-10%
            obstacleBottom = 20; // On the ground
            break;
        case 4: // Floating obstacle (can run under or slide under)
            obstacleWidth = 5 + Math.random() * 5; // 5-10%
            obstacleHeight = 5 + Math.random() * 10; // 5-15%
            obstacleBottom = 20 + .75 * 15; // 1.5x player height above ground
            break;
    }

    obstacle.style.width = `${obstacleWidth}%`;
    obstacle.style.height = `${obstacleHeight}%`;
    obstacle.style.bottom = `${obstacleBottom}%`;
    obstacle.style.left = '100%';

    // Different colors for different types
    const colors = ['#cccccc', '#aaaaaa', '#888888', '#666666', '#444444'];
    obstacle.style.backgroundColor = colors[type];

    gameContainer.appendChild(obstacle);

    return {
        element: obstacle,
        type: type,
        needsJump: (type === 1 || type === 2 || type === 3), // Jump over low, extra tall, or wide obstacles
        needsSlide: (type === 0), // Slide under high obstacles
        isFloating: (type === 4), // Floating obstacle
        bottom: obstacleBottom
    };
}

// Create collectible
function createCollectible() {
    const collectible = document.createElement('div');
    collectible.classList.add('collectible');

    // Randomly decide if it's a speed booster or reducer
    const isSpeedBoost = Math.random() > 0.5;

    if (isSpeedBoost) {
        collectible.classList.add('speed-boost');
    } else {
        collectible.classList.add('speed-reducer');
    }

    // Random position
    const bottomPosition = 20 + Math.random() * 30; // Between ground level and mid-screen

    collectible.style.bottom = `${bottomPosition}%`;
    collectible.style.left = '100%';

    gameContainer.appendChild(collectible);

    return {
        element: collectible,
        isSpeedBoost: isSpeedBoost,
        collected: false
    };
}

// Move obstacles
function moveObstacles() {
    for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];
        const currentPosition = parseFloat(obstacle.element.style.left);

        if (currentPosition < -200) { // Account for wider obstacles
            // Remove obstacle if it's off-screen
            obstacle.element.remove();
            obstacles.splice(i, 1);
            i--;

            // Increase score
            score++;
            scoreElement.textContent = `Score: ${score}`;

            // Increase base game speed periodically
            if (score % 10 === 0) {
                baseGameSpeed += 0.5;
                updateGameSpeed(0); // Update with no change
            }
        } else {
            // Move obstacle
            obstacle.element.style.left = `${currentPosition - gameSpeed * 0.2}%`;

            // Check for collision
            checkObstacleCollision(obstacle);
        }
    }
}

// Move collectibles
function moveCollectibles() {
    for (let i = 0; i < collectibles.length; i++) {
        const collectible = collectibles[i];
        const currentPosition = parseFloat(collectible.element.style.left);

        if (currentPosition < -200) {
            // Remove collectible if it's off-screen
            collectible.element.remove();
            collectibles.splice(i, 1);
            i--;
        } else {
            // Move collectible
            collectible.element.style.left = `${currentPosition - gameSpeed * 0.1}%`;

            // Check for collection
            if (!collectible.collected) {
                checkCollectibleCollection(collectible);
            }
        }
    }
}

// Update game speed
function updateGameSpeed(change) {
    const newSpeed = Math.max(2, Math.min(10, baseGameSpeed + change));
    gameSpeed = newSpeed;
    speedElement.textContent = `Speed: ${gameSpeed.toFixed(1)}`;
}

// Check for collision between player and obstacle
function checkObstacleCollision(obstacle) {
    const playerRect = player.getBoundingClientRect();
    const obstacleRect = obstacle.element.getBoundingClientRect();

    if (
        playerRect.left < obstacleRect.right &&
        playerRect.right > obstacleRect.left &&
        playerRect.top < obstacleRect.bottom &&
        playerRect.bottom > obstacleRect.top
    ) {
        // Check if player successfully avoided the obstacle
        let collision = true;

        if (obstacle.needsJump && isJumping) {
            collision = false; // Successfully jumped over
        } else if (obstacle.needsSlide && isSliding) {
            collision = false; // Successfully slid under
        } else if (obstacle.isFloating) {
            // For floating obstacles: either be below it or slide under it
            const playerBottom = playerRect.bottom;
            const obstacleBottom = obstacleRect.bottom;

            if (playerBottom < obstacleRect.top || (isSliding && playerRect.top > obstacleRect.top)) {
                collision = false; // Successfully ran under or slid under
            }
        }

        if (collision) {
            gameOver();
        }
    }
}

// Check for collectible collection
function checkCollectibleCollection(collectible) {
    const playerRect = player.getBoundingClientRect();
    const collectibleRect = collectible.element.getBoundingClientRect();

    if (
        playerRect.left < collectibleRect.right &&
        playerRect.right > collectibleRect.left &&
        playerRect.top < collectibleRect.bottom &&
        playerRect.bottom > collectibleRect.top
    ) {
        // Collect it
        collectible.collected = true;
        collectible.element.style.display = 'none';

        // Apply effect
        if (collectible.isSpeedBoost) {
            updateGameSpeed(2); // Increase speed
            collectible.element.remove();
            collectibles = collectibles.filter(c => c !== collectible);
        } else {
            updateGameSpeed(-2); // Decrease speed
            collectible.element.remove();
            collectibles = collectibles.filter(c => c !== collectible);
        }
    }
}

// Game over
function gameOver() {
    isGameOver = true;
    cancelAnimationFrame(animationFrameId);
    finalScoreElement.textContent = `Score: ${score}`;
    gameOverScreen.style.display = 'flex';
}

// Game loop
function gameLoop() {
    const now = Date.now();

    // Create new obstacles periodically
    if (now - lastObstacleTime > (2000 - baseGameSpeed * 100)) {
        obstacles.push(createObstacle());
        lastObstacleTime = now;
    }

    // Create new collectibles periodically (less frequently than obstacles)
    if (now - lastCollectibleTime > 3000) {
        collectibles.push(createCollectible());
        lastCollectibleTime = now;
    }

    moveObstacles();
    moveCollectibles();

    if (!isGameOver) {
        animationFrameId = requestAnimationFrame(gameLoop);
    }
}

// Event listeners
jumpBtn.addEventListener('click', jump);
slideBtn.addEventListener('click', slide);

// Keyboard controls
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === ' ' || e.key === 'w') {
        jump();
    } else if (e.key === 'ArrowDown' || e.key === 's') {
        slide();
    }
});

// Restart button
restartBtn.addEventListener('click', init);

// Initialize the game
init();
});