HTML5 Client side Image puzzle

Posted: Wednesday, September 12, 2012 by Venkat Pola in Labels:

As part of js13kGames competition i developed Client side Image puzzle game.

Game details:- 

User will upload an image of any pixel ratio. The uploaded image will be turned into puzzle. The puzzle will be a 4x4 matrix of jumbled tiles with one missed position. User will have to re-arrange the tiles into the image which was originally uploaded.

Would like to highlight some of the cool stuff that i used.

- Uploaded image is not sent to server rather HTML5 File API is used to set the users image to div background.

CSS3 background-size property
- User will upload image of any pixel ratio but the game needs only 500x500 image. CSS3 "background-size" is used to scale the image.

CSS3 scale property
- Legally movable tile is highlighted. Again thanks to CSS3, "scale" property is used  to highlight the legally movable tile on mouse hover.

Drag/Tap (Desktop/Mobile)
- To make sure drag works in both desktop and mobile browsers, I developed simple Drag library which makes use of mouse & touch events.

Code Modularity
- The code is very well distributed and spread across model,controller & view scopes under the main scope "slider". window.scope is the main variable which comprises the whole game.

And here is the entry link

Future enhancements will be tracked here

Please stop there and play the game and don't forget to like the game too if you really like it :) :)

Welcome your feedback.

Last but not least great thanks to js13KGames for conducting it. Nice leanings !!!

Peda Venkateswarlu Pola