Planetary Defense

While searching on the internet for attractive HTML5 canvas programs, I came across Core by Hakim El Hattab. I liked both the gameplay and, more importantly, the visual style of it. Hakim is talented and I decided to take advantage of his work. Thanks to what appears to be a very liberal copyright in the code, I was able to start my project using his source files. Hopefully he will contact me if this was not appropriate.

I chose to start with an existing game because this is my first attempt at writing JavaScript for the HTML5 canvas. I have written JavaScript code before but never where I needed this much organization and complexity and never with a canvas. My many thanks to Hakim for helping me past the initial learning curve of these technologies.

My memory of the game was that it worked a little bit like the arcade console game Missile Command. I remembered wrong according to this YouTube video of the original Atari version being played. In my version, your bullets will explode at the point where you targeted them. In the Atari game, a direct hit is needed. Now that I’ve noticed this difference, I think I like my version better.

I used the more modern and attractive style from Core while adding my own tweaks to the game.

Planetary Defense is a game where you protect your planetoid from incoming attackers. You shoot from a satellite in orbit and your projectiles explode where you shoot them. The resulting explosions will destroy incoming bombs. The explosion from an incoming bomb will also destroy other bombs. The crux of the game is in not shooting your own planetoid. When a bomb or your own projectile hit the planetoid, they will explode but they will also damage your planetoid. If it is damaged enough to be destroyed, the game is over.

I have added a “second level” to the game recently. After reaching an undisclosed milestone in the game (around 60 incoming missiles destroyed), possible with a little effort, the level will change and the satellite will orbit a small moon that is orbiting the planetoid. This presents more of a challenge because both the moon and the planetoid can be damaged by bombs and projectiles and it is difficult to choose when to shoot.

Other Features

Each shot will result in the satellite gun heating up. Or if you want to think of it another way, it’s battery loses some power. In either case, if the gun reaches a critical point, it will be unable to shoot again for a short time. The recharge after each shot is fairly quick so taking shots slowly will not make it reach this critical point. There is also a shield for emergency use. Pressing the spacebar or touching with two fingers will activate the shield for a very short time. This will destroy any enemy that touches it. It will also make the gun unusable for a fairly long time.

The files for the game are listed in a manifest file. Browsers will cache them so that the game can be played offline. Although the game is not very playable on the small screen of a smart-phone, it might be great on a tablet. I have not tested it on one yet.

I left the original copyright in the JavaScript code. If there is no copyright in a file or if the code was written by me, it is still free to use in any way by anyone.

Give it a try.

Publication

Planetary Defense was translated to German and published in GeeDisplay Magazine #7 in February 2012.

Planetary Defense was accepted by Chrome Experiments at www.chromeexperiments.com/detail/planetary-defense. It is also available at HTML5 Games.

Planetary Defense was included as a featured HTML5 game during the beta test of the Dolphin mobile browser in September 2012.

Update May 22, 2012

The game was change a while back to have three levels. The second level is now a continuation of the first with the addition of incoming missiles that aim themselves towards the satellite. If the satellite is hit, the gun is inoperable for a short time. the third level is now the level with the moon, as is seen in the screenshot above.