This is an attempt to create a side scrolling shooter that looks and sounds like a Flash game, but uses only the capabilities built into an HTML5 compliant browser.
As this is a programming experiment there is currently one level of play implemented. A second level is in-work. Use the arrow keys to move your ship around the screen and the 'z' key to fire your weapon. The Firefox and Opera browsers have been tested to provide the best gameplay experience. Google Chrome also works, but gameplay may be choppy due to workarounds needed for sound effects.
Users with no keyboard (mobile devices) can enable on-screen controls via a checkbox on the main title screen. This should at least let you attempt to play the game on a mobile - but there is no guarantee it will work.
The enemy will attack in waves of 24 ships, after each of which you will be rewarded with a bonus for the number of ships you destroy and the accuracy of your fire. Any 100% accuracy bonuses awarded are significantly higher. Yes, it is possible to get 100% accuracy in every wave. The command ship wave does not tally accuracy, so don't worry about that!
Occasionally, a destroyed enemy ship will drop a power-up module which you can collect by intercepting. These powerups will enhance your ship and make it more capable of fighting stronger enemy craft. The powerups you have collected are displayed along the bottom of the screen. When you die, you may lose one or more powerups.
There are also several cargo ships carrying valuable alien artifacts which can be retrieved for substantial point value.
You may recognize the level one theme as resembling that from the 1987 Taito arcade game "Rastan." This orchestral interpretation was created by musician Glyn R. Brown. Only a portion of his remix is heard in the game, and the whole thing is pretty cool and worth a listen. The entire Rastan remix can be found in the "c64 remixes" portion of his site.
The Level2/Endgame music is a sample from 'Penguin Planet' by Void Main. For this and more open source music tracks, visit the Open Music Project.
The intro screen background was created by artist Frank Smit. The ship artwork on the intro screen was created by artist Little Killy. The sprites for the character spacecraft were created by Lamoot. Enemy craft design by Surt() . Thanks to the artists and host of OpenGameArt.org for contributing to the world of open art.
As the page loads, the game's graphics load in a hidden division and each item calls the itemLoaded() function which resides in Loader.js. The first item to load is the splash screen which causes initialization of the canvas. Once the canvas is initialized, a progress bar can be drawn which increments as the rest of the page loads. The remaining items in the hidden division load in, and call itemLoaded() which updates the progress bar. The game's music is loaded directly as 'Audio' in the html document. The game's sound effects data is loaded in from an external PHP file at this point, in the loadGameSounds() function.
The next thing that happens is the firing of the page's onload callback. This would be the bodyLoaded() function found in Loader.js. Everything is loaded and ready to go at this point, so the title screen and initial buttons are rendered on the canvas and mouse event handlers are installed. The mouse is only used to view the instructions or start the game, after which point keyboard input is all that matters. Mouse handling code is found in Mouse.js.
We're pretty much event driven at this point, and once the user clicks the 'NEW GAME' button the function called main() is invoked. This function is found in the plunder.html main page. The main() function creates the game's sound effects which are Audio objects wrapped in a class called Sound. Code for the Sound class is found in Sound.js. This wrapper provides for multiple instances of each sound effect so that we can have, for example, three laser blast sound effects playing at the same time.
The main() function also sets up the keyboard event handlers to capture the arrow keys and the z key. Keyboard processing is found in Keyboard.js. Both keyup and keydown events are trapped so that we can have the ship auto-fire if the user holds down z.
The last thing that main() does is instantiate the LevelDirector, found in LevelDirector.js, which sets up the main render loop and timer for the game. The LevelDirector is what launches all the enemy ships at you, awards your bonuses, and transitions between waves and levels. It also ends the game when you run out of lives.
AfterEffect.js is for little explosions or graphics
that last a short duration, but don't collide with any other game objects.
Background.js handles the scrolling/repeating background image and the foreground image - which scrolls at a different rate. I borrowed the foreground graphic from this tutorial on parallax scrolling.
Collision.js contains the basic collision detection algorithm used in this game. (Simple bounding box)
Enemy.js is the class of all enemy ships in the game.
EnemyShot.js is the class of all enemy projectiles in the game.
FloatyText.js handles all of the little flashing, floating messages you get when you capture a powerup.
Laser.js The next weapon class up from the PeaShooter.
PeaShooter.js is the basic weapon that your ship starts with.
Powerup.js is the object representing the goodies that the enemy ships drop when destroyed.
Ship.js the player's ship.
Shot.js the player's projectiles.
Sortie.js a container class for a cluster of enemy ships, and what time they should be launched at. Used by LevelDirector.
July 20, 2010
June 16, 2011
All source code is open license, reuse freely for any purpose. Please cite DougX.net. Questions or comments? EMail email@example.com