Creating a Simple Windows 8 Game with JavaScript: Part 1 – Windows 8 App Basics

• Develop a Windows 8 app in 30 days

Feel free to check out Chris Bowen's blog at http://blogs.msdn.com/cbowen?

Creating a Simple Windows 8 Game Series:

• Creating a Simple Windows 8 Game with JavaScript: Part 1 – Windows 8 App Basics
• Creating a Simple Windows 8 Game with JavaScript: Part 2 – Game Basics & CreateJS/EaselJS
• Creating a Simple Windows 8 Game with JavaScript: Part 3 – Game Logic
• Creating a Simple Windows 8 Game with JavaScript: Part 4 – Input & Sound

This is the first in a series of posts that will show you to create a (very) simple Windows 8 game. We’ll be using HTML5, JavaScript, WinJS, and some helpful libraries from CreateJS along the way.

• Part 1 – Windows 8 App Basics
• Part 2 – Game Basics & CreateJS/EaselJS
• Part 3 – Game Logic
• Part 4 – Input & Sound

The game is based on the XNA sample game "Catapult Wars Lab". We’ll reuse the assets from that game as we develop a new version for Windows 8 that’s based on web technologies.

This game focuses on simplicity, so there are a number of intermediate techniques that aren’t used in this sample. For more comprehensive samples, see "Further Reading" at the end of this post.

Let’s get started. In this post, we’ll focus on the basics of a Windows 8 project.

Setting Up 

To develop this game (or any Windows 8 Metro style application) you need to have both Windows 8 and Visual Studio 2012. Download and install these before moving on. We won’t cover that here because it’s explained well online.

Creating the Project

Start Visual Studio 2012 and choose FILE -> New Project (or CTRL + SHIFT + N). We’ll be using JavaScript, so choose that node under Templates. We’ll be relying on HTML5 canvas for UI so we only need the "Blank App" template (other templates have common Metro style layout and controls built in): 

Name the project "CatapultGame" and click OK create the project. There is some guidance about the Blank App template, but I’ll give you a quick tour now.

Understanding the Project

So, what did we get? Open some files in Solution Explorer and take a look around. If you expand all of the folders, you’ll see something like this: 

Here are the main parts to focus on:

• /References/Windows Library for JavaScript – This is "WinJS", the layer of JavaScript and CSS that helps us develop JavaScript Metro style apps for Windows 8. You can’t modify these files, but I recommend you take a look through them (later).
• /css/default.css – Starter CSS, including basics for handling screen changes via media queries. We’ll also build on this later.  
• /js/default.js – Has some starter JavaScript logic. We’ll add our own here soon.
• default.html – The root HTML page for our game
• package.appxmanifest – Contains many settings that help you personalize the application.  It’s XML, but if you double-click to open you’ll get a friendly interface for changing settings.

Also, the "images" folder has some default content used by the app for logos and a splash screen.  You’ll want to add your own.

Running the Game ... Well, the Empty Project

So, let’s run the project to see what we get.  First, there are some options for running the project:

Using the local machine is the default, but it’s also easy to connect to another machine with Remote Machine so you can run and use the project on the target machine, while debugging on your local machine.  Simulator lets you test various screen sizes/resolutions, simulate touch input, adjust location, and more.

For now, let’s run with Local Machine (click the button, press F5, or choose DEBUG -> Start Debugging).  

A fun game, indeed!

Getting Started

So, where did that "Content goes here" text come from? Open default.html, and here’s what you should see: 

What’s going on here?

• Line 1 – Says we’re targeting HTML5
• Lines 7-10 – Referencing WinJS’s CSS & JavaScript
• Lines 12-14 – Other references, including the default JS and CSS files. We’ll be adding others here later.
• Lines 16-18 – The body of our HTML page

As you can see, it’s just basic HTML.  Go ahead and have a little fun changing the HTML in the <body> and running again.

Where CSS Fits In

We’ve seen the default.html file, providing references and base content for the project, but HTML is only part of the story.  Web applications use HTML for content, JavaScript to make things happen, and CSS (Cascading Style Sheets) to affect design & appearance in a maintainable way.

CSS styles work by identifying (selecting) target elements and applying effects – color, shadow, text, transitions, transforms, layout… the list goes on.  CSS has so many features to help us create amazing effects, it would be ridiculous to attempt an overview here.  Just know that Visual Studio 2012 has many features to help you create and modify styles, and the more CSS you know, the more effective you’ll be.

Take a look at /css/default.css:

By default, no styles are being applied, but what is this for?

• Lines 1 & 2 – This selects the <body> tag of any page that references this file and will apply to that content any style rules we add.
• Lines 4-14 – These are CSS Media Queries, incredibly useful for adapting layout based on how the content is being displayed.  In this case, there are states in which Metro style apps can run – full screen landscape, filled, snapped, and full screen portrait - and these map to the four regions.  You can use this approach to customize your game to best utilize the available screen space.  

We’ll add to this later.  Stay tuned.

JavaScript, the Action Hero

We’ve seen HTML content & CSS styles, but how do things come to life?  How can the game "know" what’s going on? 

Let’s switch over to the js/default.js file and take a look:

It may look like a lot, but it’s pretty straightforward, just there to help us get started:

• Lines 3-33 – Haven’t seen a JavaScript function like this before? It’s an "Immediately-Invoked Function Expression" or IIFE (pronounced "iffy"). Short version, it keeps variables and functions tidy without affecting the global namespace. Medium version, read section 4 of Addy Osmani’s Essential JavaScript Namespacing Patterns. Longer version, I’m a fan of Ben Allman’s IIFE post.
• Lines 6-7 – Variables for the frequently-used Application and Activation classes.
• Line 8 – Calling WinJS.strictProcessing enables strict declarative processing (helping to detect errors more easily)
• Lines 10-21 – Activation code. First TODO is when the app is newly launched, second TODO is where we can load saved state when the app returns from being suspended by Windows.
• Lines 23-30 – A chance to save state before the app is suspended. Particularly important because suspension can be followed by termination, and if the game’s state isn’t saved here, the player has to start over when he/she returns to the game.

This is where we’ll soon add the game’s logic.  From code to load images, managing the game world, and various helper functions, to the game loop to control updating state and displaying content.

By the way, in this sample we’re going to do the simple thing by adding code only to default.js, but well-factored applications will generally have multiple JavaScript files, for example to create classes around game elements – player, planet, item, world, etc.  For some excellent recommendations and practices, see "JavaScript Game Code Organization" by Greg Smith.

What’s Next?

That was a brief overview of the basic gears and pulleys behind a Metro style application.  In part 2, we’ll start creating the game by bringing in content from the "Catapult Wars" starter project and getting the game’s basic structure in place.

Further Reading

Again, this series focuses on ease of learning and simplicity, so for a more comprehensive game sample, see the "JavaScript and HTML5 touch game sample" and related tutorial on MSDN.