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.

Tuesday, March 5, 2013

The Lab is ready to rock!

Here it is, The Lab is ready and you can play it here.

I made this HTML5 strategy-RPG-ish game for Mozilla GameOn 2013 Competition, in the category "Hackable games", and can be played on the browser by anyone who knows a bit of Javascript.

It is about a laboratory in which you have to grow bugteria, manipulate their DNA and collect some of them for analysis.

Almost any action requires writing code or using the browser's developer tools, but it's not that hard for a casual gamer with basic programming skills (there are hints and links to documentation).


p.s.: many thanks to my dear sister for the game logo!