Although their use is slowly fading due to society’s increased reliance upon computers, the ballpoint pen is still used on a daily basis by most people in the United States. What is now an inescapable piece of disposable technology began its life as nothing more than an expensive and seemingly short-lived fad. Popular media accounts from the mid-1940s track the ballpoint pen’s rapid initial increase in popularity followed by its similarly precipitous drop. After this initial popularity spike the media chronicled the ballpoint pen’s gradual rise from novelty to ubiquity.
On a trip to Argentina in the summer of 1945 a businessman from Chicago named Milton Reynolds discovered a fascinating pen that he was certain could be a commercial success in the United States. Reynolds brought some of the pens back to the United States with him, and within a few months they were being mass produced by his newly formed company.
When I began experimenting with the HTML5 canvas I decided that I might learn more if I actually wrote a program that took advantage of the functionality. This led me to create a clone of the classic Space Invaders game. Since I was primarily concerned with learning the canvas element, the Space Invaders clone was written as a monolithic application. Upon completing Space Invaders I wanted to create another game and further refine my abilities. However, in order to take advantage of the code that I wrote for the Space Invaders clone I would have first had to perform significant refactoring, so I decided to just start from scratch and write generalized classes that I could easily reuse.
After finishing my HTML5 version of Space Invaders, and then modifying it for the iPhone, I decided to attempt generalizing the techniques that I developed. I first crafted a generalized JavaScript class for creating and managing sprites. Then, I created a class to manage the game board. The game board class wraps around the sprite class and handles canvas creation, collision detection, score keeping, and other general tasks. I will write a more detailed description of these items latter, the real reason you are here is to see the results of the final step. With the sprite and game board management methods complete I applied them toward the creation of an actual game.
As a programing experiment I decided to see if I could modify my HTML5 Space Invaders Clone in order to make it work on an iPhone. I was primarily interested in taking advantage of the tilt sensor using JavaScript. It was not too difficult, and the defender in the game moves from side to side based upon the phone's rotation. Below is a link to play the game, and after that is the relevant code (after the jump). It has been optimized for the iPhone and thus does not work as well on a PC.
I wanted to learn more about HTML5, especially the new canvas tag, so I came up with a little project. I decided to develop a completely web-based version of the classic Space Invaders game. It turned out well enough that I thought I would share it.
Christopher
