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, for better running this game could be useful to have a good graphic card as a AMD Radeon RX at least, for better performance of it.
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. Well, 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.
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).