3. Game Development

2. Technical Specifications

• Languages Used:
  • HTML: For structuring the game elements.
  • CSS: For defining the visual design and style.
  • JavaScript: For implementing game logic and interactivity.
• Main Assets:
  • Graphics for platforms, trash items, and urban backgrounds.
  • Sound effects for correct and incorrect actions.
• Main Scripts:
  • game.js: Manages the main game loop.
  • platform.js: Defines platforms and paths.
  • movement.js: Controls the character’s movement.
  • trash.js: Logic for managing collected trash.

3. Scene Creation
   The game scene represents an interactive urban environment. The structure is built using HTML for defining visual elements, CSS for styling, and JavaScript for implementing game logic.

3.1 HTML Structure
The main elements include:

• Player: Controlled via keyboard input.
• Trash: Divided into recyclable and non-recyclable items.
• Platforms: Both static and moving, enabling character movement.

Example:

 

<div id=”gameContainer”>

    <div id=”player”></div>

    <div class=”trash” id=”recyclableTrash”></div>

    <div class=”trash” id=”nonRecyclableTrash”></div>

    <div class=”platform” id=”platform1″></div>

</div>

 

3.2 CSS Styling
CSS defines the visual layout:

#gameContainer {

    width: 800px;

    height: 600px;

    position: relative;

    background-image: url(‘city_background.png’);

    background-size: cover;

}

 

#player {

    width: 50px;

    height: 50px;

    position: absolute;

    background-image: url(‘player_sprite.png’);

}

 

.trash {

    width: 30px;

    height: 30px;

    position: absolute;

}

 

.platform {

    width: 100px;

    height: 20px;

    position: absolute;

    background-color: gray;

}

 

4. Game Mechanics
   The game involves:

1. Player Movement: Controlled via keyboard input to collect trash.
2. Trash Collection: Players distinguish between recyclable and non-recyclable items, earning points based on the category collected.
3. Platform Navigation: Players move across static and moving platforms to access trash.

4.1 Character Movement
Code Example:

 

document.addEventListener(‘keydown’, (e) => {

    if (e.key === ‘ArrowLeft’) movePlayer(-10, 0);

    if (e.key === ‘ArrowRight’) movePlayer(10, 0);

    if (e.key === ‘ ‘) jumpPlayer();

});

 

function movePlayer(x, y) {

    const player = document.getElementById(‘player’);

    player.style.left = (parseInt(player.style.left) || 0) + x + ‘px’;

}

 

function jumpPlayer() {

    // Logic for jumping

}

 

5. Platform Challenges
   Platforms play a crucial role, introducing obstacles and dynamic paths. These include:

• Static Platforms: Strategically positioned for trash collection.
• Moving Platforms: Require timing and precision to navigate.

6. Audio and Visual Feedback
   Sound effects and visual feedback enhance the player experience:

• Distinct Sounds: For collecting recyclable and non-recyclable trash.
• Visual Effects: To indicate correct or incorrect actions.

Example:

function playSound(type) {

    const sound = new Audio(type === ‘recyclable’ ? ‘recyclable.mp3’ : ‘nonRecyclable.mp3’);

    sound.play();

}

 

7. Types of Trash
   The game includes two categories of trash:

• Recyclable: Such as plastic and paper.
• Non-Recyclable: Such as mixed or special waste.

 

Conclusions

City Platform is an educational game that highlights the critical importance of identifying recyclable waste. Through its combination of platform elements and dynamic collection mechanics, the game provides an engaging and instructional experience, making it an ideal tool to raise public awareness about proper waste management.

The game stands out by blending entertainment with environmental education, creating a fun and immersive experience that appeals to players of all ages. Its platforming mechanics require players to navigate urban landscapes, collect waste, and accurately sort it, thereby reinforcing the concepts of recycling in an interactive manner. The inclusion of both static and moving platforms adds a layer of challenge and excitement, encouraging players to think critically and act quickly.

Beyond gameplay, City Platform serves as a valuable resource for promoting sustainability and environmental responsibility. By integrating realistic scenarios and tangible goals, the game inspires players to reflect on their habits and adopt more eco-friendly behaviors in their everyday lives. Its intuitive design and accessible structure make it a powerful educational tool, capable of driving meaningful change in how individuals perceive and manage waste.

In summary, City Platform is not just a game; it is a call to action, aiming to foster a culture of sustainability and responsible waste management through an engaging and interactive digital experience.