BrowserQuest

An HTML5 massively multiplayer experiment

Client Mozilla
What we did
  • Original Concept
  • Game Design
  • Development
  • 2D Graphics
  • Scalable Hosting

Mozilla, the organization which loves to move the web forward, asked us once again to create a cutting-edge demonstration of the possibilities of HTML5 and the web platform. This time, our mission was to showcase HTML5 gaming and WebSockets, a new technology allowing to create real-time web apps, games and more.

Our demo needed to be both technically interesting and fun to use. As a result, we quickly decided that a massively multiplayer game would be perfect to demonstrate the power of WebSockets in a remarkable way and also to engage people beyond the technical aspect.

The game’s home screen as seen on an iPad.

How it came to be

BrowserQuest is a game which draws a lot of inspiration from its old predecessors - most notably role-playing games from the 90's. This project is a tribute to those retro video-games which have amazed us and have forged our desire to build compelling and fun experiences in the first place.

That's why we worked hard to create an immersive world that even the most casual player could enjoy, while also trying to please die-hard RPG fans. Thanks to several internal beta tests at Mozilla, we benefited from great feedback in order to refine the final adventure.

Designing the experience

During approximately 5 months of development, we iterated over many features. For example, at first, players used to gain experience and levels as their character progressed, but we eventually removed this feature. Instead, we introduced the ability to loot new weapons and armor, which was way more fun!

From a game design perspective, we decided to orient the gameplay towards exploration and discovery. We wanted players to feel a sense of danger as they ventured outside the village into dangerous areas and to have fun by coming across hidden items and easter eggs. We designed the adventure so that it could be finished under an hour while still being fun if experienced only for a few minutes.

We also needed the game to be as simple to play as possible both on desktop and mobile. That's why it was designed to be playable with just one click/tap for every action.

The technology

BrowserQuest is a blend of multiple technologies. The rendering engine manipulates multiple HTML5 canvas elements put on top of each other, as graphical layers. The browser audio API manages in-game sounds and music, while localStorage is used to save player characters on the client-side.

More importantly, the game engine uses WebSockets, which enable browsers to open a persistent bi-directionnal connection to a server. In BrowserQuest, this is what allows people to play and chat together in real-time without the need for any plugin and with low latency.

Responsive Design

One of our goals was to show the possibilites of HTML5 from a cross-platform perspective, by making it available on a lot of different browsers and devices. That's why BrowserQuest is built upon a responsive layout so that the game window and graphical features can adapt in a fluid way to whatever device you are currently playing on, be it a computer, mobile phone or tablet.

On the server-side

Our back-end architecture is running on Node.js. Because of this, both the front-end and back-end code of BrowserQuest are written in JavaScript. This allowed us to share some portion of the code between both ends.

One of the major challenges of creating BrowserQuest was the massively multiplayer aspect. We knew that thousands of people might want to play at the same time, so we designed a load-balanced infrastructure which is able to distribute players accross multiple game servers. During the first few days of release, the overall player population peaked at 3,000 simultaneous players and more than a million total unique visitors have played the game during the first 2 months after launch.

Special thanks to Paul Rouget, Laura Mesa, Rob Hawkes & Chris More.

Kind words

« BrowserQuest is pure HTML5 gaming goodness » – Wired

« BrowserQuest, which is built with JavaScript and HTML5, is a compelling demonstration of how existing standards can be used to create browser games. » Ryan Paul ‐ ArsTechnica

« The folks at Little Workshop built the game as a proof of concept and as a time waster. Once they get the NES version of Metal Gear ported to HTML5, though, I’m totally quitting my job. » John Biggs ‐ TechCrunch