HTML5 Client side Image puzzle
Posted: Wednesday, September 12, 2012 by Unknown in Labels: Coding practises/Programming
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
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