2048 in Augmented Reality

2048 is a simple, wonderful HTML5 game where you can combine numbers on tiles, in order to sum them up to 2048. Don’t try it now, it’s too addictive and you’ll never come back to read the rest of this article.

Every day brings a new flavour of 2048 to Hacker News. After the AI version and the multiplayer version, I propose the Augmented Reality version.

Show the tag to make the game appear. Tilt it to make the tiles slide in one way or the other (up, down, right, left). See illustrations below.

How to play (the illustrated version)

Controling an HTML5 game with pieces of paper is not exactly mainstream, so I will illustrate the interaction with pictures.

Show the printed tag to the webcam:

Or the digital version of the tag:

The game should replace the image of the tag:

Tilt the tag/game up to send the number tiles up:

Tilt the tag/game left to send the number tiles left:

That’s it!

Shortcomings

The nice animations of the original 2048 are gone, because the game board is transformed into a canvas texture to display in the 3D scene. Another solution would be to transform the game board using CSS 3D transforms, and overlay it on the video… I may keep this for another afternoon hack.

Hire me!

If you need some help on a similar project, do not hesitate to contact me !