top image
home  /  pages  /  tech tips  /  contact about

Brick Breaker / Breakout (HTML5)

Introduction

I enjoyed recreating Brick Breaker from a set of games called PC Arcade on an IBM PC 8086 that I played as a kid. Through the form below you can play the HTML5 implementation of the game. I implemented it using TypeScript and excalibur. (I also have a Python implementation.)

Play!

...or change the game's behavior:

Behavior

Move the paddle with left/right. You can make fine paddle movements by holding the shift key. 'p' or Space (un)pauses the game.

Different areas of the paddle cause the ball to bounce differently. Most of the paddle bounces as expected: symmetrically. But if the ball bounces on the close corner, it will bounce back to where it came from. If it bounces on the far corner, it will accelerate. A fast-moving ball can be slowed down again by bouncing it on the center of the paddle.

Defeating a level gains you a ball, but the game speeds up by 10%. There are a total of 21 levels. In the last 3 levels, the bricks are invisible.

Acknowledgements

Many thanks to Maarten Hulshoff for the fond memories and for testing.

URL: https://thomer.com/games/brickbreaker-js/index.html
Copyright © 1994-2022 by Thomer M. Gil
Updated: 2020/05/10