Gra 2 JS

gra2.js

document.addEventListener("DOMContentLoaded", function () {
    const player = document.getElementById("bunny");
    const container = document.getElementById("container");
	const scoreWrap = document.getElementById("score");
	
	const impactSound = document.getElementById('impact');
	const impactSoundBunny = document.getElementById('impact-bunny');
	const musicSound = document.getElementById('music');
	const musicBtn = document.getElementById('music-btn');
    
    const gameArea = document.getElementById("container");
	const bgground = document.getElementById('bg-ground');
	
	const bullets = [];

    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;
	let score = 0;
	let times = [100, 200, 300, 400]; // Half second total flickering
	
	function playImpactSound() {
	    impactSound.pause();
	    impactSound.currentTime = 0;
	    impactSound.play();
	}
	  
	function playImpactSoundBunny() {
	    impactSoundBunny.pause();
	    impactSoundBunny.currentTime = 0;
	    impactSoundBunny.play();
	}
	  
	function playMusic() {
	    if(musicSound.paused) {
			musicSound.pause();
			musicSound.currentTime = 0;
			musicSound.play();
		} else {
			musicSound.pause();
		}
	}
	  
	setInterval(createEnemy, 2000);
	setInterval(createEnemy, 6000);
	setInterval(createEnemy, 10000);
	setInterval(createBoss, 20000);
	setInterval(createBoss, 30000);
	
    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':
                shoot();
                break;
            case 'x':
                createBoss();
                break;
			case 'z':
                container.classList.toggle('fixed');
                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) > 4000) {
                gameArea.removeChild(bullet);
                clearInterval(bulletInterval);
            }
        }

        const bulletInterval = setInterval(moveBullet, 16);
		bullets.push(bullet);
    }

    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)
				   gameArea.removeChild(enemy);
				   playImpactSoundBunny();
                   score=0;
				   scoreWrap.innerHTML = 'Score: ' + score;
				   
				   times.forEach((time, index) => {
					setTimeout(() => {
					  player.classList.toggle('flicker');
					}, time);
				  });
            }
			
			
			bullets.forEach(function(bullet) {
				if(
					bullet.offsetLeft < enemy.offsetLeft + enemy.clientWidth &&
                    bullet.offsetLeft + bullet.clientWidth > enemy.offsetLeft &&
                    bullet.offsetTop < enemy.offsetTop + enemy.clientHeight &&
                    bullet.offsetTop + bullet.clientHeight > enemy.offsetTop
				) {
					 gameArea.removeChild(enemy);
					 gameArea.removeChild(bullet);
					 score++;
					 scoreWrap.innerHTML = 'Score: ' + score;
					 playImpactSound();
				}   
			});
        }

        const enemyInterval = setInterval(moveEnemy, 16);
    }
	
	function createBoss() {
        const enemy = document.createElement("div");
		let health = 10;
		
        enemy.className = "enemy enemy--boss 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) + 2 + "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)
                   gameArea.removeChild(enemy);
				   playImpactSoundBunny();
                   score=0;
				   scoreWrap.innerHTML = 'Score: ' + score;
				   
				   times.forEach((time, index) => {
					setTimeout(() => {
					  player.classList.toggle('flicker');
					}, time);
				  })
            }
			
			
			bullets.forEach(function(bullet) {
				if(
					bullet.offsetLeft < enemy.offsetLeft + enemy.clientWidth &&
                    bullet.offsetLeft + bullet.clientWidth > enemy.offsetLeft &&
                    bullet.offsetTop < enemy.offsetTop + enemy.clientHeight &&
                    bullet.offsetTop + bullet.clientHeight > enemy.offsetTop
				) {
					 gameArea.removeChild(bullet);
					 score = score + 2;
					 health--;
					 if( health <= 0 ) {
						gameArea.removeChild(enemy);
					 }
					 scoreWrap.innerHTML = 'Score: ' + score;
					 playImpactSound();
				}   
			}); 
        }

        const enemyInterval = setInterval(moveEnemy, 15);
    }


	musicBtn.addEventListener("click", (event) => {
	  playMusic();
	});
    

});