Merge pull request #1115 from Meetjain1/mj

Feat : Added Zoombie survival game
ChromeGaming · Aug 7, 2024 · 6bda261 · 6bda261
2 parents 46ef584 + 1f987c6
commit 6bda261
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 0 deletions.
diff --git a/SinglePlayer - Games/Zoombie survival/index.html b/SinglePlayer - Games/Zoombie survival/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zombie Survival</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game-container">
+        <div id="player"></div>
+        <div id="score">Score: 0</div>
+        <div id="game-over" class="hidden">Failed! Final Score: <span id="final-score"></span></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Zoombie survival/script.js 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
@@ -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;
+}