Mozilla’s MMO, BrowserQuest, is a game changer for HTML5

March 30, 2012


facebook icon facebook icon

If you haven’t played around with HTML5 and you’re wondering what all the fuss is about then let Firefox’s creators, Mozilla, and the France-based web development agency Little Workshop fill you in.

Together they have created an amazing demo of the new HTML language’s capabilities. BrowserQuestBrowserQuest is a fantasy MMO (massively multiplayer online game) which harkens back to classic games from the ‘good ole days.’ Featuring old-school graphics and a simple point and click system the game can easily be picked up and played by anyone.

What is BrowerQuest?
What’s surprising about BrowserQuest is that even though it’s essentially a demo of a few programming languages and technologies it’s a genuinely honest love letter to 8 bit games (By the way, we love the 8bit Twitter and Facebook icons on the site.).

But is it playable?

Mozilla's BrowserQuest MMOWell, actually, yes. As a love letter to classic MMOs and RPGs the game starts off in the time honoured tradition requiring you to find and kill some pesky critter.  The back-story is simple, you’re a young villager who fancies himself a warrior and wants to go adventuring. There’s no big plot driving you, you just pick up a sword and set out into the dangerous world looking for adventure and loot.

Which brings us to a feature that’s in most games these days (whether you like them or hate them) – achievements. The game has 20 achievements at the moment, which range from killing 10 rats, defeating the final boss or finding a Firefox Costume to wear.

Playing with friends
Since this is an MMO, the game can be played with your friends or by yourself. There’s a handy little population counter on the bottom right which shows the active players, and clicking it shows the total number of players currently online throughout the different instances.

Mozilla's BrowserQuest MMOAlthough we did notice some significant slow down when more than three characters were live on the same screen.

What makes it all run?
For a retro-styled game the underlying technology is ultramodern.  It takes advantage of the HTML5 Canvas to power the 2D tile-based graphics engine; Web workers to initialise the large world map without slowing down the homepage UI; localStorage to save the progress of your character continually;  CSS3 Media Queries to adapt the game to your browser size; and HTML5 audio so you can hear that rat or skeleton die!

It also uses WebSockets, a new technology that manages communication between the server and a browser, to create the multiplayer environment.

Mozilla Firefox engineer and HTML5 evangelist Paul Rouget (@paulrouget) explains;

“When you start to play, your browser opens up a WebSocket connection to one of several load-balanced game servers. Each server hosts multiple world instances and handles the player synchronization and game logic within all instances. Because the server code is running on Node.js, both the server and client codebases share a small portion of the same JavaScript source code.”

Play it anywhere
Of course Mozilla and Little Workshop didn’t build BrowserQuest just for the fun of it (well…not only for the fun of it).  The aim of the game is to demonstrate the sheer capabilities of HTML5. All you need is a browser that supports HTML5 and WebSockets, i.e. Firefox, Safari, Chrome and Opera, and you’re set.

Better still is that the game works on iOS and in the Android version of Firefox. Meaning as long as you have an internet connection you can pick it up, literally.

The game is still experimental on mobile devices, but don’t let that discourage you from having a fun little adventure in a classic game style. So, head on over to the BrowserQuest website and start you own adventure.

If you’re inspired and you fancy making a game yourself the source and server code are available on Github.


facebook icon facebook icon

Ajit Jain

Ajit Jain is marketing and sales head at Octal Info Solution, a leading iPhone app development company and offering platform to hire Android app developers for your own app development project. He is available to connect on Google Plus, Twitter, Facebook, and LinkedIn.


Sociable's Podcast