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."
- Runs in any modern browser
- Supports mouse control on computers
- Supports touch control on Windows, iOS, and Android tablets.
- Keeps track of how many times it's played, how many times someone gets 100%, and the different scores people achieve.
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.
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
touchend events are used.
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.