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 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

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.

Dismissing MPMoviePlayerViewController the right way

If you have used the MPMoviePlayerViewController to play videos in iOS, chances are you have gotten a little frustrated by its rigidness. A couple of issues I personally encountered were:

  • When presented modally, the view controller did not respect the modal transition style I had chosen for it.
  • When the video finished playing, the view controller dismissed itself automatically. I wanted it to remain visible until the user pressed the Done button.

A couple of hours of browsing for the solution to no avail, I decided to try out sort of a hack, which turned out to work great.

Continue reading

Overlaying the iPhone camera without blocking its controls

While developing FaceMerge, an iPhone/iPod app that lets you take pictures of people and merge them into funny faces, I came across a problem while overlaying the camera. I wanted to provide the user with just a bit of guidance while taking pictures within my app.

Since iOS 3.1, the UIImagePickerController class has a property named cameraOverlayView; setting a UIView of your own to this property causes it to appear on top of the camera when the picker is displayed.

I did just that: I created a custom UIView named CameraView, which had no background color and only one label on it; and then I set it to the picker. When the picker showed up, everything looked OK, but the camera controls did not respond to any touch event.

Continue reading