An actual game
- js/JareUtils.js: Additional functions for convenient math and random operations.
- js/Game.js: the class that contains the main game's code.
- js/Starfield.js: a simple and easily reusable starfield class.
- js/Entities.js: the classes for the player and the pools of bullets, enemies and explosions. There are a lot of things that can be refactored and shared among these classes, but for now I keep all the code separate in order to tweak more easily.
Enemies, explosions and bullets are pre-allocated in pools and their objects reused time and time again, to reduce memory allocations and garbage. In this case, the use of pools may be overkill and not particularly tuned for achieving the best performance, but it's a good approach to have in mind when writing more complex games.
Enemies follow Lissajous curve patterns, and get progressively harder (more life) as the level increases. I haven't bothered much with sound effects because the number of events going on will kill the audio system in most browsers.
Speaking of other browsers, this stuff works even in iOS Safari. I've only tried on an iPhone 4 and it's not really playable, but it works. Supporting mobiles browsers with their touch events is another interesting topic worthy of its own set of lessons, but given the abysmal canvas performance in these devices, it will be a while before I bother doing much with them.
At this point, you have a functional game. All the basic pieces are there: graphics, timing, input, gameplay, and menu-gameplay-game over flow. The rest is 'just' polish: sprites or models and textures, particle effects, menu and UI animations, sounds, variety of enemies, powerups, improved difficulty curve, high scores, leaderboards, achievements, rewards, and a large etc cetera of stuff that takes a lot of time and effort.