3 Game Development

• Game Description: “The Forest in Your Hands”

 

How the Game Works

1. Grid Layout:
   • The forest is represented by a 5×5 grid (25 tiles).
   • Each tile can either be empty, have a tree, or be on fire.
2. Actions:
   • Plant Trees: Players use the “Plant Tree” button to add trees to empty tiles. The tree image appears on the tile.
   • Random Fires: Fires ignite randomly on tiles with trees. Players are notified visually with a fire image.
   • Extinguish Fires: Players use the “Extinguish Fire” button to remove fires from affected tiles.

 

1. Game Rules:
   • A tree can only grow on empty tiles.
   • Fires can only ignite on tiles that already have trees.
   • The player can extinguish fires, and once all fires are cleared, the fire button becomes inactive until a new fire appears.
2. Win Condition:
   • The player continues planting trees and extinguishing fires to maintain the forest. The game does not have a formal “win” condition, promoting open-ended play and environmental awareness.

 

• Programming the Game

1. HTML Structure:
   • The game uses a grid system (div elements) to represent the tiles of the forest.
   • Buttons allow players to plant trees and extinguish fires.
   • The footer includes a logo and Erasmus+ disclaimer.
2. CSS Styling:
   • CSS creates the visual grid and defines the tile styles.
   • Classes like .plant and .fire dynamically update the tiles to show trees or fires.
3. JavaScript Logic:
   • Initialization:
     • A 5×5 grid is created dynamically using a for loop.
     • Each tile is stored in an array with properties to track its state (hasTree and hasFire).
   • Planting Trees:
     • When the “Plant Tree” button is clicked, the script identifies empty tiles.
     • A random empty tile is selected, updated to hasTree: true, and visually updated with a tree image.
   • Fire Mechanics:
     • Fires are triggered by a random chance when a tree is planted.
     • The script identifies tiles with trees, selects one at random, and updates it to hasFire: true.
   • Extinguishing Fires:
     • The “Extinguish Fire” button removes fires from affected tiles.
     • The script ensures fires are cleared before disabling the button.
4. Images:
   • Tree Image: Displayed when a tree is planted.
   • Fire Image: Displayed when a fire ignites.

 

 

 

1. Dynamic Updates:
   • JavaScript dynamically adds or removes CSS classes to show tree and fire images on the grid.

 

Key Features:

• Randomization: Fires are randomly triggered, adding unpredictability to the game.
• Player Interaction: Players actively manage the forest through buttons.
• Educational Value: Teaches players the importance of forest management and environmental protection.

 

• How to Replace Images and Customize the Game

Customizing the game involves replacing the current images (tree and fire) with different elements or modifying the gameplay logic to suit your needs. Here’s how you can do it:

 

• Replacing Images

Step 1: Prepare New Images

• Choose new images that represent your theme (e.g., flowers instead of trees, water instead of fire).
• Ensure the images are in a compatible format (e.g., .png or .jpg).
• Recommended size: 100×100 pixels for consistency.

Step 2: Place the Images

• Save the new images in the images/ folder.
• Name the files to match the current ones, or update the file names in the code.

Step 3: Update the Code

• In the script.js section (or directly in the <script> tag of the HTML): 
  • Locate the lines where image sources are defined: 
  • treeImage.src = ‘images/tree.png’;
  • fireImage.src = ‘images/fire.png’;
  • Replace ‘images/tree.png’ and ‘images/fire.png’ with the paths to your new images: 
  • treeImage.src = ‘images/flower.png’;  // New tree element
  • fireImage.src = ‘images/water.png’;  // New fire element

 

• Customizing Gameplay

Replace Actions (e.g., Change Button Purpose)

• You can modify what each button does: 
  • Planting Trees: 
    • Replace the plantTree() function logic to add something different (e.g., planting flowers or growing crops).
  • Extinguishing Fires: 
    • Update the extinguishFire() function to remove different elements (e.g., clearing weeds or cleaning spills).

Code:

function plantTree() {

    const emptyTiles = tiles.filter(tile => !tile.hasTree && !tile.hasFire);

    if (emptyTiles.length > 0) {

        const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];

        randomTile.hasTree = true;

        randomTile.element.classList.add(‘plant’);

        randomTile.element.querySelector(‘img’).src = ‘images/flower.png’;  // Replace tree with flower

    }

}

 

