Add files via upload

aditya-bhaumik · Jun 25, 2024 · e540181 · e540181
1 parent 985446f
commit e540181
Show file tree

Hide file tree

Showing 4 changed files with 285 additions and 0 deletions.
diff --git a/Games/Catch_Craze/back1 (2).mp4 b/Games/Catch_Craze/back1 (2).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;
+    }
+}
+
+
+