Over a million developers have joined DZone.
Platinum Partner

How I Cheated Mozilla's New HTML5 Game - Browser Quest

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

Disclaimer: I'm not advocating cheating as a good thing. I'm not insinuating that Mozilla's code was somehow lacking (actually the code is pretty kick ass). Nor am I trying to pretend I'm some super hacker. Rather - I thought I'd share how I modified Mozilla's new game to cheat as a way of demonstrating things you have to look out for when coding HTML5-based games. Also - my very first programming experience was pretty similar. I had to learn hex so I could edit my Bard's Tale game saves via a disk editor on my Apple 2e. I figured a legacy as rich as that deserves a rebirth. ;)

So first - some context. Yesterday Mozilla announced the launch of Browser Quest. This is a multiplayer online roll playing game. The mechanics aren't terribly complex (non-gamers should give it a try), but it is a pretty cool example of what can be done with HTML5.

Simply connect to the site, enter a name, cross your fingers (it is a bit overwhelmed right now), and start playing.

What's really cool is that Mozilla has also open sourced the entire game - both the front end client and back-end technology. You can peruse the code here: https://github.com/mozilla/BrowserQuest

I played it for a bit (research!) and noticed right away that they were using LocalStorage. I've got a Chrome extension (LocalStorage Monitor) that highlights when a site is using LocalStorage and lets me examine the contents quickly. Here's what I saw on the site:

First thing I noticed - my inventory was stored in LocalStorage. That meant I could modify my inventory. After looking at the code, I realized they had a simple list of swords and armors that were ranked by a simple numeric index. If you gave yourself the top weapon/armor, then you would be set.

So step one was to pop into console and copy out the value:



This copied the value (a JSON string) into my clipboard. I pasted it into notepad, and simply edited the two values:


 I took the string, went back into console, and did...

localStorage["data"] = (pasted my string here) 


Reloaded the page, and voila - I'm an Epic Avenger of Mighty Awesomeness:

Just to repeat - I'm not trying to diminish anything Mozilla did here. It's a great demo. Just don't forget that localStorage, like any client data, is inherently insecure.

p.s. Wondering why you see a 5Tagger character and Romana? Just different tests, that's all.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Raymond Camden , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}