Destroy the Web

Destroy the Web is an add-on for Firefox which turns any website into a shoot-em up video game. You have 30 seconds to destroy a website as much as possible. It was awarded Best Game & Entertainment add-on in Mozilla’s Extend Firefox 3.5 contest in 2009, and had an active and growing community of players around the world. In the next few lines I reminisce over how I came upon the idea for it, and the process of its creation. The project itself is now abandoned.

The idea behind Destroy the Web came out when… hmmm… I don’t think I exactly remember!

It was June 2009, and Mozilla announced another edition of the Extend Firefox contest. The concept was the same as in previous editions: create an awesome add-on for Firefox; but this time with a couple of new categories: Best Shopping Add-on and Best Game & Entertainment Add-on.

Now, this is the part where I tell you I’m sort of a video game nerd.

I was born in the 80’s, so video games are second nature to me; and I’ve been playing since I can remember. I was hooked since the first time I played Pitfall II on my older brother’s Atari 2600. Ever since then, I’ve been lucky enough to have had at least one gaming console per generation, always favoring Nintendo. Come to think of it, video games were probably the reason I chose this career path.

Back to the Extend Firefox 3.5 contest. I was excited about the possibility of participating, and I was convinced I wanted to do something for the game & entertainment category. Having won the past year with Fire.fm though, I became worried I could not come up with something particularly interesting or useful enough twice in a row.

The one thing I was sure of was that a game add-on for Firefox had to fit within Firefox. For me, if the game had nothing to do with the actual web browsing, then it had no real reason to be an add-on; it would be just another game in a pop-up window. Since I wanted the game to be related with the browser, I thought it would be an advantage if the game (whatever it would be) was played by doing something in the current page; in other words, the web pages would be the stages. This gave the game two advantages: one, since two websites are never the same, the game immediately obtained a random factor to it; and two, since websites are common domain and public, people could compete to obtain the best score in any given site.

With this idea in mind, I set up my development environment for a new, blank add-on project (unnamed at the moment), and started toying around. One of the first things I tried doing was painting over the current page, but I quickly tossed that idea out of the way when, almost by accident, I added code to remove HTML elements from the page by clicking on them. It seemed funny to me how the page began to fall apart when its elements were removed, so I decided to make a game where you had a certain amount of time to destroy websites. Since I wanted to have some kind of high score system and a sense of competition between players, I constrained each play session to 30 seconds: enough time to play but not too much that it could become tedious. The game quickly took shape and, well, just basically developed itself into what it finally became.

I was aware that animation and sound effects could either make or break the game. The contest encouraged participants to take advantage of the new features of Firefox 3.5, which was about to be released at the time. This was actually great because it added features to the HTML canvas element and introduced support for the HTML audio element, which allowed me to implement the animation and sound, respectively. This presented a nice challenge though: I could handle the animations on my own using canvases and javascript, but I had to look for the sound effects. Luckily, I found a great collection of 8-bit explosion sounds and some great music at http://www.freesound.org.

Once the add-on was ready, I created a quick website where players could submit their scores, and submitted my entry in the contest. A few months passed, and Mozilla announced the winners, awarding Destroy the Web the prize for Best Game & Entertainment add-on.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s