1 Introduction

The game involves throwing a trash bag into a trash bin, with players needing to apply the right amount of force to ensure it lands inside without overshooting. The game features six levels, each increasing in difficulty. As players progress, they encounter different challenges such as varying distances, obstacles, or changing wind conditions that make it harder to land the bag in the bin. Success in each level requires precision, control, and careful judgment of the right force to apply. The ultimate goal is to complete all six levels, mastering the art of the perfect throw.

This game combines HTML, CSS, and JavaScript to develop an interactive game-based application. Below is a brief explanation of each language and its role in this project:

HTML (HyperText Markup Language):

• It is the markup language used to structure the content of the page.
• In this case, it defines essential game elements such as the canvas (#gameCanvas), the bin (#cubo), the scoreboard (#scoreBoard), and the timer (#timer).
• It also includes a container with a logo and a disclaimer.

CSS (Cascading Style Sheets):

• Used to design and style the elements defined in HTML.
• In this project, styles are applied to position elements, define colors, typography, and the background image. For instance, the bin has a custom background (background: url(…)), and the objects have dynamic styles to represent trash.

• JavaScript:

• This programming language brings the game to life through interactivity and logic.
• It dynamically creates trash elements, handles events like clicks and drags (mousedown, mousemove, mouseup), launches objects with basic physics, detects collisions between elements, and updates the score and timer.
• It also controls the game flow, such as generating new objects and detecting the end of the game.

• Programming Style Used:

• Event-Based Programming:

• User events, such as clicks or mouse movements, are handled to perform specific actions (e.g., throwing trash).

• DOM Manipulation (Document Object Model):

• HTML elements are created, modified, and removed in real-time to update the game state.

• Flow Control Logic:

• Loops and timers (setInterval) are implemented to manage time updates, physics, and object generation.

• Modular Style (Partial):

• Although there are no fully encapsulated modules, separate functions are used for specific tasks like creating trash, detecting collisions, and timing.