FlipTiles

There's a bit of a craze at the moment (if you can call it that) about a web game called 2048. Since it was hosted on GitHub in a public repository there have been almost five thousand forks with hundreds of people making their own derivations.

I really liked the elegance and simplicity of the design so I decided to make something from scratch but in the same sort of style. This is what I came up with.

It's a simple puzzle with a three-by-three grid of tiles that are white on one side and grey on the other. When you click a tile it flips it along with the adjacent tiles, and the objective is to get the whole grid to be grey.

I had to get to know the transform and transition elements of CSS in order to do this and that turned into a whole lot of fun trying to get the same effect across different browsers. Still, I'm quite happy with the effect and I'm quite proud of the HTML and CSS that I wrote for it.

The JavaScript, however, is a different story. I struggled to get the jQuery and JS to play nicely together and, if you take a look at the code, you'll see I sometimes resort to doing something the long way in JS because I simply couldn't get the jQ to work. I don't think it's terrible, but I think that highlights an area for me to look at in more depth.

Enjoy the frustration!