That's it for today! We hope you liked the workshop and you are hungry for more.
Putting together everything you learned so far and a bit more, you could do much bigger things. How about a game? At least you've earned yourself a play!
Just check it out and stop believing that programming an interactive game is a hard thing to do.
Open the game.
Play the game. Think "Yeah, that would have been impressive—if this were 1970."
Read through the code and the comments.
With some extremely trivial computations, you can produce an interactive game experience. Or some similarly engaging object, such as a simulation of something (physics, life). Isn't that cool?
To deepen your understanding of the Invaders program, we try to customize it and add some features.
Perform some or all of the modifications described below, and test (at every little step) whether things still work as expected.
At any time, you can reload the page (Ctrl-R / Cmd-R) to go back to the starting program. To undo just your last few changes, use the Ctrl-Z / Cmd-Z key in the editor. If at any point, you have a program that you feel you might want to return to, use the 'Save' control at the top of the page to store it. You can then recall it with the 'Load' control (note that this will overwrite your current program).
When stuck, don't sit around grinding your teeth. Ask the coaches for help early and often.
If you have your own ideas for improvements to the game, or, for the more adventurous, for a completely different game you'd like to write—go right ahead. The ideas below are merely suggestions.
A) So, for one thing, this game is really easy.
What every self-respecting arcade game does is increase difficulty
over time. Add a 'level' counter that gets updated somehow in
the frame function, and that influences the chance that a
new invader will appear in a given turn. Display the current level
somewhere on the screen using the text function.
B) Another neat feature would be to have multiple
kinds of invaders. Make the newInvader function also add
a type property to the invader it creates, which it
randomly fills, for example like this:
function newInvader() {
var type = "normal";
if (Math.random() < 0.4)
type = "super";
else if (Math.random() < 0.2)
type = "superduper";
....
}
Then update the drawInvader function to draw different
types differently (for example, by simply giving them a different
color), and update processBullets so that non-normal
invaders have a certain chance (use Math.random again) to
survive being hit by a bullet.
C) Finally, and slightly more challenging to do, you could make the invaders move back and forth horizontally during their descent.
The tricky part for this is to decide which way to move the invaders. If you want to make them zig-zag left and right synchronously, as in the original Space Invaders game, you'll have to use the same direction for all invaders. You could keep a counter variable for this that is incremented every turn, and that, when reaching some number of turns, causes the direction in which the invaders move (also a variable) to be flipped. You then also reset the counter back to zero when the flip happens, so that after another X turns it will flip the direction again.