HTML5

Js13kgames contest

orbizoid - smallLast few weeks I worked on a an entry for the Js13kGames contest. The main goal of this contest was to write a game in javascript that was only 13k in size. I find that writing software for contests is a great way to learn more about a language. The tight deadline forces you to think and you will end up with a finished product. Because I’m working a lot with javascript lately, this contest was a great training.

I build the game Orbizoid. The objective of the game is to catch the colored stars that float around with moons matching the colors of the stars. The moons are at different positions around a planet you can move with the mouse or by touch. When choosing the hard mode of the game the moons orbit the planet with various speeds.

The game is developed entirely in Visual Studio 2012 on Windows 8. I tested the game in Internet Explorer 10 most of the time. Although I feel it runs the best in IE10, I tested it in all other major browsers. There’s not a lot of css in the game. I used the new page inspector a lot when debugging the css. The game is rendered on a HTML5 Canvas. Orbizoid in blendWell, actually the game is rendered on a copy of the canvas and is copied to the main canvas. To reduce the size of the game, it doesn’t use any image files. All graphics are rendered at the start of the game. In the first version the glow was made by rendering 5 different canvasses on top of each other. The only browser that withstood this was Internet Explorer 10. So I decided to prerender the glow into the images. Every image is rendered on a canvas and turned into an image by getting the base64 encoded bytes of the canvas.

The game loop started out as a timeout which called itself 60 times a second. I later optimized it by using the new window.requestAnimFrame function. I got the game running at 60 frames per second. Unfortunately not all browsers managed to get this frame rate constant. Therefore I delayed the game loop to run at 30 fps. To monitor the frame rate I used stats.js.

The mathematics of this are are fairly simple. I wanted to have some space-related background animation. A starfield was the most obvious. It’s just drawing circles on x/z and y/z. By lowering the z each frame the stars look like they move closer. When z comes below a certain point it is reset to the furthest. If anyone would like a more detailed description on this effect just drop me a line and I’ll write a detailed tutorial about it. The orbiting planets are sin and cos calculations that are update every frame. For the collision detection I just calculated the distance between stars, moons and planet. If this is below a the radii of the objects there’s a collision.

In the end I had a few Kbs left so I added some sound. Unfortunately the html5 audio API not implemented very well among the different browsers. I wanted to used the jsfxr library. I only got it to work in Firefox. But it adds a nice extra feature.

I’m currently working on the Windows 8 version of this game. When it’s done it will be my first game in the windows marketplace. I started by copy all code to a new Windows 8 javascript project. It ran right out of the box, without modifications. Even Expression Blend showed the game and it could be edited in there. A great thing I noticed is that, other than IE10, the jsfxr library works in WinRT applications. Which means this version of the game will have the sounds too.

One of the rules of the contest was to make the code public and publish it on github. So here it is.

If you want to give the game a try, you can do so here (please like-tweet-plus it, thanks).

image

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: