Mozilla

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…

236 comments

Comments are now closed.

  1. ywlcjl wrote on May 23rd, 2012 at 19:43:

    I success try to fix the browserquest “connecting to server” Problem on my win7 x32 sp1, it’s the Anti-virus software setting Problem. I close Web protection on AVAST Anti-virus software , the game can play.

  2. Mike wrote on May 31st, 2012 at 17:41:

    Well its a very good game but i keep dying so it is not that awesome but its VERY Awesome

    1. Kyle wrote on October 5th, 2012 at 21:00:

      You must not have been trying very hard. I was able to make it through the entire game and get the best armor and beat the final boss in about 10 minutes.

      1. Sassy wrote on February 27th, 2013 at 18:33:

        Me too :)

  3. Wern wrote on June 1st, 2012 at 22:04:

    Very nice game! But is it only normal for this game to use up a lot of resources? Because every time I play it the fan of my laptop spins like crazy and more heat is produced by the computer.

  4. Weerayut Teja wrote on June 5th, 2012 at 07:56:

    Great game with source code. Thank you. I’ll learn from it.

  5. Simon Smith wrote on July 15th, 2012 at 09:28:

    the website doesnt work in Firefox 13.0.1 on Mac :’(

    trying to test out the websockets and also try this game but just keeps saying

    We’re sorry, but your browser does not support WebSockets.
    In order to play, we recommend using the latest version of Firefox, Chrome or Safari.

  6. Enda Mannn wrote on July 20th, 2012 at 02:54:

    I really enjoyed playing this game but wish there were many more tasks to complete. Great work all the same.

  7. DD wrote on August 1st, 2012 at 02:31:

    Sorry if this question sounds silly but I am a newbie to web development as a whole and I have to do a PoC on HTML5 games.

    I have compiled the server and started it on my localhost. If i type “http://localhost:8000/status’ in the browser I get a result. But I cannot get the game to start. What is the URL to start the game? Is it “http://localhost:8000/BrowserQuest”? In the client foler I have modified config_local.json and config_build.json to
    “host”: “ws://localhost”,
    Is this correct.

  8. Mark Manning wrote on August 5th, 2012 at 12:44:

    I think this is awesome. Very smooth text transition, graphics transition, and it played very well. To Mike who keeps dying – quit attacking monsters you can’t kill. Try the smaller ones first. :-) To Wern – the reason your cpu’s fan comes on is because your system probably is not set up to handle the newer technology. Older computers just have a harder time with it because usually the hardware is emulated in software. So a particular bit of code may be executing a lot to compensate for the missing hardware.

  9. Robert Burkhall wrote on August 17th, 2012 at 23:52:

    I’m posting this for anyone who has tried to get the game working on their local machined and have had issues. I describe the problem with cross domain security and the fix(work-around) that I came up with that fixes the game’s connecting issue. Hope this helps!!!

    https://github.com/mozilla/BrowserQuest/issues/96

    https://github.com/rburkhal/BrowserQuest.git

  10. abhinav wrote on August 20th, 2012 at 01:13:

    Really nice :)

  11. hello wrote on August 22nd, 2012 at 04:01:

    here to play extension of browserquest

    http://asky.freethinker.kr/index.en.html

    Server runned by an individual
    not for commercial use

  12. hello wrote on September 3rd, 2012 at 10:00:

    here is the new link for the extension of the game

    http://asky.freethinker.kr/index.py?no=00082001010010000066000970010500110&lang=en

    to global chat type /1
    for example “/1 hi”
    to use potion press 1 or 2

    1. sonns wrote on December 24th, 2012 at 01:17:

      Hello !
      Can you teach me how to exten this game please ?
      I wan to develop it

  13. alex wrote on September 8th, 2012 at 09:45:

    you have to register in browserquest

  14. Jenny wrote on September 18th, 2012 at 05:30:

    Hi,

    I really like this article and the game. I also would like to suggest you a HTML5 game: http://www.a5-animator.com/Pages/Examples_8#prettyPhotoiframes1/0/

    Have fun playing it! :-)

  15. Robert Wagner wrote on September 24th, 2012 at 11:00:

    I get stuck at “Connecting to server…” I’m not to familiar with WebSockets but it might have to do with the fact that I am behind a proxy server. I was able to connect on another device that was not behind the proxy.

  16. Justin Clift wrote on September 26th, 2012 at 02:53:

    For anyone interested in trying out the BrowerQuest code, or getting involved with further development, use this GitHub repo:

    https://github.com/browserquest/BrowserQuest

    The Mozilla repo has many bugs, and although a useful reference point, is abandoned. :(

  17. Goldniko wrote on October 7th, 2012 at 20:10:

    The game cant connect to a server, though i wait for half a hour to do so

  18. hello wrote on October 11th, 2012 at 05:48:

    http://www.youtube.com/watch?v=BMiGwCYjJYQ

    here to watch the extended version of browserquest!

  19. Chris Nikolajsen wrote on November 7th, 2012 at 01:10:

    Great game! It reminds me of the SNES game “Zelda: A link to the past”. Its realy nice that you made the game code opensource. Im on a quest to make an HTML5 game and this is going to be a good source of inpiration and knowledge :) thx

  20. Agent BA-2 “J” wrote on November 7th, 2012 at 17:51:

    Agent BA-2 “J” is my character name. (I got it from this DS game called Elite Beat Agents (EBA for short)).

  21. crizcross wrote on November 18th, 2012 at 05:42:

    The last medal *spoiler*. to the east of the forest is a cave guarded by three giants. in the cave take right right bottom left bottom left or sthin like that to get to the rickroller :P

  22. Juan Vazquez wrote on December 7th, 2012 at 07:52:

    This is one heck of a game! I love browserquest

  23. Yossi levi wrote on December 9th, 2012 at 22:52:

    Hi,

    I want to build multiplayer game.

    I read about web-socket which work with tcp protocol which possible to response by 50 ms to each request.

    I know that node.js work with web-socket,
    I read some guide and I see that I must to install node.js on my local host(127.0.0.1).

    My question is:

    How can I integrated the web-sockt in my host domain
    like http://www.mydomain.com instead 127.0.0.1:1337/ -> 1337 port listening ?

    Many Thanks

  24. RandomAdventure wrote on December 30th, 2012 at 05:56:

    Wow I beat the game and got the best armor in 10 minutes! :D

  25. RandomAdventure wrote on December 30th, 2012 at 06:08:

    Also RandomAdventure is my game’s username

  26. Cameron wrote on January 10th, 2013 at 19:57:

    Unfortunately, while the game claims iOS compatibility, this is not the case. The game freezes you whenever you enter the room containing the boss using mobile Safari. Whichever bug causes this should be fixed. It is not “compatible”, in my opinion, if it does not function properly. Misleading, and very disappointing for the many users that cannot complete this game.

  27. Francis wrote on January 22nd, 2013 at 13:35:

    The page could use something that stops you pressing back button

  28. Stephanie Bergmann wrote on February 12th, 2013 at 11:34:

    I want to play Games @ Facebook in Germanlanguage!!

  29. Brian wrote on February 15th, 2013 at 19:23:

    This was amazing! I made a multiplayer html5 game of my own after being inspired by this one! Check out http://www.bandwithfriends.com

  30. PLayer wrote on March 4th, 2013 at 12:38:

    make diffrent maps

  31. Fire crow wrote on March 6th, 2013 at 09:09:

    Awesome !!!! excelent game, the real time between players is wonderful

  32. Zoe Barrie wrote on March 27th, 2013 at 10:50:

    i luve it

  33. vucko wrote on March 28th, 2013 at 17:41:

    I can’t connect to the server, only the message “Connecting to server…” shows up in the browser without any change for more than 10 minutes.

  34. CraigLiamFord wrote on April 8th, 2013 at 04:47:

    When I play the game in my web-browser, I can ha=ear the music playing, But when I use the Windows 8 app, I cannot.

    The sound/Volume is on at the bottom right.

1 2 3 4

Comments are closed for this article.