Snap, Snap, Snap: Windows 8 Game Design and HTML 5, part 1

Snap.  Snap.  Snap.

Get it? Snap.  So how do you do a Snap?  Ever watch a little kid who hasn’t quite got the hang of snapping their fingers, hilarious.  In a nice way.

What about Windows 8 snapping?  I just read Jeremy Fosters blog on snapping and it is easy to do.  Sort of.  Not solving my problem, but it does explain snapping and how to do it.  Nice.  Jeremy is a good guy.

Here is the thing, if I have a html thingie running some javascript and I need to snap it, how do I do that?  Ummm?  Is there a simple MSDN Article as of June 21, 2012 that addresses this cleanly and clearly?  Let’s see….

I downloaded the sample game template (as they say in the documentation, it really isn’t a template, it is a sample.  This means that you don’t put it in the template folder expecting it to be a real template, it is a sample.  There are 14 javascript classes, which makes it tricky to get started quickly without some explanations.

You find the SAMPLE code here:

• https://code.msdn.microsoft.com/Sample-Game-9303b5c6

You find the documentation here (where they refer to the sample code as template, which is a style issue, so ignore the confusion in terms):

• https://msdn.microsoft.com/en-US/library/windows/apps/Hh452778
• Note when you unzip the file open the folder named javascript, there is where the solution file is, the description file is simply that.  For many Web page programmers you might think that the JavaScript folder is part of the web project.

To get to the code required for the snap and unsnap, you need to visit the game.js class in the javascript folder that you downloaded:

//************ Start of the snap function code************************

// Called when the game enters snapped view
    snap: function () {
        // TODO: Update game state when in snapped view - basic UI styles can be set with media queries in gamePage.css
        this.pause();
        // Temporarily resize game area to maintain aspect ratio
        gameCanvas.width = window.innerWidth;
        gameCanvas.height = window.innerHeight;
    },

//************ End of the snap function code************************

//************ Start of the unsnap function ************************

unsnap: function () {
      // TODO: Update game state when in fill, full-screen, or portrait view - basic UI styles can be set with media queries in gamePage.css

      // It's possible the ball is now outside the play area. Fix it if so.
      if (this.state.position.x > window.innerWidth) {
          this.state.position.x += window.innerWidth - this.state.position.x;
      }
      if (this.state.position.y > window.innerHeight) {
          this.state.position.y += window.innerHeight - this.state.position.y;
      }

      // Restore game area to new aspect ratio
      gameCanvas.width = window.innerWidth;
      gameCanvas.height = window.innerHeight;

      // Resume playing
      this.unpause();
  },

//************ End of the snap function code************************

So here is the code for the snap, how do you use them?  See the next post.