Sunday, March 24, 2013

The technology behind The Lab - Part 1

Before starting, I want to share my happiness with you: The Lab was selected as a Notable Entry and featured on the GameOn blog!
You can see the post here.

It is a great success to have reached a place among the first 15, given the fact that there were 161 total entries.

This is the first of a series of posts about various technical aspects of The Lab, my hackable HTML5 game.
Here I will talk about the Javascript libraries that I integrated and that helped me through the development.

jQuery + jQuery UI - I've been reluctant for some time to use jQuery, as in my opinion it over-simplifies the job. However, given the short time available for the competition, I felt it was time to leverage its ease of use. And in fact it's very helpful for this kind of situations! I didn't require any fancy graphics but only dialogs, accordions and resizable divs, and it's all provided. Thumbs up for jQuery.

jQuery Terminal Emulator - Since The Lab is a game about coding in Javascript (1), a terminal is mandatory unless you force the user to open the browser's developer tools. When you need a specific feature in your web-app, there is a huge chance that "there is a jQuery plugin for that" is a valid answer, and this is the case! There is an interesting topic for one of the next posts: how to eval the user's Javascript?

CodeMirror - Since The Lab is a game about coding in Javascript (2), for some tasks you'd probably prefer using a handy code editor with syntax highlighting rather that writing each instruction on the command line. This is a pretty powerful one, and it runs entirely inside your browser. By the way, its creator Marijn Haverbeke is also working on Tern, a Javascript analysis engine to add autocompletion and other nifty features to your favorite editor.

Buzz - Music and sounds add personality to a game, and they matter a lot to describe entities and situations. I used Buzz for everything that concerns audio.

-prefix-free - Thanks to this small library by Lea Verou you can write your CSS without caring about vendor prefixes. Quite a lot of time saved.

Mutation Summary - This library allows you to play with the DOM and solve some particular puzzles without writing a single line of Javascript. It wraps the Mutation Observer DOM APIs, of which I will probably talk in one of the next posts.

That's all for now, in the meantime you can play The Lab here.

No comments:

Post a Comment