diff --git a/SinglePlayer - Games/Zoombie survival/index.html b/SinglePlayer - Games/Zoombie survival/index.html new file mode 100644 index 00000000..fe3744d1 --- /dev/null +++ b/SinglePlayer - Games/Zoombie survival/index.html @@ -0,0 +1,17 @@ + + + + + + Zombie Survival + + + +
+
+
Score: 0
+ +
+ + + diff --git a/SinglePlayer - Games/Zoombie survival/script.js b/SinglePlayer - Games/Zoombie survival/script.js new file mode 100644 index 00000000..a5e71259 --- /dev/null +++ b/SinglePlayer - Games/Zoombie survival/script.js @@ -0,0 +1,115 @@ +const gameContainer = document.getElementById('game-container'); +const player = document.getElementById('player'); +const scoreDisplay = document.getElementById('score'); +const gameOverDisplay = document.getElementById('game-over'); +const finalScoreDisplay = document.getElementById('final-score'); +let score = 0; +let playerSpeed = 5; +let bulletSpeed = 10; +let zombieSpeed = 2; +let zombies = []; +let bullets = []; +let gameRunning = true; + +document.addEventListener('keydown', movePlayer); +document.addEventListener('click', shootBullet); + +function movePlayer(e) { + if (!gameRunning) return; + const playerRect = player.getBoundingClientRect(); + switch(e.key) { + case 'ArrowUp': + if (playerRect.top > 0) player.style.top = playerRect.top - playerSpeed + 'px'; + break; + case 'ArrowDown': + if (playerRect.bottom < window.innerHeight) player.style.top = playerRect.top + playerSpeed + 'px'; + break; + case 'ArrowLeft': + if (playerRect.left > 0) player.style.left = playerRect.left - playerSpeed + 'px'; + break; + case 'ArrowRight': + if (playerRect.right < window.innerWidth) player.style.left = playerRect.left + playerSpeed + 'px'; + break; + } +} + +function shootBullet(e) { + if (!gameRunning) return; + const bullet = document.createElement('div'); + bullet.classList.add('bullet'); + const playerRect = player.getBoundingClientRect(); + bullet.style.left = playerRect.left + playerRect.width / 2 - 10 + 'px'; + bullet.style.top = playerRect.top + 'px'; + gameContainer.appendChild(bullet); + bullets.push(bullet); +} + +function spawnZombie() { + if (!gameRunning) return; + const zombie = document.createElement('div'); + zombie.classList.add('zombie'); + zombie.style.left = Math.random() * window.innerWidth + 'px'; + zombie.style.top = 0; + gameContainer.appendChild(zombie); + zombies.push(zombie); +} + +function updateGame() { + if (!gameRunning) return; + bullets.forEach((bullet, index) => { + const bulletRect = bullet.getBoundingClientRect(); + bullet.style.top = bulletRect.top - bulletSpeed + 'px'; + if (bulletRect.top < 0) { + bullet.remove(); + bullets.splice(index, 1); + } + }); + + zombies.forEach((zombie, zIndex) => { + const zombieRect = zombie.getBoundingClientRect(); + zombie.style.top = zombieRect.top + zombieSpeed + 'px'; + + // Check for collision with bullets + bullets.forEach((bullet, bIndex) => { + const bulletRect = bullet.getBoundingClientRect(); + if ( + bulletRect.top < zombieRect.bottom && + bulletRect.bottom > zombieRect.top && + bulletRect.left < zombieRect.right && + bulletRect.right > zombieRect.left + ) { + bullet.remove(); + zombie.remove(); + bullets.splice(bIndex, 1); + zombies.splice(zIndex, 1); + score++; + scoreDisplay.textContent = 'Score: ' + score; + } + }); + + // Check for collision with player + const playerRect = player.getBoundingClientRect(); + if ( + playerRect.top < zombieRect.bottom && + playerRect.bottom > zombieRect.top && + playerRect.left < zombieRect.right && + playerRect.right > zombieRect.left + ) { + endGame(); + } + + if (zombieRect.top > window.innerHeight) { + zombie.remove(); + zombies.splice(zIndex, 1); + } + }); +} + +function endGame() { + gameRunning = false; + finalScoreDisplay.textContent = score; + gameOverDisplay.classList.remove('hidden'); +} + +setInterval(spawnZombie, 2000); +setInterval(updateGame, 50); diff --git a/SinglePlayer - Games/Zoombie survival/styles.css b/SinglePlayer - Games/Zoombie survival/styles.css new file mode 100644 index 00000000..13a057ba --- /dev/null +++ b/SinglePlayer - Games/Zoombie survival/styles.css @@ -0,0 +1,53 @@ +body, html { + margin: 0; + padding: 0; + overflow: hidden; + height: 100%; + background-color: #000; +} + +#game-container { + position: relative; + width: 100%; + height: 100vh; +} + +#player { + position: absolute; + width: 50px; + height: 50px; + background-color: blue; + border-radius: 50%; + bottom: 50px; + left: calc(50% - 25px); +} + +.bullet, .zombie { + position: absolute; + width: 20px; + height: 20px; + background-color: red; + border-radius: 50%; +} + +#score { + position: absolute; + top: 10px; + left: 10px; + color: white; + font-size: 24px; +} + +#game-over { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: red; + font-size: 36px; + text-align: center; +} + +.hidden { + display: none; +}