Frog Puzzled

Introduction 

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. 

Screenshot 

The Code

HTML5-JavaScript appears to be the new standard targeted by app developers, since it enables code reuse, cross-platform deployment, and the ability to target any device running a standards compliant web browser.

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.