diff --git a/README.md b/README.md index 923ad08e..53c24f4d 100644 --- a/README.md +++ b/README.md @@ -246,14 +246,17 @@ ________________________________________________________________________________ | 188 | [Cubula_Game](.SinglePlayer%20-%20Games/Cubula_Game) | | 189 | [Ball_Shooting_Game](.SinglePlayer%20-%20Games/Ball_Shooting_Game) | | 190 | [Baseball_Game](.SinglePlayer%20-%20Games/Baseball_Game) | -| 191 | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) | -| 192 | [Pop My Balloon]() | -| 193 | [Doraemon Run](.SinglePlayer%20-%20Games/DoraemonRun) | -| 194 | [Earth_Guardian](./SinglePlayer%20-%20Games/Earth_Guardian) | -| 195 | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) | -| 196 | [SnakeBites Game](./SinglePlayer%20-%20Games/SnakeBites) | -| 197 | [Flames_Game](../MultiPlayer%20-%20Games/Flames_Game) | -| 198 | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) | +| 191 | [Doraemon Run](.SinglePlayer%20-%20Games/DoraemonRun) | +| 192 | [Hand_Cricket_Champ](./SinglePlayer%20-%20Games/Hand_Cricket_Champ) | +| 193 | [SnakeBites Game](./SinglePlayer%20-%20Games/SnakeBites) | +| 194 | [Pop My Balloon]() | +| 196 | [Doraemon Run](.SinglePlayer%20-%20Games/DoraemonRun) | +| 197 | [Earth_Guardian](./SinglePlayer%20-%20Games/Earth_Guardian) | +| 198 | [Flames_Game](../MultiPlayer%20-%20Games/Flames_Game) | +| 199 | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) | +| 200 | [City_Builder_Game](.SinglePlayer%20-%20Games/City_Builder_Game) | + + diff --git a/SinglePlayer - Games/Banner - image/City_Builder_Game.png b/SinglePlayer - Games/Banner - image/City_Builder_Game.png new file mode 100644 index 00000000..dc50597c Binary files /dev/null and b/SinglePlayer - Games/Banner - image/City_Builder_Game.png differ diff --git a/SinglePlayer - Games/City_Builder_Game/City_Builder_Game.png b/SinglePlayer - Games/City_Builder_Game/City_Builder_Game.png new file mode 100644 index 00000000..bc81a4ae Binary files /dev/null and b/SinglePlayer - Games/City_Builder_Game/City_Builder_Game.png differ diff --git a/SinglePlayer - Games/City_Builder_Game/README.md b/SinglePlayer - Games/City_Builder_Game/README.md new file mode 100644 index 00000000..824d188b --- /dev/null +++ b/SinglePlayer - Games/City_Builder_Game/README.md @@ -0,0 +1,27 @@ +# City Builder Game + +This is a simple City Builder game where players can place different types of buildings on a grid to manage their money and the city's happiness. The game is built using HTML, CSS, and JavaScript. + +## How to Play + +1. **Choose a Building**: Select a building type by clicking one of the buttons (Place House, Place Factory, Place Park). +2. **Place a Building**: Click on a cell in the grid to place the selected building. +3. **Manage Resources**: Placing buildings will affect your money and the city's happiness. Ensure you have enough money to place a building and maintain a positive happiness score. + +## Project Structure + +The project consists of the following files: + +- `index.html`: The main HTML file that contains the structure of the game. +- `styles.css`: The CSS file that styles the game. +- `script.js`: The JavaScript file that contains the game logic. + +## Setup and Installation + +1. Clone the repository or download the project files. +2. Open `index.html` in your web browser to start the game. + +## Gameplay + Place House: Costs 100 money, increases happiness by 10, and is displayed in green. + Place Factory: Costs 200 money, decreases happiness by 20, and is displayed in gray. + Place Park: Costs 150 money, increases happiness by 20, and is displayed in light green. \ No newline at end of file diff --git a/SinglePlayer - Games/City_Builder_Game/index.html b/SinglePlayer - Games/City_Builder_Game/index.html new file mode 100644 index 00000000..ab143359 --- /dev/null +++ b/SinglePlayer - Games/City_Builder_Game/index.html @@ -0,0 +1,24 @@ + + + + + + City Builder Game + + + +
+
+
+ + + +
+

Money: 1000

+

Happiness: 100

+
+
+
+ + + diff --git a/SinglePlayer - Games/City_Builder_Game/script.js b/SinglePlayer - Games/City_Builder_Game/script.js new file mode 100644 index 00000000..50aa9444 --- /dev/null +++ b/SinglePlayer - Games/City_Builder_Game/script.js @@ -0,0 +1,55 @@ +// script.js +const gameBoard = document.getElementById('gameBoard'); +const moneyElement = document.getElementById('money'); +const happinessElement = document.getElementById('happiness'); + +const buildings = { + house: { cost: 100, happiness: 10, color: 'green' }, + factory: { cost: 200, happiness: -20, color: 'gray' }, + park: { cost: 150, happiness: 20, color: 'lightgreen' } +}; + +let currentBuilding = null; +let money = 1000; +let happiness = 100; + +// Create the game board +for (let i = 0; i < 100; i++) { + const cell = document.createElement('div'); + cell.addEventListener('click', () => placeBuilding(cell)); + gameBoard.appendChild(cell); +} + +// Update money and happiness display +function updateInfo() { + moneyElement.textContent = money; + happinessElement.textContent = happiness; +} + +// Place a building on the selected cell +function placeBuilding(cell) { + if (currentBuilding && cell.style.backgroundColor === '') { + const building = buildings[currentBuilding]; + if (money >= building.cost) { + cell.style.backgroundColor = building.color; + money -= building.cost; + happiness += building.happiness; + updateInfo(); + } else { + alert('Not enough money to place this building!'); + } + } +} + +// Button event listeners +document.getElementById('placeHouse').addEventListener('click', () => { + currentBuilding = 'house'; +}); +document.getElementById('placeFactory').addEventListener('click', () => { + currentBuilding = 'factory'; +}); +document.getElementById('placePark').addEventListener('click', () => { + currentBuilding = 'park'; +}); + +updateInfo(); diff --git a/SinglePlayer - Games/City_Builder_Game/styles.css b/SinglePlayer - Games/City_Builder_Game/styles.css new file mode 100644 index 00000000..b4080af9 --- /dev/null +++ b/SinglePlayer - Games/City_Builder_Game/styles.css @@ -0,0 +1,56 @@ +/* styles.css */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f0f0f0; + margin: 0; + font-family: Arial, sans-serif; +} + +#gameContainer { + display: flex; + flex-direction: column; + align-items: center; +} + +#gameBoard { + display: grid; + grid-template-columns: repeat(10, 40px); + grid-template-rows: repeat(10, 40px); + gap: 2px; + margin-bottom: 20px; +} + +#gameBoard div { + width: 40px; + height: 40px; + background: #e0e0e0; + border: 1px solid #ccc; + display: flex; + justify-content: center; + align-items: center; +} + +#controls { + display: flex; + justify-content: space-around; + width: 100%; +} + +button { + padding: 10px; + margin: 0 10px; + cursor: pointer; +} + +#info { + display: flex; + flex-direction: column; + align-items: center; +} + +#info p { + margin: 5px 0; +} diff --git a/additionalpage/game.html b/additionalpage/game.html index 5e7e5291..f398f37d 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -7502,6 +7502,63 @@

Ball_Fall_Game

+ +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

City_Builder_Game

+

City_Builder_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + + + + +