BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment

It’s time for some gaming action with a new HTML5 game demo: BrowserQuest, a massively multiplayer adventure game created by Little Workshop (@glecollinet & @whatthefranck) and Mozilla.

Play the game: browserquest.mozilla.org
BrowserQuest

BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.

Even better, it’s open-source so be sure to check out the source code on GitHub!

Watch a screencast:

A multiplayer experience

BrowserQuest screenshot

BrowserQuest can be played by thousands of simultaneous players, distributed across different instances of the in-game world. Click on the population counter at any time to know exactly how many total players are currently online.

Players can see and interact with each other by using an in-game chat system. They can also team up and fight enemies together.

BrowserQuest is a game of exploration: the more dangerous the places you go, the better the rewards.

Powered by WebSockets

WebSockets are a new technology enabling bi-directional communication between a browser and a server on the web.

BrowserQuest is a demo of how this technology can be used today to create a real-time multiplayer game in a single webpage. 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.

Server code is available on Github.

BrowserQuest screenshot

Built on the Web platform

BrowserQuest makes extensive use of different web technologies, such as:

  • HTML5 Canvas, which powers the 2D tile-based graphics engine.
  • Web workers, allowing to initialize the large world map without slowing down the homepage UI.
  • localStorage, in which the progress of your character is continually saved.
  • CSS3 Media Queries, so that the game can resize itself and adapt to many devices.
  • HTML5 audio, so you can hear that rat or skeleton die!

Available everywhere

Since BrowserQuest is written in HTML5/JavaScript, it is available across a lot of different browsers and platforms. The game can be played in Firefox, Chrome and Safari. With WebSockets enabled, it’s also playable in Opera. Moreover, it’s compatible with iOS devices, as well as tablets and phones running Firefox for Android.

BrowserQuest screenshot

The mobile versions are more experimental than the desktop experience, which has richer features and performance, but it’s an early glimpse of what kind of games will be coming to the mobile Web in the future. Give it a try with your favorite mobile device!

Join the adventure

Want to be part of BrowserQuest? Create your own character and venture into the world. Fight enemies by yourself or with friends to get your hands on new equipment and items. You might even stumble upon a couple of surprises along the way…

View full post on Mozilla Hacks – the Web developer blog

20 thoughts on “BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment

  1. Jon

    Seems to be down. I get a connection error when I try to play the game, and no data when I visit the stats page.

  2. Jean-Yves Perrier

    Just go to the URL and follow the instructions (you need a modern browser but not necessary Firefox of course)

  3. Eric

    Awesome!! Doubly so because I love classic RPGs, but this is an outstanding showcase of what can be done purely within a browser with a relatively small amount of work. If only I had the time and creativity to do such a thing myself 🙂

    Mozilla continues to be a great force in browser development, keep it up!

  4. Jakub Minkiewicz

    I know this is just a showcase game, but I would really really want this to become a full feature MMO

  5. Benjamin Meyer

    Opening the game up in inspector it looks like every time you join the game it re-downloads a ton of assets that could be sitting inside the browser cache. A quick tweak should fix that.

  6. Karai

    Terrific proof of concept! This game is actually pretty fun. One thing I noticed in Chrome, though:

    event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

    Cheers~

  7. Alessandro Bahgat

    What a great job!
    Thank you for releasing it on GitHub 🙂

    It can be effectively used as a base for other games and even for some “uncommon” things (e.g. teaching kids how to code by altering the games they play). Anyone up for such a thing?

  8. wes

    Hehe I thought the same thing. I checked though, the sprites and tiles are different enough to be unique. The styles are definitely close though.

  9. Klintoris

    Really awesome 8 bit experience, I believe this is the future of yesterday. The html 5 chimera of fail materializes. At the same time, flash is going away to 3D games at 30 fps on mobile through flex and we are left with this failure. Awesome.

  10. Steve

    When I run the server code, I immediately get an error saying

    ERROR uncaughtException: Error: connect ECONNREFUSED

    then, if a user tries to connect, I see:

    WebSocket Request unsupported by WebSocket-Node: TypeError: Cannot call method ‘write’ of null

    Anyone have any ideas what might be going wrong?

  11. Arc

    Shiny! Only some problems with the camera when going to a location requires crossing of several screens.

    Sometimes I can’t move anymore once the character has plotted its path and sometimes the camera refuses to follow the character.

  12. Anonymous

    Very impressive. Managed to get 18/20 achievements; unfortunately, the last two (Meatshield and Still Alive) would require intentionally losing several times.

  13. Jess

    this is fantastic! It can’t stop playing. I do wish that you could choose your initial avatar. It feels a little weird being called “young man” from time to time. There’s so much potential here. Congratulations!

Leave a Reply