Merge pull request kunjgit#4525 from vansh-codes/Cosmic_Chronicles

Added New Game Cosmic Blast
Maheshwari-Love · Jun 16, 2024 · 9889220 · 9889220
2 parents e7f7b52 + 29ebf73
commit 9889220
Show file tree

Hide file tree

Showing 13 changed files with 453 additions and 2 deletions.
diff --git a/Games/Cosmic_Blast/README.md b/Games/Cosmic_Blast/README.md
@@ -0,0 +1,37 @@
+# **Cosmic Blast**
+
+---
+
+<br>
+
+## **Description 📃**
+Cosmic Blast is an exciting and fast-paced arcade game where the fate of Earth lies in your hands. The planet is under attack by a relentless barrage of asteroids, and it's up to you to protect it. As the defender, you must blast the incoming asteroids to prevent them from causing damage to Earth. With each collision, Earth's health diminishes, and it's your mission to ensure its survival for as long as possible.
+
+## **Functionalities 🎮**
+- **Start Game Interface**: Begin the game with a simple tap on the screen.
+- **Asteroid Waves**: Continuous waves of asteroids targeting Earth.
+- **Blast Mechanism**: Tap on asteroids to destroy them before they hit Earth.
+- **Health System**: Earth starts with a health of 100. Each asteroid collision reduces the health.
+- **Game Over Condition**: The game ends when Earth's health reaches 0.
+- **Score Tracking**: Track how many asteroids you've destroyed to compete for high scores.
+- **Sound Effects and Visuals**: Engaging sound effects and visuals to enhance the gameplay experience.
+
+<br>
+
+## **How to play? 🕹️**
+1. **Start the Game**: Tap the start button on the interface to begin.
+2. **Blast the Asteroids**: Asteroids will start arriving towards Earth. Tap on each asteroid to blast it.
+3. **Protect Earth**: Prevent the asteroids from colliding with Earth. Each collision reduces Earth's health by a certain amount.
+4. **Monitor Earth's Health**: Keep an eye on the health bar. The game continues until Earth's health reaches 0.
+5. **Achieve High Scores**: Try to destroy as many asteroids as possible to achieve a high score before the game ends.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+![Cosmic_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Cosmic_Blast/assets/Cosmic_Blast.png)
+<!-- Add your screenshots like this -->
+<!-- ![image](url) -->
+
+---
diff --git a/Games/Cosmic_Blast/assets/Cosmic_Blast.png b/Games/Cosmic_Blast/assets/Cosmic_Blast.png
diff --git a/Games/Cosmic_Blast/assets/asteroid-1.png b/Games/Cosmic_Blast/assets/asteroid-1.png
diff --git a/Games/Cosmic_Blast/assets/asteroid-2.png b/Games/Cosmic_Blast/assets/asteroid-2.png
diff --git a/Games/Cosmic_Blast/assets/asteroid-3.png b/Games/Cosmic_Blast/assets/asteroid-3.png
diff --git a/Games/Cosmic_Blast/assets/background.jpg b/Games/Cosmic_Blast/assets/background.jpg
diff --git a/Games/Cosmic_Blast/assets/earth.png b/Games/Cosmic_Blast/assets/earth.png
diff --git a/Games/Cosmic_Blast/assets/explode.mp3 b/Games/Cosmic_Blast/assets/explode.mp3
diff --git a/Games/Cosmic_Blast/index.html b/Games/Cosmic_Blast/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Blast</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./assets/images/gamezone.png" type="image/x-icon">
+</head> 
+<body>
+
+    <div style="text-align:center;
+        font-size: 30px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
+
+    <!-- === INTERFACE === -->
+    <div id="interface">
+        <h1>Cosmic Blast</h1>
+        <p>Welcome to the Cosmic Blast Game! Save the Earth from incoming asteroids by clicking on them.</p>
+        <p>Instructions:</p>
+        <ul>
+            <li>Click on the asteroids to destroy them and increase your score.</li>
+            <li>Missed asteroids will damage Earth, causing it to slowly fade as its health decreases</li>
+            <li>If health reaches zero, the game is over.</li>
+        </ul>
+        <button id="start-btn" class="start-btn">Start Game</button>
+        <!-- <button class="start-btn"><a href="https://kunjgit.github.io/GameZone/">HOME</a></button> -->
+    </div>
+
+    <!-- === GAME CONTAINER === -->
+    <div id="game-container">
+        <button id="quit-btn">&#10006;</button>
+        <div id="earth"></div>
+        <div id="health-bar">
+            <div id="health-text"></div>
+        </div>
+        <div id="score"></div>
+    </div>
+
+    <!-- === END SCREEN === -->
+    <div id="end-screen" class="hidden">
+        <div class="popup">
+            <h2>Earth has been destroyed by the asteroids</h2>
+            <p>Your final score: <span id="final-score"></span></p>
+            <button id="play-again-btn">Play Again</button>
+            <!-- <button id="home-btn">BACK</button> -->
+        </div>
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/Games/Cosmic_Blast/script.js b/Games/Cosmic_Blast/script.js
@@ -0,0 +1,174 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const earth = document.getElementById("earth");
+    const healthBar = document.getElementById("health-bar");
+    const healthText = document.getElementById("health-text");
+    const scoreDisplay = document.getElementById("score");
+    const interfaceDiv = document.getElementById("interface");
+    const gameContainer = document.getElementById("game-container");
+    const startBtn = document.getElementById("start-btn");
+    const quitBtn = document.getElementById("quit-btn");
+
+    const endScreen = document.getElementById("end-screen");
+    const finalScore = document.getElementById("final-score");
+
+    var explosionSound = new Audio();
+    explosionSound.src = "./assets/explode.mp3";
+    explosionSound.preload = "auto";
+
+    let health = 100;
+    let score = 0;
+    let asteroids = [];
+    let gameInterval;
+
+    startBtn.addEventListener("click", startGame);
+    quitBtn.addEventListener("click", quitGame);
+
+    function startGame() {
+        interfaceDiv.style.display = "none";
+        gameContainer.style.display = "block";
+        health = 100;
+        updateHealthBar();
+        gameInterval = setInterval(createAsteroid, 1000); // Decreased interval for more frequent asteroid appearance
+    }
+
+    function endGame() {
+        clearInterval(gameInterval);
+        gameContainer.style.display = "none";
+        finalScore.textContent = score;
+        endScreen.classList.remove("hidden");
+        endScreen.style.display = "flex";
+
+        const playBtn = document.getElementById("play-again-btn");
+        // const homeBtn = document.getElementById("home-btn");
+        playBtn.addEventListener("click", function(){
+            endScreen.classList.add("hidden");
+            endScreen.style.display = "none";
+            startGame();
+        });
+        // homeBtn.addEventListener("click", function(){
+        //     endScreen.classList.add("hidden");
+        //     endScreen.style.display = "none";
+        //     gameContainer.style.display = "none";
+        //     interfaceDiv.style.display = "flex";
+        // });
+
+        resetGame();
+    }
+
+    function resetGame() {
+        health = 100;
+        score = 0;
+        asteroids.forEach(asteroid => asteroid.remove());
+        asteroids = [];
+        updateHealthBar();
+        scoreDisplay.textContent = "Score: " + score;
+    }
+
+    function quitGame() {
+        clearInterval(gameInterval);
+        gameContainer.style.display = "none";
+        endGame();
+    }
+
+
+    function createAsteroid() {
+        const asteroid = document.createElement("div");
+        asteroid.className = "asteroid";
+        const size = Math.floor(Math.random() * 3) + 1; // Random size between 1 and 3
+        asteroid.style.backgroundImage = `url('/assets/asteroid-${size}.png')`; // Use different asteroid images
+        asteroid.setAttribute("size", size); // Store size as an attribute
+
+        // Set initial position and angle
+        const initialX = Math.random() * window.innerWidth;
+        const initialY = -100;
+        // const initialY = Math.random() * window.innerHeight;
+        const angle = Math.atan2(earth.offsetTop - initialY, earth.offsetLeft - initialX);
+        const speed = Math.random() * 2 + 2; // Increased speed
+
+        // Set initial position
+        asteroid.style.left = initialX + "px";
+        asteroid.style.top = initialY + "px";
+
+        document.body.appendChild(asteroid);
+        asteroids.push(asteroid);
+
+        moveAsteroid(asteroid, angle, speed);
+    }
+
+    function moveAsteroid(asteroid, angle, speed) {
+        const moveInterval = setInterval(function() {
+            const asteroidTop = parseInt(getComputedStyle(asteroid).top);
+            const asteroidLeft = parseInt(getComputedStyle(asteroid).left);
+            const deltaY = Math.sin(angle) * speed;
+            const deltaX = Math.cos(angle) * speed;
+
+            asteroid.style.top = asteroidTop + deltaY + "px";
+            asteroid.style.left = asteroidLeft + deltaX + "px";
+
+            if (isColliding(asteroid, earth)) {
+                asteroidCollision(asteroid);
+                clearInterval(moveInterval);
+            }
+
+            if (asteroidTop >= window.innerHeight || asteroidLeft >= window.innerWidth) {
+                clearInterval(moveInterval);
+                document.body.removeChild(asteroid);
+                const index = asteroids.indexOf(asteroid);
+                asteroids.splice(index, 1);
+            }
+        }, 1000 / 60);
+    }
+
+    document.addEventListener("click", function(event) {
+        const clickedAsteroid = event.target.closest(".asteroid");
+        if (clickedAsteroid) {
+            explosionSound.play();
+            asteroidClicked(clickedAsteroid);
+        }
+    });
+
+    document.addEventListener('dblclick', function(event) {
+        event.preventDefault();
+    }, false);
+
+
+    function asteroidClicked(asteroid) {
+        score += 10; // Increase score based on size
+        scoreDisplay.textContent = "Score: " + score;
+        document.body.removeChild(asteroid);
+        const index = asteroids.indexOf(asteroid);
+        asteroids.splice(index, 1);
+    }
+
+    function asteroidCollision(asteroid) {
+        health -= 5;
+        updateHealthBar();
+        if (asteroid.parentNode === document.body) { // Check if asteroid is a child of document body
+            document.body.removeChild(asteroid);
+            const index = asteroids.indexOf(asteroid);
+            asteroids.splice(index, 1);
+        } 
+    }
+
+    function isColliding(element1, element2) {
+        const rect1 = element1.getBoundingClientRect();
+        const rect2 = element2.getBoundingClientRect();
+        return !(
+            rect1.top > rect2.bottom ||
+            rect1.right < rect2.left ||
+            rect1.bottom < rect2.top ||
+            rect1.left > rect2.right
+        );
+    }
+
+    function updateHealthBar() {
+        scoreDisplay.textContent = "Score: " + score;
+        healthBar.style.width = health + "%";
+        healthText.textContent = "Health: " + health + "%"; // Update health text
+        earth.style.opacity = health / 70;
+        if (health <= 0) {
+            endGame();
+        }
+        earth.style.backgroundImage = "url('/assets/earth.png')";
+    }
+});