kunjgit · kunjgit · Jul 5, 2024 · Jun 25, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/Games/Catch_Craze/README.md b/Games/Catch_Craze/README.md
@@ -0,0 +1,28 @@
+# **Game_Name** 
+Catch Craze
+
+---
+
+<br>
+
+## **Description 📃**
+In Catch Craze, you control a basket at the bottom of the screen, aiming to catch falling objects. The game gets progressively harder as you score more points, with objects falling faster and spawning more frequently. The goal is to score as many points as possible before the time runs out.
+
+
+## **Functionalities 🎮**
+
+1. Click the "Start Game" button to begin.
+2. Move the basket to catch the falling objects.
+3. Monitor the score and timer.
+4. When the timer reaches zero, the game ends, showing your final score and a button to restart the game.
+
+1. Controls: Use the left and right arrow keys to move the basket.
+2. Scoring: Each object caught increases your score by 1.
+3. Difficulty: Object speed and spawn rate increase every 5 points.
+4. Timer: The game lasts for 60 seconds.
+5. Game Over: When time runs out, the final score is displayed with an option to play again.
+
+<br>
+
+## **Screenshots 📸**
+![Catch_Craze](https://github.com/aditya-bhaumik/GameZone/assets/92214013/48ef4f13-db31-457c-b9bb-6e7611d9255e)
diff --git a/Games/Catch_Craze/back1.mp4 b/Games/Catch_Craze/back1.mp4
diff --git a/Games/Catch_Craze/index.html b/Games/Catch_Craze/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch Craze</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <video autoplay muted loop id="backgroundVideo">
+        <source src="back1.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="scoreBoard">Score: 0</div>
+        <div id="timer">Time: 60</div>
+        <div id="startScreen">
+            <h1>Catch Craze</h1>
+            <button id="startButton">Start Game</button>
+        </div>
+        <div id="gameOverScreen">
+            <h1>Game Over!</h1>
+            <p id="finalScore"></p>
+            <button id="reloadButton">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
+
+
+
diff --git a/Games/Catch_Craze/script.js b/Games/Catch_Craze/script.js
@@ -0,0 +1,145 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreBoard = document.getElementById('scoreBoard');
+const timerElement = document.getElementById('timer');
+const startScreen = document.getElementById('startScreen');
+const gameOverScreen = document.getElementById('gameOverScreen');
+const finalScoreElement = document.getElementById('finalScore');
+const startButton = document.getElementById('startButton');
+const reloadButton = document.getElementById('reloadButton');
+
+function resizeCanvas() {
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
+}
+
+resizeCanvas();
+window.addEventListener('resize', resizeCanvas);
+
+let score = 0;
+let timeLeft = 60;
+let keys = {};
+let gameInterval;
+let timerInterval;
+let fallingInterval;
+
+const basket = {
+    x: canvas.width / 2 - 50,
+    y: canvas.height - 30,
+    width: 100,
+    height: 20,
+    color: '#e74c3c',
+    speed: 10
+};
+
+const fallingObjects = [];
+let objectSize = 20;
+let objectSpeed = 3;
+let spawnInterval = 1000; // Spawn a new object every 1000 ms
+
+document.addEventListener('keydown', (e) => {
+    keys[e.key] = true;
+});
+
+document.addEventListener('keyup', (e) => {
+    keys[e.key] = false;
+});
+
+function drawBasket() {
+    ctx.fillStyle = basket.color;
+    ctx.fillRect(basket.x, basket.y, basket.width, basket.height);
+}
+
+function drawFallingObjects() {
+    ctx.fillStyle = '#f1c40f';
+    fallingObjects.forEach(obj => {
+        ctx.fillRect(obj.x, obj.y, objectSize, objectSize);
+    });
+}
+
+function moveBasket() {
+    if (keys['ArrowLeft'] && basket.x > 0) {
+        basket.x -= basket.speed;
+    }
+    if (keys['ArrowRight'] && basket.x < canvas.width - basket.width) {
+        basket.x += basket.speed;
+    }
+}
+
+function spawnFallingObject() {
+    const x = Math.random() * (canvas.width - objectSize);
+    fallingObjects.push({ x: x, y: 0 });
+}
+
+function updateFallingObjects() {
+    for (let i = fallingObjects.length - 1; i >= 0; i--) {
+        fallingObjects[i].y += objectSpeed;
+        if (fallingObjects[i].y > canvas.height) {
+            fallingObjects.splice(i, 1); // Remove the object if it goes out of canvas
+        } else if (fallingObjects[i].x > basket.x && fallingObjects[i].x < basket.x + basket.width &&
+                   fallingObjects[i].y + objectSize > basket.y && fallingObjects[i].y < basket.y + basket.height) {
+            score++;
+            scoreBoard.innerHTML = 'Score: ' + score;
+            fallingObjects.splice(i, 1); // Remove the object if it is caught
+
+            // Increase difficulty
+            if (score % 5 === 0) {
+                objectSpeed += 0.5;
+                spawnInterval = Math.max(200, spawnInterval - 50);
+                clearInterval(fallingInterval);
+                fallingInterval = setInterval(spawnFallingObject, spawnInterval);
+            }
+        }
+    }
+}
+
+function updateTime() {
+    timeLeft--;
+    timerElement.innerHTML = 'Time: ' + timeLeft;
+    if (timeLeft <= 0) {
+        clearInterval(gameInterval);
+        clearInterval(timerInterval);
+        clearInterval(fallingInterval);
+        gameOverScreen.style.display = 'block';
+        finalScoreElement.innerHTML = 'Your score is ' + score;
+    }
+}
+
+function resetGame() {
+    score = 0;
+    timeLeft = 60;
+    objectSpeed = 3;
+    spawnInterval = 1000;
+    scoreBoard.innerHTML = 'Score: ' + score;
+    timerElement.innerHTML = 'Time: ' + timeLeft;
+    fallingObjects.length = 0;
+    basket.x = canvas.width / 2 - 50;
+    gameOverScreen.style.display = 'none';
+}
+
+function startGame() {
+    resetGame();
+    gameInterval = setInterval(gameLoop, 20);
+    timerInterval = setInterval(updateTime, 1000);
+    fallingInterval = setInterval(spawnFallingObject, spawnInterval);
+    startScreen.style.display = 'none';
+    scoreBoard.style.display = 'block';
+    timerElement.style.display = 'block';
+}
+
+function gameLoop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBasket();
+    drawFallingObjects();
+    moveBasket();
+    updateFallingObjects();
+}
+
+startButton.addEventListener('click', () => {
+    startGame();
+});
+
+reloadButton.addEventListener('click', () => {
+    startGame();
+});
+
diff --git a/Games/Catch_Craze/styles.css b/Games/Catch_Craze/styles.css
@@ -0,0 +1,106 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+    background: #2c3e50; /* Fallback background color */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    position: relative;
+}
+
+#backgroundVideo {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+    z-index: -1; /* Ensure it stays behind other content */
+}
+
+#gameContainer {
+    position: relative;
+    width: 90%;
+    max-width: 600px;
+    height: 80%;
+    background-color: rgba(39, 174, 96, 0.8); /* Semi-transparent background to see video */
+    border: 2px solid #34495e;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+#scoreBoard, #timer {
+    position: absolute;
+    color: white;
+    font-size: 20px;
+    display: none; /* Hide initially */
+}
+
+#scoreBoard {
+    top: 10px;
+    left: 10px;
+}
+
+#timer {
+    top: 10px;
+    right: 10px;
+}
+
+#startScreen, #gameOverScreen {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: white;
+    display: none;
+}
+
+#startScreen {
+    display: block;
+}
+
+#gameOverScreen {
+    display: none;
+}
+
+#startButton, #reloadButton {
+    padding: 10px 20px;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+@media (max-width: 600px) {
+    body {
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+    #gameContainer {
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+    #scoreBoard, #timer {
+        font-size: 18px;
+    }
+    #startButton, #reloadButton {
+        font-size: 18px;
+        padding: 8px 16px;
+    }
+}
+
+
+
diff --git a/README.md b/README.md
@@ -403,7 +403,8 @@ This repository also provides one such platforms where contributers come over an
 |[Quest_For_Riches](https://github.com/kunjgit/GameZone/tree/main/Games/Quest_For_Riches)|
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |
 | [Tic_Tac_Toe_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_Tac_Toe_Neon) |
-
+| [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) |
+
  </center>
 
 <br>

diff --git a/assets/images/Catch_Craze.png b/assets/images/Catch_Craze.png