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

I really like Windows 8, ok, I really liked Windows 7 and Vista, but this is different, I like the change in technology.  It is painful but worthwhile. 

Anyway, in the previous blog, I wandered around in the HTML5 JavaScript example and pretty much confused myself, and likely you as well.  As they say: You knew the job was dangerous when you took it.  Applying that statement to this blog one could say: You knew I just write about stuff as I think of it, so it may not make sense.  People like Jerry Nixon and Jeremy Foster take care with what they write.  I do too, but not the same way they do.

Ok now I am looking at the SnapSample and that is pretty good.  Simple.  So you might want to switch to that one., download the Snap sample for JavaScript.

Only two JavaScript classes, oops, unless you look the sample-utils then there is one more helper classes.  But that is for a certain look.  The main work we are concerned about is in the snap.js and default.  What I did was create a separate HTML 5 and JavaScript file to play with.  This way I worked through the minimum things required to make the code work.

My final goal is to reuse an existing game, but change it so that it will react to the snap gesture. 

The working code is below.  In the function the Windows.UI.ViewManagement.ApplicationView.value which is used for testing if the tablet is snapped or filled state, and if not in the filled or snapped state it will detect if the state of the tablet is landscape or portrait.

The function “updateView” is called from a function that detects a resize event.  Your job is to detect that the snapped scenario occurs and then you need to implement the code.  I didn’t show my hopelessly bad code since you can review the functional sample, which was present as of 6/21/2012, anytime in the future it may not be there.  If an asteroid for instance strikes the Earth.

Now you need to see a working example: See DoodleGrub, an annoyingly fun game, when snapped looks like the image below, the game goes into a pause situation and displays a 320 by whatever pixel with the buttons as shown.  Daniel Egan likes to point out that it would be better to have a mini-game going on the snap.  I am not sure, actually it might be better to have a setting that shows a fake spreadsheet in case you need to snap to hide what you are doing from the boss.  Umm, settings.  That is the next thing I have to work on.



// Code example start ************************

function updateView() {
        var myViewState = Windows.UI.ViewManagement.ApplicationView.value;
        var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
        var statusText;

        switch (myViewState) {
            case viewStates.snapped:
                statusText = "This app is snapped!";
            case viewStates.filled:
                statusText = "This app is in filled state!";
            case viewStates.fullScreenLandscape:
                statusText = "This app is full screen landscape!";
            case viewStates.fullScreenPortrait:
                statusText = "This app is full screen portrait!";
                statusText = "Error: Invalid view state returned.";

// Code example finish ************************

Comments (0)

Skip to main content