From 77d3dc40c44e4ddddcab4bb176ff9615b61b016c Mon Sep 17 00:00:00 2001
From: Apoorva <97695341+Apoorva57@users.noreply.github.com>
Date: Wed, 23 Oct 2024 23:50:04 +0530
Subject: [PATCH 1/3] Add files via upload
---
web/pages/catchgame.html | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
create mode 100644 web/pages/catchgame.html
diff --git a/web/pages/catchgame.html b/web/pages/catchgame.html
new file mode 100644
index 0000000..8de3266
--- /dev/null
+++ b/web/pages/catchgame.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Catch the Falling Object
+
+
+
+
+ Score: 0
+
+
+
From 268e62dd37109a7564804ddcdf63d69d05854819 Mon Sep 17 00:00:00 2001
From: Apoorva <97695341+Apoorva57@users.noreply.github.com>
Date: Wed, 23 Oct 2024 23:50:46 +0530
Subject: [PATCH 2/3] Add files via upload
---
web/stylesheet/catchgame.css | 47 ++++++++++++++++++++++++++++++++++++
1 file changed, 47 insertions(+)
create mode 100644 web/stylesheet/catchgame.css
diff --git a/web/stylesheet/catchgame.css b/web/stylesheet/catchgame.css
new file mode 100644
index 0000000..240dcc4
--- /dev/null
+++ b/web/stylesheet/catchgame.css
@@ -0,0 +1,47 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ background-color: #081108;
+ color: #fff;
+ text-align: center;
+}
+
+#gameContainer {
+ position: relative;
+ width: 100%;
+ height: 500px;
+ background-color: #222;
+ border: 2px solid #6BFF53;
+ overflow: hidden;
+ margin: 0 auto;
+}
+
+#basket {
+ position: absolute;
+ bottom: 10px;
+ width: 100px;
+ height: 50px;
+ background-color: #6BFF53;
+ border-radius: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+#object {
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ background-color: red;
+ border-radius: 50%;
+ top: -30px;
+}
+
+#score {
+ margin-top: 20px;
+ font-size: 24px;
+}
From a25cbb244da8c661cef26d27d1c19f42f7849dc5 Mon Sep 17 00:00:00 2001
From: Apoorva <97695341+Apoorva57@users.noreply.github.com>
Date: Wed, 23 Oct 2024 23:56:29 +0530
Subject: [PATCH 3/3] Add files via upload
---
web/scripts/catchgame.js | 80 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 80 insertions(+)
create mode 100644 web/scripts/catchgame.js
diff --git a/web/scripts/catchgame.js b/web/scripts/catchgame.js
new file mode 100644
index 0000000..b7848db
--- /dev/null
+++ b/web/scripts/catchgame.js
@@ -0,0 +1,80 @@
+let basket = document.getElementById('basket');
+let object = document.getElementById('object');
+let scoreDisplay = document.getElementById('score');
+let gameContainer = document.getElementById('gameContainer');
+let score = 0;
+let objectFallingSpeed = 2;
+let gameWidth = gameContainer.offsetWidth;
+let basketWidth = basket.offsetWidth;
+
+window.addEventListener('keydown', function(event) {
+ let basketLeft = basket.offsetLeft;
+ if (event.key === 'ArrowLeft' && basketLeft > 0) {
+ basket.style.left = (basketLeft - 20) + 'px';
+ } else if (event.key === 'ArrowRight' && basketLeft < (gameWidth - basketWidth)) {
+ basket.style.left = (basketLeft + 20) + 'px';
+ }
+});
+
+function dropObject() {
+ let objectLeft = Math.floor(Math.random() * (gameWidth - object.offsetWidth));
+ object.style.left = objectLeft + 'px';
+ object.style.top = '-30px';
+ let fallingInterval = setInterval(function() {
+ let objectTop = object.offsetTop;
+ object.style.top = objectTop + objectFallingSpeed + 'px';
+ let basketLeft = basket.offsetLeft;
+ let basketTop = basket.offsetTop;
+ if (objectTop + object.offsetHeight >= basketTop &&
+ objectTop + object.offsetHeight <= basketTop + basket.offsetHeight &&
+ objectLeft + object.offsetWidth >= basketLeft &&
+ objectLeft <= basketLeft + basketWidth) {
+ clearInterval(fallingInterval);
+ score += 1;
+ scoreDisplay.innerText = 'Score: ' + score;
+ if (score % 10 === 0) {
+ changeColors();
+ }
+ if (score % 10 === 0) {
+ increaseSpeed();
+ }
+ dropObject();
+ }
+ if (objectTop > gameContainer.offsetHeight) {
+ clearInterval(fallingInterval);
+ alert('Game Over! Final Score: ' + score);
+ resetGame();
+ }
+ }, 20);
+}
+
+function getRandomColor() {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+}
+
+function changeColors() {
+ const randomBasketColor = getRandomColor();
+ const randomObjectColor = getRandomColor();
+ const randomBorderColor = getRandomColor();
+ basket.style.backgroundColor = randomBasketColor;
+ object.style.backgroundColor = randomObjectColor;
+ gameContainer.style.borderColor = randomBorderColor;
+}
+
+function increaseSpeed() {
+ objectFallingSpeed += 0.5;
+}
+
+function resetGame() {
+ score = 0;
+ objectFallingSpeed = 3;
+ scoreDisplay.innerText = 'Score: ' + score;
+ dropObject();
+}
+
+dropObject();
\ No newline at end of file