Merge pull request #4752 from 1911aditi/main

adding a new game dodge teh blocks
kunjgit · Jul 9, 2024 · 1c3a371 · 1c3a371
2 parents b9e6c8e + 6d060af
commit 1c3a371
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/Games/Dodge the Blocks/README.md b/Games/Dodge the Blocks/README.md
@@ -0,0 +1,43 @@
+# Dodge the Blocks Game
+
+"Dodge the Blocks" is a simple and fun web-based game where the player controls a character that must avoid falling blocks. The goal is to survive as long as possible without being hit by the blocks.
+
+## Table of Contents
+
+- [Demo](#demo)
+- [Installation](#installation)
+- [How to Play](#how-to-play)
+- [Technologies Used](#technologies-used)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Demo
+
+You can see a live demo of the game [here](#). (Add your live demo link here)
+
+## Installation
+
+To run this game locally, follow these steps:
+
+
+## How to Play
+
+1. Open the game in your web browser.
+2. Use the left and right arrow keys to move the player left and right.
+3. Avoid the falling blocks.
+4. Try to survive as long as possible. Your score increases with time.
+5. If a block hits the player, the game is over, and your final score will be displayed.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Contributing
+
+Contributions are welcome! If you have any suggestions or improvements, feel free to submit a pull request or open an issue.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
diff --git a/Games/Dodge the Blocks/index.html b/Games/Dodge the Blocks/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dodge the Blocks</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="player"></div>
+    </div>
+    <div id="score">Score: 0</div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Dodge the Blocks/script.js b/Games/Dodge the Blocks/script.js
@@ -0,0 +1,57 @@
+const gameContainer = document.getElementById('gameContainer');
+const player = document.getElementById('player');
+const scoreDisplay = document.getElementById('score');
+
+let score = 0;
+let gameOver = false;
+
+// Player movement
+document.addEventListener('keydown', (e) => {
+    const left = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
+    if (e.key === 'ArrowLeft' && left > 0) {
+        player.style.left = left - 10 + 'px';
+    } else if (e.key === 'ArrowRight' && left < 270) {
+        player.style.left = left + 10 + 'px';
+    }
+});
+
+// Generate blocks
+function createBlock() {
+    const block = document.createElement('div');
+    block.classList.add('block');
+    block.style.left = Math.floor(Math.random() * 270) + 'px';
+    gameContainer.appendChild(block);
+
+    // Collision detection
+    const blockInterval = setInterval(() => {
+        const blockTop = parseInt(window.getComputedStyle(block).getPropertyValue('top'));
+        const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
+        const playerRight = playerLeft + 30;
+        const blockLeft = parseInt(block.style.left);
+        const blockRight = blockLeft + 30;
+
+        if (blockTop > 470 && blockTop < 500 && playerLeft < blockRight && playerRight > blockLeft) {
+            gameOver = true;
+            alert('Game Over! Final Score: ' + score);
+            clearInterval(blockInterval);
+            location.reload();
+        }
+    }, 10);
+
+    // Remove block after it falls
+    setTimeout(() => {
+        block.remove();
+    }, 3000);
+}
+
+// Update score
+function updateScore() {
+    if (!gameOver) {
+        score++;
+        scoreDisplay.textContent = 'Score: ' + score;
+        setTimeout(updateScore, 1000);
+    }
+}
+
+updateScore();
+setInterval(createBlock, 1500);
diff --git a/Games/Dodge the Blocks/style.css b/Games/Dodge the Blocks/style.css
@@ -0,0 +1,49 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+#gameContainer {
+    position: relative;
+    width: 300px;
+    height: 500px;
+    background-color: #fff;
+    border: 2px solid #000;
+    overflow: hidden;
+}
+
+#player {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #3498db;
+    bottom: 10px;
+    left: 135px;
+}
+
+.block {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #e74c3c;
+    animation: fall 3s linear infinite;
+}
+
+@keyframes fall {
+    0% {
+        top: -30px;
+    }
+    100% {
+        top: 500px;
+    }
+}
+
+#score {
+    margin-top: 20px;
+    font-size: 24px;
+}
diff --git a/README.md b/README.md
@@ -363,6 +363,10 @@ This repository also provides one such platforms where contributers come over an
 | [Maze_Runner](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Runner)|
 | [Alien_Invasion](https://github.com/kunjgit/GameZone/tree/main/Games/Alien_Invasion) |
 | [Drawing_App](https://github.com/kunjgit/GameZone/tree/main/Games/Drawing_app) |
+
+| [Dodge_the_Blocks](https://github.com/kunjgit/GameZone/tree/main/Games/Dodge_the_Blocks)                     |
+
+
 |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)|
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |
 |[Color Swap](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Swap)|

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