Intro
A few weeks ago my first Windows Store app was certified and it’s available for download now. The game is a rebuild of the game I build for the Js13k contest a while back. Because I wasn’t limited to 13k anymore I added sounds, music and images. I also added a tutorial, settings, the ability to share your hi-score using Share Charm and added your latest scores to the live tile. Let’s have a look how it works.
Because the original game was build using HTML and JavaScript I chose to use the same for the Store app. I broke the one file from the 13k version into various files and classes to make it a lot more readable and maintainable. Code that was targeting a specific platform or browser was removed.
Main page
The original game didn’t use any real navigation, only showing and hiding a few divs. The Windows Store version uses the default navigation pattern as used in the Navigation project template.
The main page (default.html) contains a ViewBox which in turn contains the navigation control. The ViewBox is used scale the application based on various resolution (more on this later).
The main page also contains the AppBar. Buttons on the AppBar are turned on and off based on the page that is shown. When the player navigates from one page to another a function is called that updates the buttons.
The main page loads a global JavaScript (default.js) file the coordinates everything that’s happening. The code in this file is responsible for handling all “global” stuff like the Share Charm and calls from the AppBar.
Game loop
The heart of the game is the game loop. The loop is responsible for recalculating the positions of all assets and draw them on the screen, all with a specific delay. The window.requestAnimationFrame asks the browser to be informed when it’s ready to draw the next frame of the animation. In this case I narrowed it down to repaint at max every 40ms.
function animloop() {
setTimeout(function () {
requestId = window.requestAnimationFrame(animloop);
}, 40);
Orbizoid.game.recalculate();
Orbizoid.game.draw();
}
Different Resolutions
One of the big pain points I ran into was handling different resolutions. I took the the road of implementing a ViewBox. The contents of a ViewBox are scaled to always fill it. Here’s the entire ViewBox including its content. I used a grid to center the ViewBox on the screen. The contents of the ViewBox is set fixed to 960 by 720 pixels. From this point on, all positioning can be done absolute and will be scaled to whatever the size of the ViewBox is.
<div data-win-control="WinJS.UI.ViewBox" id="viewbox"
style="-ms-grid-column: 2; -ms-grid-row: 2;">
<div style="height: 720px; width: 960px;">
<div id="contentHost" class="center"
data-win-control="Orbizoid.PageControlNavigator"
data-win-options="{ home: '/pages/menu.html' }"></div>
</div>
</div>
To handle the resizing of the screen I used a media query. Media queries are a CSS construction to be able to declare CSS for a specific screen size. There’s also a JavaScript function to monitor a media query, matchMedia. When the screen resolution changed to a width less then 960px I wanted the game to pause.
mql = matchMedia("screen and (max-width: 959px)");
mql.addListener(resizeListener);
...
function resizeListener(q) {
if (q.matches) {
Orbizoid.game.pause();
}
}
The resizing of larger resolutions is done using normal CSS media queries.
The only thing I had a pretty hard time fixing handling the position of the “mouse” on the screen, because this was relative the the scale of the ViewBox. Here’s a small piece of the code:
onmousemove: function (event, args) {
var that = Orbizoid.game;
if (!that.game.player.die) {
var y = that.viewbox.clientHeight / 720;
var x = that.viewbox.clientWidth / 960;
that.game.player.x = ((args.clientX - that.viewbox.offsetLeft) / x) | 0;
that.game.player.y = ((args.clientY - that.viewbox.offsetTop) / y) | 0;
}
}
Audio
The music is played using the standard audio element of HTML. It’s started and stopped from JavaScript.
The game audio is played using a custom audio manager. This manager creates an array of Audio objects in memory and keeps a pointer to the next element to use. The sound effects themself are store in another array. When something happens in the game the store effect is copied to a channel, played and the pointer is updated. This way I can play multiple audio files at once and do not have to wait until the last has finished playing.
When the volume is turned to 0, no audio is played.
Wrap-up
If you have any questions about how the game works, just ask. And if you haven’t played it yet, please do and let me know what you think!.
You can find the game in the Windows Store.