From d4f9e7b427871a916c2a521061f0e87126ad13fb Mon Sep 17 00:00:00 2001
From: 1911aditi <146438609+1911aditi@users.noreply.github.com>
Date: Fri, 21 Jun 2024 18:53:59 +0530
Subject: [PATCH] Add files via upload
---
Catch the falling Stars/README.md | 0
Catch the falling Stars/index.html | 15 ++++++++++
Catch the falling Stars/script.js | 47 ++++++++++++++++++++++++++++++
Catch the falling Stars/styles.css | 33 +++++++++++++++++++++
4 files changed, 95 insertions(+)
create mode 100644 Catch the falling Stars/README.md
create mode 100644 Catch the falling Stars/index.html
create mode 100644 Catch the falling Stars/script.js
create mode 100644 Catch the falling Stars/styles.css
diff --git a/Catch the falling Stars/README.md b/Catch the falling Stars/README.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Catch the falling Stars/index.html b/Catch the falling Stars/index.html
new file mode 100644
index 0000000000..4469040ead
--- /dev/null
+++ b/Catch the falling Stars/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Catch the Falling Stars
+
+
+
+
+
+
+
diff --git a/Catch the falling Stars/script.js b/Catch the falling Stars/script.js
new file mode 100644
index 0000000000..d80a5fd35f
--- /dev/null
+++ b/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/Catch the falling Stars/styles.css b/Catch the falling Stars/styles.css
new file mode 100644
index 0000000000..3f84d4a528
--- /dev/null
+++ b/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%;
+}