diff --git a/Games/Tower_Building_Game/README.md b/Games/Tower_Building_Game/README.md new file mode 100644 index 0000000000..50e534b23f --- /dev/null +++ b/Games/Tower_Building_Game/README.md @@ -0,0 +1,38 @@ + +# **Tower Building Game** + +--- + +
+ +## **Description 📃** +- The Tower Building Game is an interactive and visually engaging game where players build a tower by stacking falling blocks. The objective is to stack the blocks as accurately as possible to create a stable and high tower. + +## **Functionalities 🎮** +- **Start Game**: Begin a new game by clicking the "Drop Block" button. +- **Drop Block**: Click the button to drop the sliding block onto the tower. +- **Score Tracking**: View your current score, which increases with each successfully placed block. +- **Game Over**: The game ends if a block is not aligned correctly and causes the tower to become unstable. + +
+ +## **How to play? 🕹ī¸** +1. Open the game in your web browser. +2. Click the "Drop Block" button to drop the sliding block onto the tower. +3. Align the block as closely as possible with the blocks in the tower. +4. Each successfully placed block will increase your score. +5. The game ends if a block falls out of alignment and causes the tower to become unstable. +6. Click the "Drop Block" button again to restart the game and try to improve your score. + +
+ +## **Screenshots 📸** +
+ +![Tower_Building_Game](c:\Users\22wh1\OneDrive\Pictures\Screenshots\Screenshot (203).png) + +
+ +## **Working Video 📹** +C:\Users\22wh1\Downloads\Recording 2024-08-06 200123.mp4 + diff --git a/Games/Tower_Building_Game/images/img.png b/Games/Tower_Building_Game/images/img.png new file mode 100644 index 0000000000..cc080798b8 Binary files /dev/null and b/Games/Tower_Building_Game/images/img.png differ diff --git a/Games/Tower_Building_Game/index.html b/Games/Tower_Building_Game/index.html new file mode 100644 index 0000000000..e950485bab --- /dev/null +++ b/Games/Tower_Building_Game/index.html @@ -0,0 +1,22 @@ + + + + + + Tower Building Game + + + +
+
+
+
+
+
+ +
Score: 0
+
+
+ + + diff --git a/Games/Tower_Building_Game/script.js b/Games/Tower_Building_Game/script.js new file mode 100644 index 0000000000..51faedb3d2 --- /dev/null +++ b/Games/Tower_Building_Game/script.js @@ -0,0 +1,66 @@ +const gameArea = document.getElementById('gameArea'); +const tower = document.getElementById('tower'); +const hangingBlock = document.getElementById('hangingBlock'); +const dropButton = document.getElementById('dropButton'); +const scoreElement = document.getElementById('score'); + +let blockPosition = 0; +let score = 0; + +function dropBlock() { + const rect = hangingBlock.getBoundingClientRect(); + const block = document.createElement('div'); + block.classList.add('block', 'falling'); + block.style.top = `${rect.top - gameArea.getBoundingClientRect().top}px`; + block.style.left = `${rect.left - gameArea.getBoundingClientRect().left}px`; + gameArea.appendChild(block); + + // Trigger the falling animation + setTimeout(() => { + block.style.top = `${gameArea.clientHeight - blockPosition - block.clientHeight}px`; + }, 10); + + // Wait for the falling animation to complete + setTimeout(() => { + block.classList.remove('falling'); + tower.appendChild(block); + block.style.bottom = `${blockPosition}px`; + block.style.top = 'auto'; + blockPosition += 22; // Adjust position for the next block + + // Update score + score++; + scoreElement.textContent = `Score: ${score}`; + + // Reset hanging block position + hangingBlock.style.left = '50%'; + hangingBlock.style.transform = 'translateX(-50%)'; + + // Check for balance and game over condition + if (!isBalanced()) { + alert(`Game Over! Your score: ${score}`); + resetGame(); + } + }, 510); // Animation duration + small buffer +} + +function isBalanced() { + const blocks = tower.getElementsByClassName('block'); + for (let i = 0; i < blocks.length; i++) { + const block = blocks[i]; + const left = parseFloat(block.style.left); + if (left < 0 || left > (gameArea.clientWidth - block.clientWidth)) { + return false; + } + } + return true; +} + +function resetGame() { + tower.innerHTML = ''; + blockPosition = 0; + score = 0; + scoreElement.textContent = `Score: ${score}`; +} + +dropButton.addEventListener('click', dropBlock); diff --git a/Games/Tower_Building_Game/style.css b/Games/Tower_Building_Game/style.css new file mode 100644 index 0000000000..ac5ed10286 --- /dev/null +++ b/Games/Tower_Building_Game/style.css @@ -0,0 +1,88 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url('https://iamkun.github.io/tower_game/assets/main-bg.png'); + margin: 0; + font-family: Arial, sans-serif; +} + +#gameContainer { + text-align: center; +} + +#gameArea { + position: relative; + width: 300px; + height: 500px; + background-color: #fff; + border: 2px solid #007bff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + margin-bottom: 20px; +} + +#tower { + position: absolute; + bottom: 0; + width: 100%; +} + +.block { + width: 100px; + height: 20px; + background-color: #007bff; + background-image: url('https://iamkun.github.io/tower_game/assets/main-bg.png'); + background-size: cover; + background-position: center; + margin: 2px auto; + position: absolute; + border-radius: 4px; +} + +#hangingBlock { + top: 0; + left: 50%; + transform: translateX(-50%); + background-color: #ff5722; + animation: moveBlock 2s infinite alternate; +} + +@keyframes moveBlock { + 0% { left: 0; } + 100% { left: 100%; } +} + +.falling { + transition: top 0.5s ease-in; +} + +#controls { + display: flex; + flex-direction: column; + align-items: center; +} + +button { + padding: 10px 20px; + font-size: 18px; + color: #fff; + background-color: #007bff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #0056b3; +} + +#score { + margin-top: 10px; + font-size: 24px; + font-weight: bold; + color: yellow; +} diff --git a/README.md b/README.md index 38d2158dd4..56471418d3 100644 --- a/README.md +++ b/README.md @@ -1711,11 +1711,12 @@ This repository also provides one such platforms where contributers come over an | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)| |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)| -add/find-the-missing-letter -======= + |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)| - main +|[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)| + +|[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
diff --git a/assets/images/img.png b/assets/images/img.png new file mode 100644 index 0000000000..cc080798b8 Binary files /dev/null and b/assets/images/img.png differ