kunjgit · ankana2113 · Jun 22, 2024 · Jun 22, 2024 · Jun 22, 2024 · Jun 22, 2024
diff --git a/Games/Catch_Stars/README.md b/Games/Catch_Stars/README.md
@@ -1,5 +1,5 @@
 
-# **Catch Stars⭐** 
+# **Catch the Falling Stars⭐** 
 
 ---
 
@@ -14,25 +14,20 @@
 - Start the game with a predefined star.
 - Stars appear at random positions on the screen.
 - Catch stars by clicking on them.
-- Timer keeps track of how long you have been playing.
 - Score increases with each star caught.
-- Special message appears when you catch more than 19 stars.
-- Responsive design suitable for various screen sizes.
 
 <br>
 
 ## **How to play? 🕹️**
 <!-- add the steps how to play games -->
-- Click the "Play Game" button to start.
+- Click the "Start Game" button to start.
 - Stars will appear randomly on the screen.
 - Click on the stars to catch them and increase your score.
-- Keep an eye on the timer and try to catch as many stars as possible before time runs out.
-- If you catch more than 19 stars, a special message will appear.
-
+- Reset the game by clicking on the "Reset" button.
 <br>
 
-## **Screenshots 📸**
-![Catch_the_star](https://github.com/kunjgit/GameZone/assets/97523900/352c3cef-8112-4e98-a075-cbecfe8b947a)
+/* ## **Screenshots 📸**
+![Catch_the_falling_star](https://github.com/ankana2113/GameZone/blob/main/assets/images/catch-stars.png)*/
 
 
 

diff --git a/Games/Catch_Stars/app.js b/Games/Catch_Stars/app.js
diff --git a/Games/Catch_Stars/index.html b/Games/Catch_Stars/index.html
@@ -1,27 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
-    <title>Catch The Star</title>
-  </head>
-  <body>
-    <div class="screen">
-      <h1>Catch The Star</h1>
-      <button class="btn" id="start-btn">Play Game</button>
-    </div>
-
-    <div class="screen game-container" id="game-container">
-      <h3 id="time" class="time">Time: 00:00</h3>
-      <h3 id="score" class="score">Score: 0</h3>
-      <h5 id="message" class="message">
-        Are you enjoying the game? <br>
-        Try to catch more stars!!
-      </h5>
-      <button class="btn" id="reset-btn">Reset Game</button>
-    </div>
-
-    <script src="app.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch the Falling Stars!</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>Catch the Falling Stars!</h1>
+        <div id="scoreboard">Score: <span id="score">0</span></div>
+        <div id="game-area"></div>
+        <div id="button-container">
+            <button id="start-button">Start Game</button>
+            <button id="reset-button" disabled>Reset</button>
+        </div>
+        <p id="instructions">Click on the falling stars to catch them!</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Catch_Stars/script.js b/Games/Catch_Stars/script.js
@@ -0,0 +1,51 @@
+const gameArea = document.getElementById('game-area');
+const startBtn = document.getElementById('start-button');
+const resetBtn = document.getElementById('reset-button');
+const scoreDisp = document.getElementById('score');
+let score = 0;
+let intervalId;
+
+function createStar() {
+    const star = document.createElement('span');
+    star.classList.add('star');
+    star.textContent = '★';
+    const leftPos = Math.floor(Math.random() * 100); // Random horizontal position
+    star.style.left = `${leftPos}%`;
+    gameArea.appendChild(star);
+    animateStar(star);
+}
+
+function animateStar(star) {
+    star.style.animationPlayState = 'running';
+    star.addEventListener('click', catchStar);
+}
+
+function catchStar() {
+    this.parentNode.removeChild(this);
+    score++;
+    scoreDisp.textContent = score;
+}
+
+function startGame() {
+    score = 0;
+    scoreDisp.textContent = score;
+    gameArea.innerHTML = ''; // Clear existing stars
+    intervalId = setInterval(createStar, 1500); // Create a new star every 1500ms
+    startBtn.enabled = false; // Disable start button after game starts
+    resetBtn.enabled = true; // Enable stop button
+}
+
+function resetGame() {
+    console.log("clearInterval called");
+    clearInterval(intervalId);
+    score = 0;
+    startBtn.enabled = true; // Enable start button after game stops
+    resetBtn.enabled = false; // Disable stop button
+
+    // Remove click event listener from existing stars
+    const stars = gameArea.querySelectorAll('.star');
+    stars.forEach(star => star.removeEventListener('click', catchStar));
+}
+
+startBtn.addEventListener('click', startGame);
+resetBtn.addEventListener('click', resetGame);