Logo

Rewriting my 17-year-old Breakout! clone for the modern web

A post about rewriting my 17-year-old Breakout! clone, now named Meteor Bounce hosted by Stellar Whiskers Games

Rob Helmer

Rob Helmer

2/13/2025 · 1 min read

Tags: games open web web typescript breakout


Screenshot of new Meteor Bounce game

Introduction

About 17 years ago, I started learning HTML canvas by making a quick Breakout! clone. I blogged about it at the time, and just recently fixed up my site so it’s playable again.

I have been re-visiting and reviewing some of my old source code, and thinking about what I would change about this old game:

  • Main loop use setInterval instead of requestAnimationFrame
  • No keyboard or touch support (for mobile)

I also just wanted to build a better foundation. At the time I tried to split out the “game engine” from the implementation, which is a fine approach, but this time around I also split the elements like the ball, paddle and brick implementations into separate classes that inherit from a Sprite class, separated the game loop so I can reuse these for other “ball and paddle” type games.

I’ve named the rewrite Meteor Bounce, it’s a very similar implementation to the original except for the above and some minor stylistic elements. I’ve been trying to add little touches to make it more fun as well (movement feels a little smoother, ball is styled more like a meteor and can do more damage).


Any ideas for what features I should add—powerups, multi-player, ???