{{ !articles[0].partner.isSponsoringArticle ? "Platinum" : "Portal" }} Partner
css,html5,tips and tricks,html & xhtml

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

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.

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks