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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)