An End-to-End Windows 8 Metro Style HTML5/JavaScript Game Sample

We're going to start mixing in some new items in our Monday posts. Given the recent release of Windows 8 Customer Preview and Visual Studio 11 beta we're going to start mixing in some new "M's", such as today's Metro Monday project...

One of the promises of developing for Windows 8 is that you can build locally installed and executed HTML5/JavaScript based applications. These are not "web" pages morphed into an app somehow, or a link to a page running on a server somewhere, but a fully fledged app. One way to think about it is that HTML5 is the UI language (i.e. like XAML) and JavaScript is the programming language (like C++, C#, VB.Net, etc).

So what would such a game or app look like? Lets take a peek at a recently released "end to end" sample that's released by Windows SDK team...

Metro style JavaScript and HTML5 game sample

This sample shows how to design a basic casual game in HTML5, from end-to-end. The game included in the sample is deliberately simple to minimize distractions from game logic intended to be replaced.

Specifically, this sample covers:

• Setting up draw and update loops
• Handling snapped view
• Suspend and resume behaviors
• Asset loading and audio playback
• Roaming application data and settings
• Handling touch events

This sample also demonstrates App Bar integration, accessed by swiping up with a touch gesture from the bottom edge of the screen. The main navigation elements of the sample are available there. Additionally, when on the game screen there are game-specific commands for starting a new game or pausing the game. It also demonstrates integration with the Share Contract, accessed via the Charms Bar when you select a score on the high scores table. Lastly, settings for the sample are available via integration with the Settings Contract via the Charms Bar.

This sample is written in Metro style JavaScript and HTML5.

For more information about the concepts and APIs demonstrated in this sample, see the following topics:

• Tutorial: create a basic JavaScript game
• Prepare your development environment for JavaScript game development
• Creating a Metro style JavaScript game

Note The Windows Samples Gallery contains a variety of code samples that exercise the various new programming models, platforms, features, and components available in Windows 8 Consumer Preview and/or Windows Server 8 Beta. These downloadable samples are provided as compressed ZIP files that contain a Visual Studio solution (SLN) file for the sample, along with the source files, assets, resources, and metadata necessary to successfully compile and run the sample. For more information about the programming models, platforms, languages, and APIs demonstrated in this sample, please refer to the guidance, tutorials, and reference topics provided in the Windows 8 documentation available in the Windows Developer Center. This sample is provided as-is in order to indicate or demonstrate the functionality of the programming models and feature APIs for Windows 8 and/or Windows Server 8 Beta. Please provide feedback on this sample!

To obtain an evaluation copy of Windows 8, go to Windows 8.

To obtain an evaluation copy of Microsoft Visual Studio 11 Beta, go to Visual Studio 11 Beta.

...

So lets see a few snaps of this Project. Here's the Solution;

The project the debugging capabilities you'd expect, break points, etc.

Here's a snap of the UI language (i.e. the HTML page).

One feature that's pretty neat is that you can run this app on the local machine, i.e. it installs and runs on the machine, using the resolution, etc. of that machine. Or the cool part is that you can run it in the simulator, where you can control much more of the runtime environment. For example, you can easily change the simulator screen to portrait;

You can tweak the simulator screen resolution, the location services, take screenshots, simulate touch, and more.

Here's some snaps of the game itself (remember it's supposed to be simple to allow the focusing on what was being shown in the sample and not on the game itself);

If you're looking for a functioning Metro game, a sample written with HTML5/JavaScript, something to check out the sharing contracts, looking to see how touch and drawing loops work, this sample is just a download away...