diff --git a/Games/Drop_Dash_Game/README.md b/Games/Drop_Dash_Game/README.md new file mode 100644 index 0000000000..7554ba711c --- /dev/null +++ b/Games/Drop_Dash_Game/README.md @@ -0,0 +1,18 @@ +# **Drop_Dash_Game** + +--- + +**Tech Stack** +1. HTML +2. CSS +3. Javascript + + +
+ +## **Screenshots 📸** + +
+![images](https://github.com/user-attachments/assets/d9ca8651-1661-4860-bc04-7bc1a67a7ac9) + +
diff --git a/Games/Drop_Dash_Game/index.html b/Games/Drop_Dash_Game/index.html new file mode 100644 index 0000000000..14825c243a --- /dev/null +++ b/Games/Drop_Dash_Game/index.html @@ -0,0 +1,22 @@ + + + + + + Water Drop Catcher + + + +
+ +
Score: 0
+
Lives: 5
+ +
+ + + \ No newline at end of file diff --git a/Games/Drop_Dash_Game/script.js b/Games/Drop_Dash_Game/script.js new file mode 100644 index 0000000000..1ec06eb4b1 --- /dev/null +++ b/Games/Drop_Dash_Game/script.js @@ -0,0 +1,137 @@ +const canvas = document.getElementById('gameCanvas'); +const ctx = canvas.getContext('2d'); +const scoreElement = document.getElementById('score'); +const livesElement = document.getElementById('lives'); +const gameOverElement = document.getElementById('gameOver'); +const finalScoreElement = document.getElementById('finalScore'); +const continueBtn = document.getElementById('continueBtn'); + +canvas.width = 400; +canvas.height = 600; + +let cloud = { + x: canvas.width / 2, + y: canvas.height - 50, + width: 80, + height: 50, + speed: 10 +}; + +let drops = []; +let score = 0; +let lives = 6; +let gameLoop; + +function drawCloud() { + ctx.fillStyle = '#fff'; + ctx.beginPath(); + ctx.arc(cloud.x, cloud.y, 25, 0, Math.PI * 2); + ctx.arc(cloud.x - 25, cloud.y, 20, 0, Math.PI * 2); + ctx.arc(cloud.x + 25, cloud.y, 20, 0, Math.PI * 2); + ctx.fill(); +} + +function drawDrop(drop) { + ctx.fillStyle = '#00f'; + ctx.beginPath(); + ctx.arc(drop.x, drop.y, 5, 0, Math.PI * 2); + ctx.fill(); +} + +function createDrop() { + return { + x: Math.random() * canvas.width, + y: 0, + speed: Math.random() * 1 + .5 + }; +} + +function update() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + drawCloud(); + + if (Math.random() < 0.01) { + drops.push(createDrop()); + } + + drops.forEach((drop, index) => { + drop.y += drop.speed; + drawDrop(drop); + + if (drop.y > canvas.height) { + drops.splice(index, 1); + lives--; + updateLives(); + if (lives === 0) { + gameOver(); + } + } + + if ( + drop.x > cloud.x - cloud.width / 2 && + drop.x < cloud.x + cloud.width / 2 && + drop.y > cloud.y - cloud.height / 2 && + drop.y < cloud.y + cloud.height / 2 + ) { + drops.splice(index, 1); + score++; + updateScore(); + } + }); + + if (score >= 10) { + gameOver(); + } + + gameLoop = requestAnimationFrame(update); +} + +function updateScore() { + scoreElement.textContent = `Score: ${score}`; +} + +function updateLives() { + livesElement.textContent = `Lives: ${lives}`; +} + +function gameOver() { + cancelAnimationFrame(gameLoop); + gameOverElement.classList.remove('hidden'); + finalScoreElement.textContent = score; +} + +function resetGame() { + score = 0; + lives = 5; + drops = []; + updateScore(); + updateLives(); + gameOverElement.classList.add('hidden'); + update(); +} + +document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft' && cloud.x > cloud.width / 2) { + cloud.x -= cloud.speed; + } else if (e.key === 'ArrowRight' && cloud.x < canvas.width - cloud.width / 2) { + cloud.x += cloud.speed; + } +}); + +canvas.addEventListener('touchstart', (e) => { + e.preventDefault(); + const touch = e.touches[0]; + const rect = canvas.getBoundingClientRect(); + const touchX = touch.clientX - rect.left; + + if (touchX < canvas.width / 2) { + cloud.x -= cloud.speed; + } else { + cloud.x += cloud.speed; + } +}); + +continueBtn.addEventListener('click', resetGame); + +resetGame(); \ No newline at end of file diff --git a/Games/Drop_Dash_Game/style.css b/Games/Drop_Dash_Game/style.css new file mode 100644 index 0000000000..269960b52b --- /dev/null +++ b/Games/Drop_Dash_Game/style.css @@ -0,0 +1,74 @@ +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #1a1a2e; + font-family: 'Arial', sans-serif; + color: #ffffff; +} + +.game-container { + position: relative; + width: 400px; + height: 600px; +} + +canvas { + border: 2px solid #16213e; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +#score, #lives { + position: absolute; + top: 10px; + font-size: 20px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +#score { + left: 10px; +} + +#lives { + right: 10px; +} + +#gameOver { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(22, 33, 62, 0.9); + padding: 20px; + border-radius: 10px; + text-align: center; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); +} + +#gameOver h2 { + margin-top: 0; + color: #e94560; +} + +#continueBtn { + background-color: #e94560; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s; +} + +#continueBtn:hover { + background-color: #c13e54; +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/README.md b/README.md index ff74dcbcb5..d73f40f0ed 100644 --- a/README.md +++ b/README.md @@ -1572,7 +1572,7 @@ This repository also provides one such platforms where contributers come over an |[Building Blocks Game](https://github.com/kunjgit/GameZone/tree/main/Games/Building_Block_Game)| |[Cartoon character guessing game](https://github.com/kunjgit/GameZone/tree/main/Games/Cartoon_Character_Guessing_Game)| |[Align_4_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Align_4_Game)| - +|[Drop_Dash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Drop_Dash_Game)| |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)| | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) | | [Number_Recall_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Recall_Game) | diff --git a/assets/images/Drop_Dash_Game.png b/assets/images/Drop_Dash_Game.png new file mode 100644 index 0000000000..b4d11b9982 Binary files /dev/null and b/assets/images/Drop_Dash_Game.png differ diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index f89a86c0b9..f051f1cd07 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -3212,4 +3212,9 @@ "gameUrl": "Sky_Lift_Dash", "thumbnailUrl": "Sky_Lift_Dash.png" } + "643":{ + "gameTitle" : "Droop Dash Game", + "gameUrl": "Drop_Dash_Game", + "thumbnailUrl": "Drop_Dash_Game.png" + } }