-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1047 from pallasivasai/city890
City_Builder_Game is added
- Loading branch information
Showing
8 changed files
with
230 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>City Builder Game</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <div id="gameContainer"> | ||
| <div id="gameBoard"></div> | ||
| <div id="controls"> | ||
| <button id="placeHouse">Place House</button> | ||
| <button id="placeFactory">Place Factory</button> | ||
| <button id="placePark">Place Park</button> | ||
| <div id="info"> | ||
| <p>Money: <span id="money">1000</span></p> | ||
| <p>Happiness: <span id="happiness">100</span></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters