Spaceship! code at GitHub
I cloned the code for Spaceship! at GitHub to facilitate easier development by anyone interested. I'll push any future improvements I make there and consider my personal subversion repository dead.
Spaceship!
When Gary announced Outfox back in 2008, all manner of ideas for using speech and sound in the browser popped into my head. I've always had the boring demos (i.e., for adults) at Maze Day, so I decided to work first on a fun, somewhat educational, self-voicing browser game for the 2009 rendition. After all, keeping the mostly under-13, soda drinking, pizza eating, game playing clientele happy is always priority #1 at Maze Day.
The result is Spaceship!, a JavaScript game for Firefox built using Creative Commons licensed music, sound, speech, and graphics; the Dojo toolkit; and the Outfox add-on. In the primary portion of the game, the player fires shots at a grid of tiles trying to hit enemy ships. When the player runs out of ammo, he or she plays a set of minigames in an attempt to earn more shots. Of course, hazards and bonuses abound to keep things interesting.
A text description is nice, but you're better off watching the gameplay video below to really understand what I'm jabbering about. Or, better yet, grab Outfox and Firefox 3 and play it yourself online at http://spaceship.mindtrove.info.
What a great exercise this turned out to be! The payoff has been manyfold:
- I learning a ton more about Dojo and writing custom widgets.
- I developed some interesting MVC techniques for aural+visual event driven apps in Dojo. I hope to blog about these.
- I built some nice, reusable Dojo components for future browser games.
- I got to show off client-side music, sound, and speech in Firefox with pure JS. Maybe this will spur development of other audio apps?
- I drummed up some interest in extending Spaceship! with new minigames. Hopefully more coming soon.
- My wife was entertained. Yes, she will actually ask to play the game if she sees me working on it.
- I had lots of teachers ask when the game will be online at Maze Day. Well, here it is, a month later.
- And, most importantly, a steady stream of kids (and adults) got to play it at Maze Day. Hopefully even more can enjoy it now online.
If you try it out, leave a comment. It's new, there are bugs, and there is room for improvement. But anything you report will help in making the game better.
I owe many thanks to the artists who made their wonderful images, songs, and sounds available under open licenses. Their names appear in the Credits section off the main game menu. Be sure to check them out.
Oh, and of course the game code itself is BSD-licensed. Grab the code from http://svn.mindtrove.info/spaceship http://github.com/parente/spaceship if you're feeling adventurous.
Tidbit: doh.robot initialization
The doh.robot module for Dojo clicks a special text field inserted into the top-left of the test page during its initialization. If you obscure this magic field, the robot hangs.
If you're writing your test cases separate from the page under test (always a good idea), dojo.robotx craftily hides the iframe containing the page to test until the robot is ready. If you're not using dojo.robotx (my constraint), you must be careful to avoid that magic text box in a similar fashion.
Dojo 1.1 Charting
Dojo has a charting module capable of rendering a few different types of graphs. Here's an example rendering of one sine and cosine period in SVG.
The code is straightforward:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dojo 1.1 Charting Example</title> <script type="text/javascript" src="/scripts/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.themes.PlotKit.blue"); dojo.addOnLoad(function() { var period = 2 * Math.PI; var tick = Math.PI / 180.0; var step = 5*Math.PI / 180.0; var id = 'chart_area'; var chart = new dojox.charting.Chart2D(id); chart.setTheme(dojox.charting.themes.PlotKit.blue); chart.addAxis("x", {min: 0, max: period, majorTickStep: tick*30, minorTickStep: tick*10, minorLabels: false}); chart.addAxis("y", {vertical: true, min: -1.01, max: 1, majorTickStep: 0.5, minorTickStep: 0.1, minorLabels: false}); chart.addPlot("default", {type: 'Lines'}); chart.addPlot("grid", {type: "Grid", vMinorLines: true}); var series = {'sin' : [], 'cos' : []}; for(var i = 0; i < period; i+=step) { series.sin.push({'x' : i, 'y' : Math.sin(i)}); series.cos.push({'x' : i, 'y' : Math.cos(i)}); } chart.addSeries('sin', series.sin); chart.addSeries('cos', series.cos); chart.render(); }); </script> </head> <body> <div id="chart_area" style="width: 100%; height: 400px;"></div> </body> </html> |
Basic animations are possible by invoking chart.updateSeries(name, data);. The result is pretty smooth in Safari, but eats a ton of CPU if done with a delay under 50ms. There also appears to be a lack of support for controlling updates to other chart features such as axes in the 1.1 version.
Other features I have yet to find (possibly because they don't exist) include labels for axes, legends, chart titles, and a simple way to set event handlers for various chart components and actions.