Vincent's blog

GNU/Linux, tech and thoughts

Made a match-three game with HTML5

A few months ago, I made a match-three game. One reason is that I didn’t solve the “remove matching pieces” algorithm yet, and since I like to try out and learn different algorithms, it was a good opportunity.

Also, I wanted to try out whether it would work well using CSS3, HTML5 canvas or WebGL sprites.

CSS3 approach

The CSS3 approach uses SPAN elements with “position: absolute”. Then, when a piece needs to be moved, its position is changed by setting the “left” and “top” CSS properties.
To make animations work, I’ve used the CSS3 “transition” properties (with prefix, for example “-webkit-transition” for Chrome).

The performance was okay.
You can try it out here: http://vincentpetry.net/games/a3?mode=css3

HTML5 canvas approach

For the HTML5 canvas approach, I simply used a canvas and draw sprites on it.
I made the renderer generic (abstract base class) to be able to provide a WebGL implementation later.

You can try it out here: http://vincentpetry.net/games/a3?mode=canvas

WebGL approach

The WebGL approach uses textures containing all sprites, then renders them using simple shaders.

You can try it out here: http://vincentpetry.net/games/a3?mode=webgl

Performance

I don’t have any numbers, but can provide these observations I made on my machine:

  • Firefox 11 (from what I remember back then): HTML5 canvas was smoother than WebGL
  • Firefox 13: The HTML5 canvas and WebGL versions are very smooth.
  • Chromium 17: This one was smoother with WebGL than HTML5 canvas.
  • Chromium 22: For some reason, WebGL is less smooth than the HTML5 canvas version
  • In all cases, the CSS3 version was less smooth than the other versions.

Feel free to tell me about your experience with the game in the comments.

Source code

You can find the source code (GPLv3) here: http://vincentpetry.net/games/a3/a3.tar.bz2

Note: the game is no finish-able, but still has a few interesting levels. 🙂

Comments are currently closed.