Merge pull request #200 from Apoorva57/Apoorva57

Added a Catch the Ball game
CodeMacrocosm · Oct 23, 2024 · e043a8c · e043a8c
2 parents 551c4df + a25cbb2
commit e043a8c
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 0 deletions.
diff --git a/web/pages/catchgame.html b/web/pages/catchgame.html
@@ -0,0 +1,17 @@
+<!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 Object</title>
+    <link rel="stylesheet" href="catchgame.css">
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="basket"></div>
+        <div id="object"></div>
+    </div>
+    <h1 id="score">Score: 0</h1>
+    <script src="catchgame.js"></script>
+</body>
+</html>
diff --git a/web/scripts/catchgame.js 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();
diff --git a/web/stylesheet/catchgame.css 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;
+}