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.

Sign up for GitHub

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

Enhanced City_builder_game to a new level #4671

Merged
merged 2 commits into from
Jul 5, 2024
Merged

Enhanced City_builder_game to a new level #4671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57ebe27
Updated city_builder_game
mohitgedar Jun 22, 2024
6145b6d
Added preview image
mohitgedar Jun 22, 2024
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
50 changes: 23 additions & 27 deletions Games/City_Builder_Game/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
# 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.
# 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 and pollution. 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 as well as pollution. Ensure you have enough money to place a building and maintain a positive happiness score and keep low pollution.

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

108 changes: 84 additions & 24 deletions Games/City_Builder_Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,84 @@
<!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>
<!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="instruct" >
<h1># Instructions</h1>
<h3>This game is about building a sustainable city</h3>
<ol>
<li>Filling all the boxes with increasing money <br> and decreasing pollution and happiness > 100 is a Win</li>
<li>Filling all boxes with happiness less than 100 and <br> money decreasing over time and pollution increasing in city is loss</li>
<li>A factory
<ul>
<li>Creating costs = 200</li>
<li>generates = 50 unit money per 20sec</li>
<li>decreases happiness by 20 units</li>
<li>generates 15 unit pollution per 20sec</li>
</ul>
</li>
<li>A house
<ul>
<li>Creating costs = 100</li>
<li>maintainance = 20 unit money per 20sec</li>
<li>Increases happiness by 10 units</li>
<li>Generates 1 unit pollution per 20sec</li>
</ul>
</li>
<li>A park
<ul>
<li>Creating costs = 120</li>
<li>maintainance = 15 unit money per 20sec</li>
<li>Increases happiness by 20 units</li>
<li>Decreases pollution by 13 unit per 20sec</li>
</ul>
</li>
</ol>

<h3>How to play</h3>
<ol>
<li>Select the building type</li>
<li>Fill as many boxes as you like with that building (unchangeable)</li>
<li>Creating a building will cost money and also impact happiness and pollution</li>

</ol>
</div>
<div id="gameContainer" >
<div id="gameBoard">
<!-- here goes the divs of each element in the grid -->
</div>
<div id="controls">
<div>
<button id="placeHouse">House</button>
<button id="placeFactory">Factory</button>
<button id="placePark">Park</button>
<button onclick="location.reload();" id="restart">Restart</button>
</div>

<div id="info">
<p>Money: <span id="money">1000</span><span id="debtornot"></span></p>
<p>Happiness: <span id="happiness">100</span></p>
<p>Pollution: <span id="pollution">0</span></p>
</div>
</div>
</div>
<div id="final-result" style="display: none;">
<h1>You Won the Game !</h1>
<h3>calculated result:</h3>
<ol>
<li id="factory-result"></li>
<li id="house-result"></li>
<li id="park-result"></li>
<li id="money-result"></li>
<li id="pollution-result"></li>
<li id="happiness-result"></li>
</ol>
<button onclick="location.reload();" id="restart-final">Restart</button>
</div>
<script src="script.js"></script>
</body>
</html>
212 changes: 157 additions & 55 deletions Games/City_Builder_Game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,157 @@
// 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();
// script.js
const gameBoard = document.getElementById('gameBoard');
const moneyElement = document.getElementById('money');
const happinessElement = document.getElementById('happiness');
const pollutionElement = document.getElementById('pollution');
const debtElement= document.getElementById('debtornot');

//defined a object to store the cost ,happines impact and the color of each building
const buildings = {
house: { cost: 100, happiness: 10, color: '#118382' },
factory: { cost: 200, happiness: -20, color: 'black' },
park: { cost: 120, happiness: 20, color: 'rgb(87,203,59)' }
};

let currentBuilding = null;
let money = 1000;
let happiness = 100;
let pollution = 0;
let modified =0;//this is to track how many building have been created
let factoryadded=0;//this is to track how many factories are there
let houseadded=0;//this is to track how many houses are there
let parkadded=0;//this is to track how many parks are there


//both of these are used in calculating the final result
let currentpollution=0; // to calculate if pollution is increasing or decreasing with time
let currentmoney=0; // to calculate if money is increasing or decreasing over time


// 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, happiness and pollution display
function updateInfo() {
moneyElement.textContent = money;
happinessElement.textContent = happiness;
pollutionElement.textContent= pollution;
if(money<0)
debtElement.innerText="(your city is in debt)";
else
debtElement.innerText="";
}

// 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;
if(currentBuilding==="house")
{
houseadded++;

setInterval(() => {
money -= 20; //maintaining cost of house every minute
pollution+=1;//pollution created by house
updateInfo();
}, 20000);
}
else if(currentBuilding==="factory")
{
factoryadded++;
setInterval(() => {
money+=50;//factory generates money every minute
pollution+=15;//pollution created by factory
updateInfo();
}, 20000);
}
else if(currentBuilding==='park')
{
parkadded++;
setInterval(() => {
money-=10; //maintaining cost of the park
pollution-=13;//decrease pollution over time
updateInfo();
}, 20000);
}
money -= building.cost;
happiness += building.happiness;
modified++;//increase the modified so that we can know at any time , how many buildings have been added
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();


//we need the interval id to stop the interval after the game is finished
let interval1=setInterval(() => {

//below if is necessary to not to run unnecessary code as if modified < 100 means city is not build completely
if(modified<100){
return;
}

else
{
currentmoney=money; //set present money to use after 80sec , if it increase or decrease
currentpollution=pollution;//set present pollution to compare with with future pollution
setTimeout(() => {
calfinalresult();
}, 80000);
clearInterval(interval1);//clearing the interval of checking whether whole city is built or not
}


}, 60000);

// to know the final result of the game
function calfinalresult(){

document.getElementById('instruct').style.display='none';//hiding instructions div
document.getElementById('gameContainer').style.display='none';//hiding game's div
document.getElementById('final-result').style.display='block';//displaying final resutl div

//updating the content for final result
document.getElementById('factory-result').innerText=`You created a total of ${factoryadded} Factories`;
document.getElementById('house-result').innerText=`You created a total of ${houseadded} Houses`;
document.getElementById('park-result').innerText=`You created a total of ${parkadded} Parks`;


//determining the result and disply it .
if(happiness<100 ||money<0 || money<currentmoney || pollution>currentpollution)
{

document.getElementById('money-result').innerText="Your city's money is continuously decreasing";
document.getElementById('pollution-result').innerText="Your city's pollution is continuously increasing";
document.getElementById('happiness-result').innerText="Your city's happiness is too low";

return;
}
else {
document.getElementById('money-result').innerText="Your city's money is continuously increasing";
document.getElementById('pollution-result').innerText="Your city's pollution is continuously decreasing";
document.getElementById('happiness-result').innerText="Your city's happiness is at good level";

return;
}
}
Loading
Loading