3. Game Development

3.1 Languages used:

• HTML: Structure of the game’s visual elements.
• CSS: Styling and animations for objects.
• JavaScript: Game logic, monster management, and interactivity.

Main assets:

• Graphics for the monster, trash, and background.
• Sound effects for correct and incorrect actions.

Main scripts:

game.js: Handles the main game loop.

sound.js: Manages sound effects.

movement.js: Controls the character’s movements.

trash.js: Logic related to trash and interactions with the monster.

3.2. Scene Creation
The game scene is designed to represent a polluted environment and a monster that reacts dynamically to the player’s actions. The structure is built using HTML for layout, CSS for styling, and JavaScript for managing interactive elements.

3.3 HTML Structure
The main elements include:

• Player: Controlled by keyboard input.
• Trash: Items to be collected and sorted.
• Monster: A dynamic element representing pollution.

Example:

<div id=”gameContainer”>

    <div id=”monster”></div>

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

    <div class=”bin” id=”binPaper”></div>

</div>

 

3.4 CSS Styling
CSS defines the appearance of the monster, trash, and background:

css

Copia codice

#gameContainer {

    width: 800px;

    height: 600px;

    position: relative;

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

    background-size: cover;

}

 

#monster {

    width: 100px;

    height: 100px;

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

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

}

 

.trash, .bin {

    width: 50px;

    height: 50px;

    position: absolute;

}

 

4. Game Mechanics
   The game revolves around the following dynamics:

1. Player Movement: Controlled via keyboard input to collect trash.
2. Trash Collection and Sorting: Trash items must be taken to the correct bin to damage the monster.
3. Monster Management: Correct actions decrease the monster’s health, while mistakes make it stronger.

4.1 Character Movement

Code Example:

javascript

Copia codice

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

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

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

});

 

function movePlayer(x, y) {

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

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

}

 

5. Monster Interaction
   The monster is the central element of the game. Its dynamic reactions include:

• Visual Changes: Facial expressions based on its health.
• Immediate Feedback: Players receive instant responses to their actions.

Monster Management
Code Example:

javascript

Copia codice

function manageMonster(action) {

    if (action === ‘correct’) {

        monsterHealth -= 10;

        playSound(‘correct’);

        updateMonsterAppearance();

    } else {

        monsterHealth += 20;

        playSound(‘wrong’);

        updateMonsterAppearance();

    }

}

 

6. Audio and Visual Feedback
   Sound effects enhance feedback for correct and incorrect actions:

• Correct Sound: Damages the monster.
• Wrong Sound: Increases the monster’s health.

Code Example:

 

function playSound(type) {

    const sound = new Audio(type === ‘correct’ ? ‘correct.mp3’ : ‘wrong.mp3’);

    sound.play();

}

7. Types of Trash
   The game includes various types of trash, each with a unique design to make them easily identifiable. The player must correctly match each type of trash to its corresponding bin.

Examples:

Paper: Newspaper icon.

Plastic: Bottle.

Organic: Apple.

8. Conclusion

Monster Pollution is an innovative game that seamlessly blends fun with environmental education, creating an engaging platform for players to learn about the impact of their actions on the planet. By immersing players in a dynamic and interactive gameplay environment, the game encourages them to reflect on the crucial role they play in combating pollution. Its unique concept transforms the often mundane task of recycling into an exciting and meaningful challenge.

At the heart of the game lies the mission to symbolically defeat the “pollution monster”—a representation of environmental harm caused by improper waste management. Players achieve this by practicing proper waste recycling, a vital step in reducing pollution and protecting natural resources. As they sort trash correctly and reduce the monster’s health, players not only progress through the game but also develop a deeper understanding of how individual actions contribute to global environmental efforts.

Monster Pollution captivates players of all ages with its visually appealing design, intuitive mechanics, and real-time feedback. Each correct action is met with positive reinforcement, such as rewarding sounds or animations, while mistakes offer constructive feedback, making it both entertaining and educational. The game’s dynamic challenges and escalating difficulty ensure that players remain engaged while honing their decision-making and critical thinking skills.

Beyond entertainment, Monster Pollution serves as an educational tool that raises awareness about sustainability and responsible waste management. It fosters eco-friendly habits by demonstrating the direct impact of recycling on reducing pollution and promoting a cleaner, healthier environment. By combining entertainment with impactful lessons, the game empowers players to make more environmentally conscious choices in their daily lives.

In conclusion, Monster Pollution is much more than a game—it’s a call to action for a more sustainable future. By turning waste recycling into an interactive adventure, it inspires players to embrace environmentally responsible behaviors while enjoying a captivating and rewarding gaming experience.