Mozilla Launches BrowserQuest – a Look at Modern Web Technologies

We’ve known for a long time that HTML5 and other modern Web technologies have made it possible to do some remarkable things in a browser. Angry Birds has been available as a Web app, as have productivity apps such as Google Docs. But what about a massively multiplayer online game that allows you to fight creatures, build up your character, and adventure with friends?

Mozilla has released an answer to this question with BrowserQuest, a massively multiplayer game that showcases what a modern browser can do without the needs of any additional downloads, plugins, or extensions.

BrowserQuest is a 2D game that reminds me a lot of the Dragon Warrior games I grew up with on the Nintendo Entertainment System (NES). Add to that the massively multiplayer element and an incredibly simple user interface, and you have one addictive little game.

Here is a look at some of the Web technologies used to build BrowserQuest.

HTML5 Canvas + JavaScript

BrowserQuest is built on a series of modern Web technologies including HTML5 Canvas, which is an element that allows you to draw graphics with scripts. In the case of BrowserQuest, this is done using JavaScript inside Canvas tags. Canvas got its start through Apple when it introduced the OS X Dashboard.

Web Workers

Web Workers is also utilized, allowing the game to flow seamlessly between areas of the larger world without causing lag. As you transition between panels, Web Workers runs scripts in the background that readies future actions.

localStorage

localStorage is utilized to save your characters consistently as you travel around the map and earn achievements, loot, and vanquish foes. localStorage is a persistent version of sessionStorage, which allows you to go back to your character later on, even after closing your browser.

CSS3 Media Queries

CSS3 Media Queries are used to keep the game consistently playable across multiple devices, regardless of aspect ratio or resolution. You have pretty much the same experience on an iPhone that you would on a desktop running 1080p graphics. This makes the game more dynamic, and eliminates the need for versions.

HTML5 Audio

HTML5 Audio is used to embed audio on a page without the need for Flash or some other third-party media player. This is an integrated part of HTML5, and the method by which the developers behind BrowserQuest made in-game music and special effect sounds possible. After all, what fun is an MMO if you can’t hear the big creature splat as it dies?

First Impressions

BrowserQuest is pretty fun, and instantly addictive. As an experiment, it certainly captures the attention of would-be game developers just getting their feet wet in the world of Web development. After all, these are the technologies on which many developers first get started before moving on to more complex languages and compiling processes that go into making stand-alone apps for desktop systems and mobile devices. To be able to take what you learn as a Web developer and put it towards potentially creating an immersive gaming experience, well, that’s just too intriguing to pass up.

BrowserQuest itself is a very simple game. You kill monsters to earn upgraded armor and weapons. There is no plot to speak of, though there is an end boss. You have a number of achievements to earn throughout your playing experience, and some of them are quite comical. For example, you get an achievement for finding a cake on the other end of two colored portals, an obvious nod to Valve’s Portal series.

What do you think? Could this be one additional example of how browsers are quickly becoming the portal in which more complex programs are developed? Could the next World of Warcraft be built on these technologies?

Article Written by

Ryan Matthew Pierson has worked as a broadcaster, writer, and producer for media outlets ranging from local radio stations to internationally syndicated programs. His experience includes every aspect of media production. He has over a decade of experience in terrestrial radio, Internet multimedia, and commercial video production.

  • johnwerneken

    kewl. maybe kabam will edo my fave, glory of rome aka GOR

    • https://plus.google.com/112301869379652563135/posts Matt Ryan

      Wait, what?

      • http://chris.pirillo.com/ Chris Pirillo

        He said: “kewl. maybe kabam will edo my fave, glory of rome aka GOR”

        • https://plus.google.com/112301869379652563135/posts Matt Ryan

          OH, that makes perfect sense. :-/

          • http://mrvulcan.myopenid.com/ Bert Visscher

             If it makes you feel any better, Matt, you’re not alone.

  • Wolfee Darkfang

    I tried it in both chrome and firefox (updated) and it hangs at “connecting to server” forever. lol
    Looks like they still got bugs to iron out. Looks like classic Zelda to me. I got a few friends who might play it with me once it’s operational. I just don’t see a password for the login so I wonder how it provides security and character data.