4 Game Description: Clean Energy

• How the Game Works

1. Objective:
   • Generate as much energy and money as possible within 120 seconds.
2. Gameplay:
   • Players start with $100 and 0 MW of energy.
   • Three types of renewable energy sources are available: 
     • Solar Panel: Cost $50, produces 20 MW.
     • Wind Turbine: Cost $100, produces 50 MW.
     • Hydro Plant: Cost $200, produces 100 MW.
   • Players click on energy sources to build them if they have enough money.
   • Every 5 seconds, money is generated based on the total energy output ($1 per 1 MW of energy).
3. Win Condition:
   • There is no specific “win” condition; the goal is to maximize the score by the end of the 120 seconds.
4. End Condition:
   • The game ends when the timer reaches zero, and the final scores (total money and energy) are displayed.

 

• How the Game is Programmed

1. HTML Structure:
   • Game Container: Includes a timer, resource counters (money and energy), and clickable energy sources.
   • Energy Sources: Each energy source is a div with attributes for cost and energy output.
2. CSS Styling:
   • Energy source boxes are styled with enough space to display images and labels clearly.
   • A bold and visible timer is displayed at the top.
3. JavaScript Logic:
   • Resource Management: 
     • Money and energy values are stored as variables (money and energy).
     • Players can only build energy sources if they have enough money.
   • Income Generation: 
     • Every 5 seconds, money is generated based on energy output: 
     • money += Math.floor(energy ); // Earn $1 for every 1 MW
   • Timer: 
     • A countdown timer starts at 120 seconds, decreasing every second: 

const timerInterval = setInterval(() => {

    timeLeft -= 1;

    timerElement.textContent = timeLeft;

    if (timeLeft <= 0) {

        clearInterval(timerInterval);

        alert(`Time’s up! Final Score: Money – $${money}, Energy – ${energy} MW`);

    }

}, 1000);

• Energy Source Interaction: 
  • Players click on an energy source to spend money and gain energy: 

document.querySelectorAll(‘.energy-source’).forEach(source => {

    source.addEventListener(‘click’, () => {

        const cost = parseInt(source.getAttribute(‘data-cost’));

        const energyGain = parseInt(source.getAttribute(‘data-energy’));

        if (money >= cost) {

            money -= cost;

            energy += energyGain;

        }

    });

});

1. Game End:
   • When the timer reaches zero, all processes (timer and income generation) stop, and a message displays the final scores.

 

Features

1. Dynamic Resource Management:
   • Money and energy values update in real-time as players interact with the game.
2. Timer-Based Challenge:
   • Players must act quickly and strategically to maximize their score within the 120-second limit.
3. Customizable Energy Sources:
   • Additional energy sources can be added by duplicating the HTML structure and updating cost and energy values.

 

How to Customize

1. Add New Energy Sources:
   • Add new energy sources in the HTML with their respective cost and energy output: 

<div class=”energy-source” data-cost=”150″ data-energy=”75″>

    <img src=”images/geothermal-plant.png” alt=”Geothermal Plant”>

    <span>Geothermal Plant</span>

    <span>Cost: $150</span>

    <span>Energy: 75 MW</span>

</div>

1. Change Timer Duration:
   • Modify the initial value of timeLeft in the JavaScript: 

let timeLeft = 180; // 3 minutes instead of 2

1. Adjust Income Formula:
   • Change how income is calculated to balance difficulty: 

money += Math.floor(energy / 5); // Earn $1 for every 5 MW

1. Visual Enhancements:
   • Update the CSS to match a specific theme, like futuristic or eco-friendly colors.

 

• How to Change Images and Customize the Game

• Replacing Images

Step 1: Prepare New Images

• Select new images for the energy sources or the background.
• Recommended size: 100×100 pixels for energy source icons.
• Formats: .png or .jpg are preferred.

Step 2: Place Images in the images Folder

• Save your new images in the images/ folder within your project directory.

Step 3: Update the HTML

• Locate the src attributes for energy source images in the HTML: 

<img src=”images/solar-panel.png” alt=”Solar Panel”>

• Replace the file name with your new image file name: 

<img src=”images/geothermal-plant.png” alt=”Geothermal Plant”>

Step 4: Update Labels

• Change the corresponding text below the image: 

<span>Geothermal Plant</span>

<span>Cost: $150</span>

<span>Energy: 75 MW</span>

2. Customizing Energy Sources

Step 1: Add New Energy Sources

• Copy and modify an existing energy source block in the HTML: 

<div class=”energy-source” data-cost=”150″ data-energy=”75″>

    <img src=”images/geothermal-plant.png” alt=”Geothermal Plant”>

    <span>Geothermal Plant</span>

    <span>Cost: $150</span>

    <span>Energy: 75 MW</span>

</div>

Step 2: Adjust Costs and Energy Output

• Update the data-cost and data-energy attributes to reflect the new energy source values: 

<div class=”energy-source” data-cost=”300″ data-energy=”120″>

3. Change Background and Theme

Step 1: Replace the Background

• Add a background image to the .game-container in the CSS: 

.game-container {

    background: url(‘images/eco-background.jpg’) no-repeat center center/cover;

}

Step 2: Change Color Scheme

• Modify the CSS to reflect a new theme (e.g., futuristic or eco-friendly): 

body {

    background-color: #e8f5e9; /* Light green */

}

h1 {

    color: #1b5e20; /* Dark green */

}

4. Adjust Gameplay

Step 1: Change Timer Duration

• Modify the starting time in the JavaScript: 

let timeLeft = 180; // Change to 180 seconds for a longer game

Step 2: Alter Income Formula

• Adjust how income is calculated to change game difficulty: 

money += Math.floor(energy / 5); // Earn $1 for every 5 MW instead of 10 MW

Step 3: Set a Win Condition

• Add a specific win goal (e.g., reach 500 MW of energy): 

if (energy >= 500) {

    clearInterval(timerInterval);

    clearInterval(incomeInterval);

    alert(‘You win! Clean energy goal achieved!’);

}

5. Add New Features

Feature 1: Add Negative Events

• Introduce random events that deduct money or energy: 

setInterval(() => {

    if (Math.random() < 0.2) { // 20% chance

        energy -= 10; // Lose 10 MW of energy

        alert(‘Storm damage! Energy production reduced.’);

        energyElement.textContent = energy;

    }

}, 10000); // Check every 10 seconds

Feature 2: Progress Bar

Add a visual progress bar for the energy goal: 

<div class=”progress-bar”>

    <div id=”progress” style=”width: 0%; height: 20px; background-color: green;”></div>

</div>

function updateProgress() {

    const percentage = (energy / 500) * 100;

    document.getElementById(‘progress’).style.width = `${percentage}%`;

}