Frog Puzzled is an HTML5 game where the objective is to help the puzzled frog. You can jump, dart and generally scratch your head, or the frogs, till the puzzle is solved.
The main objective of the game is to move a certain set of blocks onto another set of blocks. If all the blocks are moved successfully the level is solved. The frog is moved using the arrow keys. If the frog has no path to move through or there are two or more blocks adjacent, the level cannot be solved. There can be more than one path to a particular solution and any solution is not necessarily the shortest path. With practice, levels can be solved with speed and with the least number of moves.
There are 10 levels currently with more coming soon! Stay tuned.
Intel AppUp® encapsulator available at http://software.intel.com/en-us/appup/encapsulator is being used to wrap the web app as a Windows 8 desktop app.
To make the game canvas resizable for different resolutions and for change in orientation the following algorithm is used.
IF the Inner Height/Inner Width of the window is greater than inverse of screen aspect ratio THEN
Screen Height = Screen Width * inverse of aspect ratio
ELSE Screen Width = Screen Height * aspect ratio
I hope this helps anyone facing issues with different screen resolutions and being able to scale the canvas to fill the screen in either orientation while maintaining the aspect ratio, so that graphics are not distorted and the canvas is not stretched or truncated when resolutions change.