rocketjumpgame-atlasontop/index.js

This project is a JavaScript game where players control a rocket to avoid obstacles and reach the moon.

function startGame() {
    initialize();
    renderBackground();
    renderRocket();
    renderMoon();
    addEventListeners();
    startAnimation();
}

function initialize() {
    gameState = {
        rocketPosition: 0,
        rocketSpeed: 5,
        moonPosition: 800,
        moonSpeed: 2,
        gameActive: true
    };

    rocket = document.getElementById('rocket');
    moon = document.getElementById('moon');
}

function renderBackground() {
    const background = document.createElement('div');
    background.classList.add('background');
    document.body.appendChild(background);
}

function renderRocket() {
    rocket.style.left = gameState.rocketPosition + 'px';
}

function renderMoon() {
    moon.style.right = gameState.moonPosition + 'px';
}

function addEventListeners() {
    document.addEventListener('keydown', function(event) {
        if (event.keyCode === 32) {
            boostRocket();
        }
    });
}

function boostRocket() {
    gameState.rocketSpeed += 2;
}

function startAnimation() {
    requestAnimationFrame(animationLoop);
}

function animationLoop() {
    if (!gameState.gameActive) return;

    moveRocket();
    moveMoon();

    if (checkCollision()) {
        endGame();
        return;
    }

    requestAnimationFrame(animationLoop);
}

function moveRocket() {
    gameState.rocketPosition += gameState.rocketSpeed;
    renderRocket();
}

function moveMoon() {
    gameState.moonPosition -= gameState.moonSpeed;
    renderMoon();
}

function checkCollision() {
    const rocketRect = rocket.getBoundingClientRect();
    const moonRect = moon.getBoundingClientRect();

    return rocketRect.right > moonRect.left &&
        rocketRect.left < moonRect.right &&
        rocketRect.bottom > moonRect.top &&
        rocketRect.top < moonRect.bottom;
}

function endGame() {
    gameState.gameActive = false;
    alert('Game Over!');
}

startGame();

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generateRandomObstaclePosition() {
    return getRandomNumber(200, 600);
}

function generateRandomObstacleSpeed() {
    return getRandomNumber(1, 3);
}

function createObstacle() {
    const obstacle = document.createElement('div');
    obstacle.classList.add('obstacle');
    obstacle.style.left = '800px';
    obstacle.style.top = generateRandomObstaclePosition() + 'px';
    document.body.appendChild(obstacle);
    return obstacle;
}

function moveObstacle(obstacle) {
    obstacle.style.left = parseInt(obstacle.style.left) - generateRandomObstacleSpeed() + 'px';
}

function removeObstacle(obstacle) {
    obstacle.parentNode.removeChild(obstacle);
}

function updateObstacles() {
    if (Math.random() > 0.97) {
        const obstacle = createObstacle();
        obstacles.push(obstacle);
    }

    obstacles.forEach(function(obstacle) {
        moveObstacle(obstacle);

        if (parseInt(obstacle.style.left) < -100) {
            removeObstacle(obstacle);
            obstacles.splice(obstacles.indexOf(obstacle), 1);
        }
    });
}
function checkCollisionWithObstacles() {
    const rocketRect = rocket.getBoundingClientRect();
    let collision = false;

    obstacles.forEach(function(obstacle) {
        const obstacleRect = obstacle.getBoundingClientRect();

        if (rocketRect.right > obstacleRect.left &&
            rocketRect.left < obstacleRect.right &&
            rocketRect.bottom > obstacleRect.top &&
            rocketRect.top < obstacleRect.bottom) {
            collision = true;
        }
    });

    return collision;
}

function endGameWithCollision() {
    gameState.gameActive = false;
    alert('Game Over! You collided with an obstacle.');
}

function startGame() {
    initialize();
    renderBackground();
    renderRocket();
    renderMoon();
    addEventListeners();
    startAnimation();
    setInterval(updateObstacles, 1000);
}

let obstacles = [];

function startAnimation() {
    requestAnimationFrame(animationLoop);
}

function animationLoop() {
    if (!gameState.gameActive) return;

    moveRocket();
    moveMoon();

    if (checkCollisionWithObstacles()) {
        endGameWithCollision();
        return;
    }

    requestAnimationFrame(animationLoop);
}