|
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. |
Game Play
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.
- Speed increases your ship's maneuverability.
- +1 Shot increases the max shots-on-screen for your current weapon
- Doubler adds an additional canon of your ship's current weapon type
- Laser a more powerful main gun
- Gems award you additional points when you have a strong ship
There are also several cargo ships carrying valuable alien artifacts which can be retrieved for substantial point value.
Music & Artwork Credits
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.
The scrolling foreground image was taken from Matthew Casperson's tutorial on game development using JavaScript/Canvas.
About the JavaScript Code
This was my first significant venture into JavaScript exceeding a few dozen lines, and as such I make no claim that this is polished, correctly written JavaScript. But it works, and if you're interested I hope it's not too hard to follow. I'll offer a quick rundown of the general flow of the code here.
Program Flow
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.
Supporting JavaScript Files
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.
Serving the Sound Data
The HTML5 Audio objects are not being given their sound data by a direct url to an ogg file, rather they have their source set to a base64 encoded string that represents the sound data. This makes sure that if a sound needs to be reloaded that the browser doesn't go out and fetch the ogg from the Internet again -- the data is already available in a local JavaScript variable. The way you can serve up base64 encoded ogg from your web server using PHP is to simply use the built in base64_encode function.
Revisions
July 20, 2010
- Staged powerup loss upon death: now when you die you won't lose all your stuff.
- Pause key: now you can pause the game by pressing p
- Onscreen controls: from the title screen you can now enalbe onscreen controls for users who don't have a keyboard.
June 16, 2011
- Game now supports IE9.
All source code is open license, reuse freely for any purpose. Please cite DougX.net. Questions or comments? EMail contact@dougx.net