Thinking about Snap and Fill in Metro/HTML 5 based games

Three problems:

  1. Snap and Fill
  2. Pause the game
  3. Restarting the game

Snap and Fill can be done using CSS or programmatically. 

Either way you will need to pause the game and then restore the state, you then have to show the either a smaller image of your game that can be played. 

Or show a paused screen. 

Then what do you do with the filled type of screen? 

Do you keep the game in a paused state? 

In the filled state do you simply shrink the play, if you do that, then you will need to modify the CSS, what about images?  Or do you just start off with a 640 by 480 screen and then when in filled state you don’t worry about it.

And so forth.

Here are some links:

  1. Designing flexible layouts (Metro style apps using JavaScript and HTML)
  2. Guidelines for snapped and fill views (Metro style apps)
  3. Designing flexible layouts (Metro style apps using JavaScript and HTML)
  4. Snap sample
  5. JavaScript and HTML5 touch game sample

Item 5 isn’t very well done, but it is a start, with some good classes that can be reused, the sample game doesn’t work well since the pause doesn’t work correctly.  Definitely something to look at.

Comments (2)

  1. Jens says:

    some nice link for you to learn and make it better. 🙂…/woogas-html5-adventure

  2. Surf4Fun says:


    Thank you so much for this link!  Wow!

    You are the best. 🙂


Skip to main content