Gra 2 JS

gra2.js

document.addEventListener("DOMContentLoaded", function () {
    const player = document.getElementById("bunny");
    const container = document.getElementById("container");
    
    const gameArea = document.getElementById("container");
	const bgground = document.getElementById('bg-ground');

    let isJumping = false;
    let jumpHeight = 300; // Adjust the jump height as needed
    let jumpSpeed = 10; // Adjust the jump speed as needed
    let gravity = 9.81;

    function jump() {
        if (!isJumping) {
            isJumping = true;

            let jumpInterval = setInterval(() => {
                let characterBottom = parseInt(getComputedStyle(player).bottom);

                if (characterBottom < jumpHeight) {
                    player.style.bottom = characterBottom + jumpSpeed + 'px';
                } else {
                    clearInterval(jumpInterval);

                    // Apply gravity after reaching the jump height
                    let fallInterval = setInterval(() => {
                        if (characterBottom > 0) {
                            player.style.bottom = characterBottom - gravity + 'px';
                            characterBottom = parseInt(getComputedStyle(player).bottom);
                        } else {
                            clearInterval(fallInterval);
                            isJumping = false;
                        }
                    }, 20);
                }
            }, 20);
        }
    }

    let bgpos = 0;
    // Event listeners for keyboard input
    document.addEventListener("keydown", function (event) {
        switch (event.key) {
            case "w":
                jump();
                break;
            case "a":
                //player.style.left = Math.max(0, player.offsetLeft - 10) + "px";
                bgpos = bgpos + 10;
                container.style.backgroundPosition = bgpos + "px 0";
				bgground.style.backgroundPosition = bgpos * 1.5 + "px 0";
                break;
            case "d":
                //player.style.left = player.offsetLeft + 10 + "px";
                bgpos = bgpos - 10;
                container.style.backgroundPosition = bgpos + "px 0";
				bgground.style.backgroundPosition = bgpos * 1.5 + "px 0";
                break;
            case 'u':
				setInterval(createEnemy, 2000);
                shoot();
                break;
            case 'x':
                jump();
                break;
        }
    });

    function shoot() {
        const bullet = document.createElement("div");
        bullet.className = "bullet";
        bullet.style.left = player.offsetLeft + player.clientWidth + "px";
        bullet.style.bottom = (parseInt(player.style.bottom) ? parseInt(player.style.bottom) : 0) + player.clientHeight / 2 + 'px';
       

        container.appendChild(bullet);

        function moveBullet() {
            bullet.style.left = parseInt(bullet.style.left) + 5 + "px";

            if (parseInt(bullet.style.left) > container.innerWidth) {
                gameArea.removeChild(bullet);
                clearInterval(bulletInterval);
            }
        }

        const bulletInterval = setInterval(moveBullet, 16);
    }

    function createEnemy() {
        const enemy = document.createElement("div");
        enemy.className = "enemy enemy--" + Math.floor(Math.random() * (3 - 1 + 1) + 1);
        enemy.style.right = 0 + 'px';
        enemy.style.bottom = Math.floor(Math.random() * (150 - 50 + 50) + 50) + "px";
        
        
        container.appendChild(enemy);

        function moveEnemy() {
            enemy.style.right = parseInt(enemy.style.right) + 3 + "px";

            if (parseInt(enemy.style.left) < -50) {
                gameArea.removeChild(enemy);
                clearInterval(enemyInterval);
            }

            // Check for collision with player
            if (
                    player.offsetLeft < enemy.offsetLeft + enemy.clientWidth &&
                    player.offsetLeft + player.clientWidth > enemy.offsetLeft &&
                    player.offsetTop < enemy.offsetTop + enemy.clientHeight &&
                    player.offsetTop + player.clientHeight > enemy.offsetTop
                    ) {
                // Collision with player, you can handle this event (e.g., end the game)
                console.log("Player collided with enemy!");
            }
        }

        const enemyInterval = setInterval(moveEnemy, 16);
    }



    

});