Merge pull request #4653 from 1911aditi/main

added new game: catch the falling stars
kunjgit · Jul 5, 2024 · ed74745 · ed74745
2 parents 78651ef + cb036b7
commit ed74745
Show file tree

Hide file tree

Showing 6 changed files with 531 additions and 0 deletions.
diff --git a/Games/Catch the falling Stars/README.md b/Games/Catch the falling Stars/README.md
diff --git a/Games/Catch the falling Stars/index.html b/Games/Catch the falling Stars/index.html
@@ -0,0 +1,15 @@
+<!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="styles.css">
+</head>
+<body>
+    <div id="game-container">
+        <div id="basket"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Catch the falling Stars/script.js b/Games/Catch the falling Stars/script.js
@@ -0,0 +1,47 @@
+const gameContainer = document.getElementById('game-container');
+const basket = document.getElementById('basket');
+let score = 0;
+
+document.addEventListener('mousemove', (event) => {
+    const basketX = event.clientX - (basket.offsetWidth / 2);
+    basket.style.left = `${basketX}px`;
+});
+
+function createStar() {
+    const star = document.createElement('div');
+    star.classList.add('star');
+    star.style.left = `${Math.random() * window.innerWidth}px`;
+    gameContainer.appendChild(star);
+    moveStar(star);
+}
+
+function moveStar(star) {
+    let starY = 0;
+    const fallInterval = setInterval(() => {
+        if (starY > window.innerHeight) {
+            clearInterval(fallInterval);
+            star.remove();
+        } else {
+            starY += 5;
+            star.style.top = `${starY}px`;
+            checkCollision(star);
+        }
+    }, 30);
+}
+
+function checkCollision(star) {
+    const basketRect = basket.getBoundingClientRect();
+    const starRect = star.getBoundingClientRect();
+    if (
+        starRect.bottom > basketRect.top &&
+        starRect.top < basketRect.bottom &&
+        starRect.right > basketRect.left &&
+        starRect.left < basketRect.right
+    ) {
+        star.remove();
+        score += 10;
+        console.log(`Score: ${score}`);
+    }
+}
+
+setInterval(createStar, 1000);
diff --git a/Games/Catch the falling Stars/styles.css b/Games/Catch the falling Stars/styles.css
@@ -0,0 +1,33 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    background-color: #000;
+}
+
+#game-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    overflow: hidden;
+}
+
+#basket {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 50px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.star {
+    position: absolute;
+    top: -20px;
+    width: 20px;
+    height: 20px;
+    background-color: yellow;
+    border-radius: 50%;
+}