3 Game Description: “Plastic Hunt”

• How the Game Works

• Gameplay:

   – Waste items (plastic bottles, aluminum cans, plastic bags) appear randomly on the screen.

   – Players must click on the items to collect them before they vanish.

   – Each item type awards different points:

     – Plastic bottle: 10 points

     – Aluminum can: 20 points

     – Plastic bag: 15 points

• Rules:

   – Items remain visible for 3 seconds before disappearing.

   – A new item spawns every second, ensuring constant activity.

 

• Win Condition:

   – There is no fixed “win” condition. The goal is to achieve the highest possible score within a given time frame or until the player chooses to stop.

 

• How the Game is Programmed

• HTML Structure:

   – Game Container: A div (`game-container`) acts as the ocean background where items spawn.

   – Scoreboard: Displays the player’s current score.

   – Footer: Includes an Erasmus+ logo and disclaimer.

 

• 2. CSS Styling:

   – The game container has a background image of the ocean.

   – Items (bottles, cans, bags) are styled as clickable objects with absolute positioning.

 

• JavaScript Logic:

   – Dynamic Item Spawning:

     – Items are randomly generated at different positions within the game container.

     – A `setInterval` function ensures new items appear every second.

   – Click Interaction:

     – Each item is clickable. When clicked, it adds points to the score based on the item’s type.

     – Items are removed from the screen after being clicked or after 3 seconds.

   – Item Types:

     – Items are defined in an array, each with a corresponding image and point value. A random item type is selected during spawning.

     “`javascript

     const itemTypes = [

         { src: ‘images/plastic-item.png’, points: 10 },

         { src: ‘images/can-item.png’, points: 20 },

         { src: ‘images/bag-item.png’, points: 15 }

     ];

     “`

 

• Game Loop:

   – The `startGame()` function initializes the spawning process:

     “`javascript

     function startGame() {

         setInterval(spawnItem, 1000); // Spawn a new item every second

     }

     “`

   – The `spawnItem()` function creates new items with randomized positions:

     “`javascript

     function spawnItem() {

         const itemType = itemTypes[Math.floor(Math.random() * itemTypes.length)];

         // Item creation and positioning logic

     }

     “`

 

• Scoring:

   – The player’s score updates in real-time as items are clicked:

     “`javascript

     score += itemType.points;

     scoreDisplay.innerText = score;

     “`

 

• Animations and Timers:

   – Items disappear if not clicked within 3 seconds using `setTimeout`:

     “`javascript

     setTimeout(() => {

         if (item.parentElement) {

             item.remove();

         }

     }, 3000);

     “`