Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Tower Building Game #5112

Merged
merged 5 commits into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions Games/Tower_Building_Game/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@

# **Tower Building Game**

---

<br>

## **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.

<br>

## **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.

<br>

## **Screenshots 📸**
<br>

![Tower_Building_Game](c:\Users\22wh1\OneDrive\Pictures\Screenshots\Screenshot (203).png)

<br>

## **Working Video 📹**
C:\Users\22wh1\Downloads\Recording 2024-08-06 200123.mp4

Binary file added Games/Tower_Building_Game/images/img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions Games/Tower_Building_Game/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tower Building Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameContainer">
<div id="gameArea">
<div id="tower"></div>
<div id="hangingBlock" class="block"></div>
</div>
<div id="controls">
<button id="dropButton">Drop Block</button>
<div id="score">Score: 0</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
66 changes: 66 additions & 0 deletions Games/Tower_Building_Game/script.js
Original file line number Diff line number Diff line change
@@ -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);
88 changes: 88 additions & 0 deletions Games/Tower_Building_Game/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1701,6 +1701,7 @@ This repository also provides one such platforms where contributers come over an
|[Quiz_With_Timer](https://github.com/kunjgit/GameZone/tree/main/Games/Quiz_With_Timer)|
| [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)|
|[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)|
</center>

<br>
Expand Down