Skip to content

Commit

Permalink
Merge branch 'main' into catch
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditya-bhaumik
aditya-bhaumik authored Jul 5, 2024
2 parents b2af878 + 78651ef commit 106fd19
Show file tree
Hide file tree
Showing 14 changed files with 566 additions and 167 deletions.
50 changes: 23 additions & 27 deletions Games/City_Builder_Game/README.md
View file
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
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
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

0 comments on commit 106fd19

Please sign in to comment.