HTML5 Client side Image puzzle

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

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.

HTML5 File API
- 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 http://js13kgames.com/entries/image-puzzle/.

Future enhancements will be tracked here https://github.com/polavenki/HTML5-Client-side-Image-puzzle

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 !!!

Cheers!!!
Peda Venkateswarlu Pola

0 comments: