-
Notifications
You must be signed in to change notification settings - Fork 838
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4700 from aditya-bhaumik/catch
[New Game] : Catch Craze
- Loading branch information
Showing
7 changed files
with
366 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 📸** | ||
|  |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.