Remember my Ashteroids demo with Flash? I managed to port it to JavaScript!

Play the game here

The Ashteroids project is an example project using the JavaScript version of Ash Framework which I’ve been playing around lately. Just like the Flash version, you can switch between 2D and 3D mode. Ash framework allows you to easily switch between renderers while using the same game logic and other game components.

For the 2D renderer, I use HTML5 Canvas and CreateJS. For the 3D/WebGL, I use Three.js. I’m planning to add more renderers for the next version, maybe PIXI.js or native DOM renderer.

CreateJS Rocks!

CreateJS is a fantastic library. Not only for graphics and canvas, but it also contains simple-to-use libraries for animation, sound (SoundJS), and assets pre-loading (PreloadJS). Ashteroids uses PreloadJS and SoundJS which makes it better than the Flash version (the Flash one does not have sounds 😛 ).

HTML & CSS for UI

Web browser comes with powerful layout & text rendering engine, so why not using HTML and CSS for menu screens, popup menu, buttons, and other UI components?

CSS3 has lots of stuff for game UI: Web Fonts, spritesheet, shape transformations, and also 3D animations. There are tons of resources on how to do some cool and nice effects using CSS. Some of my favourites:

• CSS-tricks
• Smashing Magazine
• codrops
• HTML5 Rocks
• caniuse, to check if a certain CSS feature available on certain device/browser

Team up with a web designer is totally recommended 😉

Backbone.js

Ashteroids also uses Backbone.js for managing screens and also HTML template. Using HTML template, you can separate between the JavaScript and the HTML file. This allows you to make dummy screens or UI components, and have them polished by your web designers.

What’s next?

I really enjoy playing with JavaScript and I could see myself doing more in the future.

Don’t forget to check the source code at GitHub and fork it as you like 😉