• Adding New Elements

Introduce new game mechanics by adding more elements. For example:

• Animals: Add a new button to spawn animals on the grid.
• Pollution: Introduce tiles that represent pollution, which players must clean up.

Code:

function addAnimal() {

    const emptyTiles = tiles.filter(tile => !tile.hasTree && !tile.hasFire);

    if (emptyTiles.length > 0) {

        const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];

        randomTile.hasAnimal = true;

        const animalImage = document.createElement(‘img’);

        animalImage.src = ‘images/animal.png’;

        animalImage.alt = ‘Animal’;

        randomTile.element.appendChild(animalImage);

    }

}

 

• Modify the Grid

Change the grid size in the CSS: 

.game-container {

    grid-template-columns: repeat(6, 1fr); /* 6 columns for a larger grid */

}

Update the createBoard() function to match the new grid size: 

for (let i = 0; i < 36; i++) {  // For a 6×6 grid

    // Tile creation logic

}

 

• Adjust Randomness

Modify the probability of fires or other events: 

Locate the checkForFires() function: 

if (Math.random() < 0.3) {  // 30% chance to ignite a fire

    igniteFire();

}

Change 0.3 to a higher or lower value to adjust the frequency of fires.

 

• Add a Scoring System

Implement a scoring system that rewards players for planting trees and extinguishing fires. Each successful action will award points, incentivizing players to perform these tasks efficiently.

Details: 

• Plant Trees: Each tree planted correctly will award a specific amount of points.
• Extinguish Fires: Each fire successfully extinguished will also award points.
• Bonuses: Consider adding bonuses for completing multiple actions in a short period of time or for reaching certain milestones.

 

Implement a score tracker. Add a score display to the HTML: 

<div id=”scoreBoard”>Score: 0</div>

Update the score in JavaScript when trees are planted or fires extinguished: 

let score = 0;

function updateScore(points) {

    score += points;

    document.getElementById(‘scoreBoard’).innerText = `Score: ${score}`;

}

Sample Code for the Scoring System:

let score = 0;

 

function plantTree() {

  score += 10; // Añade 10 puntos por cada árbol plantado

  updateScoreDisplay();

}

 

function extinguishFire() {

  score += 20; // Añade 20 puntos por cada incendio extinguido

  updateScoreDisplay();

}

 

function updateScoreDisplay() {

  document.getElementById(‘score’).textContent = `Puntuación: ${score}`;

}

 

• Personalize the Visuals

Change the background or colors in the CSS: 

body {

    background-color: #f0e68c; /* Change to a sand-like theme */

}

.tile {

    background-color: #ffd700; /* Golden tiles */

}

 

• Extensions

• Enter a Timer:

Add a timer to increase the game’s challenge level. Players must complete their tasks within a time limit, which will add an extra layer of pressure and excitement.

Details: 

• Countdown: The timer can be a countdown that indicates how much time is left to complete the level.
• Time Extensions: Players can gain additional time by performing certain actions, such as planting a certain number of trees or extinguishing a specific number of fires.
• Difficulty Levels: Adjusts the time available according to the difficulty level, offering more time on easy levels and less time on difficult levels.

 

Code for the Timer:

let timeLeft = 60; Time in seconds

 

function startTimer() {

  const timerInterval = setInterval(() => {

    if (timeLeft > 0) {

      timeLeft–;

      updateTimerDisplay();

    } else {

      clearInterval(timerInterval);

      endGame();

    }

  }, 1000);

}

 

function updateTimerDisplay() {

  document.getElementById(‘timer’).textContent = ‘Tiempo Restante: ${timeLeft}s’;

}

 

function endGame() {

  alert(‘Time is up! End of the game.’);

}

 

• Implementar Animaciones:

It introduces visual animations for the actions of planting trees and extinguishing fires, making the game more engaging and dynamic.

Details: 

• Planting Trees: Create an animation that shows the process of planting a tree, from digging a hole to watching the tree grow.
• Fire Extinguishing: Design an animation that represents the process of putting out a fire, including visual effects such as water or foam extinguishing the flames.
• Sound Effects: Add sound effects to accompany animations, such as the sound of earth digging or the crackling of fire being extinguished.