Christmas Breakout clone

Project executed on: December 22-27, 2014 // This summary written on: December 28, 2014

Last year (2013), I created a simple web-based "Christmas card" that was a red page that said "Merry Christmas" and had falling snowflakes on it. This year, I decided to make it into an annual tradition, but do something more ambitious this time. I decided to make a Christmas-themed Breakout clone, with the blocks spelling out the message "Merry Christmas."

Project Highlights

You can play it here: Christmas Breakout clone. It does have some occasional bugs that I'm not going to bother fixing. I was in a rush to get it finished at the time, and now its main purpose is past.

Miscellaneous technical details

Any modern browser

The latest versions of all browsers can run this game. For the IE haters out there, yes, IE runs it just fine, and seems to run it more smoothly than other browsers.

Touch control

For touch control in standards-compliant browsers, such as IE and Firefox, the game makes use of Pointer events. For touch control in WebKit or Blink browsers, which are not standards-compliant, the proprietary touchmove and touchend events are used.

Other stuff

The game loop is governed using requestAnimationFrame(). This allows the calculations and updating the ball's position to be done at whatever interval the browser decides is optimal.

The bricks are animated using CSS animations. Because WebKit and Blink-based browsers still don't support unprefixed CSS animations, the animations have to be defined twice, once without prefixes for good browsers, and once with -webkit- prefixes for WebKit and Blink.

The snow drift background is SVG.