In “Trash in the box,” players take control of a trash bag and must deliver it to a designated collection point by carefully steering its speed and direction. The game is divided into four levels of difficulty, each progressively more challenging, requiring precision, timing, and strategic movement to succeed.
Objective:
Deliver the trash bag to the collection point without:
Controls:
Level 1: Easy:
Level 2: Medium:
Level 3: Hard:
Level 4: Extreme:
This structured progression through four levels ensures a balanced mix of learning, challenge, and fun, keeping players engaged while improving their skills!
To create a game like “Trash in the box” using JavaScript, you can follow a general structure that includes HTML, CSS, and JavaScript for rendering the game, managing logic, and providing interactivity.
Set Up the HTML Structure:
Use a <div> or <canvas> element as the main game container.
Include child elements for the trash bag, obstacles, and collection point.
<div id=”gameContainer”>
<div id=”trashBag”></div>
<div id=”collectionPoint”></div>
<div id=”obstacle”></div>
</div>
Style the Game with CSS:
Define the visual appearance of the game container, the trash bag, obstacles, and the collection point.
Use position: absolute to allow precise placement and movement of game elements.
#gameContainer {
width: 800px;
height: 400px;
position: relative;
background-color: #e0f7fa;
overflow: hidden;
border: 2px solid #000;
}
#trashBag, #collectionPoint, #obstacle {
position: absolute;
width: 50px;
height: 50px;
}
#trashBag {
background-color: brown;
top: 50%;
left: 10%;
}
#collectionPoint {
background-color: green;
bottom: 10px;
right: 10px;
}
#obstacle {
background-color: red;
top: 200px;
left: 400px;
}
Game Logic with JavaScript:
Use JavaScript to control the game’s interactivity, movement, and physics.
// Select game elements
const trashBag = document.getElementById(‘trashBag’);
const collectionPoint = document.getElementById(‘collectionPoint’);
const gameContainer = document.getElementById(‘gameContainer’);
// Game variables
let positionX = 10; // Initial position
let speed = 0; // Initial speed
const maxSpeed = 10;
// Move the trash bag with arrow keys
document.addEventListener(‘keydown’, (e) => {
if (e.key === ‘ArrowRight’) speed = Math.min(speed + 1, maxSpeed); // Increase speed
if (e.key === ‘ArrowLeft’) speed = Math.max(speed – 1, -maxSpeed); // Decrease speed
});
// Update game state
function updateGame() {
positionX += speed; // Update position
trashBag.style.left = `${positionX}px`; // Move trash bag
// Collision detection
const bagRect = trashBag.getBoundingClientRect();
const pointRect = collectionPoint.getBoundingClientRect();
const obstacleRect = document.getElementById(‘obstacle’).getBoundingClientRect();
// Check if the trash bag reaches the collection point
if (
bagRect.right >= pointRect.left &&
bagRect.left <= pointRect.right &&
bagRect.bottom >= pointRect.top &&
bagRect.top <= pointRect.bottom
) {
alert(‘Success! You delivered the trash!’);
resetGame();
}
// Check if the trash bag hits an obstacle
if (
bagRect.right >= obstacleRect.left &&
bagRect.left <= obstacleRect.right &&
bagRect.bottom >= obstacleRect.top &&
bagRect.top <= obstacleRect.bottom
) {
alert(‘Oops! You hit an obstacle.’);
resetGame();
}
// Prevent overshooting
if (positionX < 0 || positionX > gameContainer.offsetWidth – trashBag.offsetWidth) {
alert(‘Game Over! You went off track.’);
resetGame();
}
}
// Reset the game
function resetGame() {
positionX = 10;
speed = 0;
trashBag.style.left = `${positionX}px`;
}
// Game loop
setInterval(updateGame, 50); // Update game state every 50ms
By combining basic JavaScript programming with HTML and CSS, you can create a fun and interactive game like “Trash Bag Delivery”!
Inside folder images you can find all images that can be modified.
Change bus.png to object you want to trash.
Changing: bg.jpg, bg2.jpg, bg3.jpg, bg4.jpg, bg5.jpg you will change scenarios
Change game_completed_screen to change background at the end of the game
Change starting_screen to change background in the beginning.
Consider the dimensions of each image so that your new image respects the pixel size of the original image.