Create the following structure in your project:
recycling-game/
│
├── index.html # Game code
├── style.css # Optional, for separate CSS
├── script.js # Optional, for separate JavaScript
└── images/ # Folder for icons
├── paper-bin.png
├── glass-bin.png
├── plastic-bin.png
├── organic-bin.png
├── paper.png
├── glass.png
├── plastic.png
├── organic.png
└── logo.png
Programming in JavaScript allows you to work with the following concepts that must be clear to the creator of the video game:
Variables and Data Types: Learn how to declare variables and how to work with different types of data (numbers, strings, booleans).
Functions: Functions are reusable blocks of code that perform specific tasks.
Events: Events allow your game to respond to user actions, such as mouse clicks or keystrokes.
Loops: Loops are essential for creating animations and updating the state of the game in each frame.
Items: Items allow you to organize and manage your game data in a structured way.
The index.html file defines the game’s layout.
It includes:
This Unit allows you to learn how a drag and drop game works. In this case, four elements have been considered with four options. This is configurable from the game files. On the other hand, a footer is attached that will allow you to add additional information. The use of this footer is optional.
It is useful to know the use of <canvas> in HTML5 as a tag that allows the use of graphs through JavaScript using a script, which we are interested in. The characteristics of the <canvas> are noteworthy:
Drawing Graphics: You can draw shapes, lines, text, and images.
Animations: Allows you to create dynamic and fluid animations.
Interactivity: You can respond to user events, such as clicks and mouse movements.
JavaScript API: Uses a JavaScript API to access and manipulate canvas content.
Place all the container and material icons in the images/ folder. The filenames must match those used in the HTML.
Replace Icons:
To change an icon:
File Names:
The script.js file handles the game logic:
Drag and Drop:
Reviewing the file in more detail script.js which is the one that handles the logic of the game:
Drag events:
Validation of the recyclable item:
When the item is dropped into a container, the script checks to see if the recyclable item matches the container type. This can be done by comparing attributes or classes of the item and the container.
If the item matches the container, it is considered a hit; otherwise, it is considered a mistake.
Success or error messages:
Success: If the item is placed in the correct container, a success message is displayed to the user, which can be text, a colour change, or an animation.
Error: If the item is placed in the wrong container, an error message is displayed, prompting the user to try again.
Code:
document.addEventListener(‘DOMContentLoaded’, (event) => {
const items = document.querySelectorAll(‘.draggable’);
const bins = document.querySelectorAll(‘.bin’);
items.forEach(item => {
item.addEventListener(‘dragstart’, dragStart);
});
bins.forEach(bin => {
bin.addEventListener(‘dragover’, dragOver);
bin.addEventListener(‘drop’, dropItem);
});
function dragStart(event) {
event.dataTransfer.setData(‘text/plain’, event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function dropItem(event) {
event.preventDefault();
const id = event.dataTransfer.getData(‘text’);
const draggableElement = document.getElementById(id);
const dropzone = event.target;
if (dropzone.dataset.type === draggableElement.dataset.type) {
dropzone.appendChild(draggableElement);
displayMessage(‘success’, ‘¡Bien hecho! El ítem está en el contenedor correcto.’);
} else {
displayMessage(‘error’, ‘Error. El ítem no coincide con el contenedor.’);
}
}
function displayMessage(type, message) {
const messageBox = document.getElementById(‘messageBox’);
messageBox.className = type;
messageBox.textContent = message;
}
});
This disables the default drag image.
Add the Erasmus+ disclaimer in the footer along with the logo.
Code Explanation:
Drag events: Dragstart is added to items and dragover and drop are added to containers.
dragStart: When you start dragging, the ID of the dragged item is saved.
dragOver: Prevents default behavior to allow dropping.
dropItem: When you drop the item, you check if the item type matches the container type. If it matches, a success message is displayed; if not, an error message.
displayMessage: Function to display success or error messages to the user.
We propose the following challenges that can improve the video game. You can investigate how to do it, reviewing both the units of our SPOOC and also the PLE created in Games4Green that you have at your disposal from the project’s website.
Increase the difficulty or levels of the game with different elements.
The aesthetics of the game is an element that can be worked on by changing or incorporating new images. The drag and drop dynamic is easy to learn and the player will have a knowledge of the simplicity of the game proposed.
To replace the icons:
Folder for Images
Create a folder named images in the same directory as the HTML file. Place the following images inside it: