Flying Before You Walk
creating the HTML5 for a game
Loading images and drawing on canvas
Setting up your game's structure
Creating an amimated background
listening for user input
capability-wise in a short amount of time , and many people believe in
browser gaming will be one of the primary distribution mechanismas for
gmaes in the coming years.
Even though it's not an environment originally designed for creating games,
HTML5 is actually a nic , high-level environment for doing just that.
So, in lieu of trying to abstract away all the boilerplate by building
an engine immediately, you can ge right to the good stuff
a one-off game built from the ground up on HTML5 a top-down 2-D space
shooter called Alien Invasion
BUILDING A COMPLETE GAME IN 500 LINES
understaing the game
Alien Invasion is a top-down 2-D shooter game built in the spirit of the game 1942
or a simplified version of Galaga. The player controls a ship
shown at the bottom of the screen
flying the ship vertically through an endless space field
while defending Earth against an incoming hoard of aliens
on a mobile device , control is via left and right arrows shown on the bottom left of the screen and a Fire button on the right. When played on the desktop, the user can use the keyboard 's arrow keys to fly and spacebar to fire.
To compensate for all the different screen sizes of mobile devices , the game resizes
the play area to always play at the size of the device.
on the desktop it plays in a rectangular area in the middle of the browser page.
Structuring the Game
some asset loading, a title screen, sprites , user input,collision detection, and a gmae loop to tie it all together.
a few formal structure as possible . Instead of building explicit class , your take
advantage of JS's dynamic typing .
JS is weakly (or dynamically )typed because the language doesn't enforce the type of parameters .
This means you define your objects more loosely, adding methods to each object as needed, without building a bounch of base clases of interfaces.
Image asset handling is dead simple. You load a single image called a sprite sheet.
that contains all your game's sprite images in a single PNG and execute a callback
after that image loads. The game also has a single method for drawing a sprite
onto your canvas.
The title screen renders a sprite for the main title and shows the same animated starfield from the main game moving in the background
You have an object that you can treat as the current scene,
and your can tell that scene to update itself and then to draw itself. THis is
a simple abstraction that works for both title and end game screens as well as the main
part of the game.
User input can use a few event listeners for keyboard input and a few zones on your canvas to detect touch input . You can use the HTML standard method addEventListener to support both of these.
lastly, for collision detection, you punt the hard stuff and just loop over the bounding boxes of each of the objects to detect a collision. This is a slow and naive way to implement collision detection ,
but it's simple to implement and works reasonably well as long as the number of spires you check against its small.
The Final Game
ADDING THE BOILERPLATE HTML AND CSS
The main boilerplate for an HTML5 file is minimal.You get a valid HTML
file with a <canvas> element inside of a container centered on the page