Discover new opportunities for building 2D and 3D games with HTML5

The newest iteration of HTML, HTML5 can be used with JavaScript, CSS3, and WebGL to create beautiful, unique, engaging games that can be played on the web or mobile devices like the iPad or Android phones. Gone are the days where games were only possible with plugin technologies such as Flash and this cutting-edge book shows you how to utilize the latest open web technologies to create a game from scratch using Canvas, HTML5 Audio, WebGL, and WebSockets. You'll discover how to build a framework on which you will create your HTML5 game. Then each successive chapter covers a new aspect of the game, including user input, sound, multiplayer functionality, 2D and 3D graphics, and more.

• Aims directly at a new way to develop games for the web through the use of HTML5
• Demonstrates how to make iOS and Android web apps
• Explains how to capture player input; create 3D graphics; and incorporate textures, lighting, and sound
• Guides you through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL, and WebSockets
• By the end of this invaluable book, you will have created a fully functional game that can be played in any compatible browser or on any mobile device that supports HTML5>

• US (amazon.com)
• UK (amazon.co.uk)
• Germany (amazon.de)
• France (amazon.fr)
• Japan (amazon.co.jp)

The protagonists come in the form of a small flock of social media heroes, controlled by targets set by the player and influenced by various objects on the map. They are also somewhat autonomous as they use simple flocking mechanisms to stay close together and move as a group.

With the exception of the music, it uses only the Canvas element and regular DHTML and another goal was that I wanted it to feel "fluid" and be able to compete with similar Flash games, even when there was a lot going on on the screen. I think it meets this goal just fine, at least when played on a moderately sized box. I also know there are some decent optimizations to be done in there once I get around to it (ie. the explosions could be prerendered rather than dynamically created as they are now, etc.) On the sound side there is currently only background music. I had some sound effects going on with SoundManager2, but it's giving me a bit of trouble, so I've sort of abandoned them for now. Also, apart from the vortex sprite and the prerendered text, all the graphics are created at runtime with Canvas drawing.

The music is by friend_kami and brainworks, all released under Creative Commons licenses and found at SectionZ.

Ok, get on with it!

6-50 diggs: Antiheroes, similar to your heroes, but red (and evil!) Spawn in flocks of 2-7 antiheroes. These guys are small and weak but will nevertheless actively and tirelessly hunt your heroes.

51-500 diggs: Predators, larger and more dangerous. Coming in packs of 1-3 predators, these also actively hunt your heroes but are easier to out maneuver. Their larger size more than makes up for this, however.

501-infinity diggs: Biggies. Huge, slow and not very bright. These enemies wander around with no aim, just bouncing about the level. Are tougher to kill than the others, but move slowly.

The levels

Blocks: These are simple impassable structures that block your path and/or divide the map in smaller sections.

Directors: When you come in the range of a director, your heroes will feel a sudden urge to move in the direction of the arrow. They come in 4 flavours: up, down, left and right.

Attractors: Much like the directors, these also affect your heroes' senses of direction but rather than make them move in a specific direction, your heroes are compelled to move towards the center of the attractor. Be careful as it can be hard to escape once you've become trapped.

Repulsors: The twin sibling of the attractor, the repulsor does the exact opposite and make your heroes move away from the point of repulsor.

Zapper: High powered electrical menaces that make short work of your magnificent heroes. Come within range of one of these bad boys and one of your heroes is sure to be toast. Fortunately it takes a second before the zapper is ready again.

Vortex: Gravitational pull will drag your heroes to the midst of these miniature black holes where nothing and everything meet and the very fabric of spacetime is torn apart (that includes your heroes).

Quick tips

• The enemies go for the collective (average) center of your heroes. You can exploit this by spreading your heroes out over the entire map.
• Even if you can't move through blocks, you can still shoot through them.