Destroy the Bricks!
A Browser Game with API integration
Destroy the Bricks is a browser‑based arcade game where players clear color‑shifting bricks using a bouncing ball and a controllable paddle. The game evolves dynamically: brick and paddle colors are fetched from an external API, levels increase in difficulty, and the interface adapts responsively across devices.
The project explores how a classic game mechanic can be extended through real‑time data, smooth interactions, and a clean, responsive web experience.
Context
Role: Game design, programming, API integration, responsive layout
Type: Browser game — individual project
Duration: 2 weeks
Skills: JavaScript game logic, canvas rendering, API integration, responsive web design
Technologies: HTML/CSS/JS, Canvas API, The Color API, audio feedback, keyboard input handling
Intent
The assignment required upgrading a previous game prototype by integrating external data from a web API and expanding the application with multimedia feedback and a navigable interface.
Destroy the Bricks explores:
- how external data can enrich game aesthetics
- how color variability can make each session feel fresh
- how responsive layouts support play across devices
- how simple mechanics can scale into multi‑level progression
The project demonstrates how API‑driven content can be embedded into playful, interactive experiences.
Gameplay
The goal is simple: destroy all bricks using a bouncing ball. Players control the paddle with the left and right arrow keys, keeping the ball in play while clearing the board.
- Each brick destroyed increases the score
- Each time the ball touches the floor, the player loses a life
- When lives reach zero, the game ends
- Clearing all bricks advances to the next level
- Each level increases difficulty: the paddle shrinks and the ball speeds up
Brick and paddle colors change every session, fetched dynamically from The Color API.
Interaction Model
Destroy the Bricks is built around a classic arcade loop:
- Fetch colors from The Color API
- Render bricks, paddle, and ball on the canvas
- Track score, lives, and level
- Detect collisions between ball and bricks
- Update game state (brick removal, level progression, game over)
- Handle input from arrow keys
- Play audio feedback for game‑over events
- Repeat continuously through the main draw loop
The game’s logic is modular, with dedicated functions for rendering, collision detection, HUD updates, and level management.
Process
API Integration
The first step was integrating The Color API to fetch random color schemes. These colors update:
- brick appearance
- paddle appearance
This ensures each session feels visually distinct.
Game Logic & Rendering
The game is built using the Canvas API, with functions responsible for:
- drawing bricks
- drawing the ball
- drawing the paddle
- updating the HUD (score, lives, level)
- detecting collisions
- managing level transitions
The main draw() loop orchestrates all rendering and logic updates.
Level Progression
To increase difficulty:
- the paddle shrinks each level
- the ball accelerates
- bricks reset
- new colors are fetched
This creates a progressively more challenging experience.
Responsive Layout
The interface adapts across:
- desktop
- tablet
- mobile
Ensuring the game remains playable and visually coherent on all screen sizes.
Audio & Feedback
A short audio clip plays when the game ends, reinforcing the feedback loop and marking the end of the session.
Reflection
Destroy the Bricks strengthened my understanding of:
- structuring game logic
- working with external APIs
- designing responsive web interfaces
- managing state across multiple levels
- balancing difficulty progression
If expanded, the game could include:
- additional brick types
- power‑ups
- sound effects for collisions
- customizable color themes
- a high‑score system
The project remains a foundational exploration of how web APIs and classic mechanics can combine into a dynamic, replayable browser game.
Selected Works
Looking forward to hearing from you!
Copyright © 2026 Isabel Mercedes Parini.
All rights reserved.
