HTML5 Game Development For Dummies Cheat Sheet - dummies
Cheat Sheet

HTML5 Game Development For Dummies Cheat Sheet

From HTML5 Game Development For Dummies

By Andy Harris

Today’s technology is incredibly capable, but it can overwhelm a beginning game programmer. You need a way to learn to build games in HTML5 without drowning in details, or spending a ton of money. This Cheat Sheet provides a handy reference for the most common HTML5 objects you’ll use in your games.

HTML 5 Game Development: Working with the Scene Object

The primary element of any simpleGame game is the Scene object. Do not change the Scene’s properties directly. Instead, use the appropriate method to manage the scene.

touchable Indicates whether the scene is running on a touch (mobile)
interface. Returns true or false.
canvas A reference to the canvas object created by simpleGame. Can be used to view canvas
properties, but modification should be done with scene
height Indicates the height of the canvas. Normally used for
border-checking. Change with the setSize() method of the Scene object.
width Indicates the width of the canvas. Normally used for
border-checking. Change with the setSize() method of the Scene object.
top Indicates the Y position of the top of the canvas in the page.
Change with the setPosition() method of
the Scene object.
left Indicates the position of the top of the canvas in the page.
Change with the setPosition() method of
the Scene object.
start() Begins the timing loop. Normally the last line of the page’s
init() function.
clear() Erases the scene with the current background color. Called at
the beginning of the page’s update() function.
stop() Halts the timing loop, pausing the game.
setSize(width, height) Changes the size of the scene to the indicated width and height.
setPos(left, top) Moves the upper-left corner of the scene to the indicated left and top pixels.
setSizePos(width, height, left,
Utility function for setting the size and position at the same
setBG(color) Changes the background color of the scene. Can be any valid
HTML color string: “black”,
“#FF00CC”, and so on.
hideCursor() Hides the default mouse cursor. Frequently used in the init() method of
games that allow mouse input.
showCursor() Displays a cursor that was hidden with hideCursor().
getMouseX() Returns the mouse’s X position on the
game canvas (not the overall web page). Virtual joystick must be
enabled to get mouse positions on a touch input device.
getMouseY() Returns the mouse’s Y position on the
game canvas (not the overall web page). Virtual joystick must be
enabled to get mouse positions on a touch input device.

Keeping Your Game Moving with the Sprite Object

As a game developer, remember that the Sprite object is the basis for moving game elements. Do not change the properties directly, but use the appropriate method to manipulate the sprite as follows:

  • spriteName = new Sprite(scene, imgFile, width, height);: Create an instance of the Sprite class called spriteName with the indicated scene, image file, and size.

  • Canvas: Refers to the canvas element created by the sprite’s scene.

  • width, height: The width and height of the Sprite object in pixels.

  • cwidth, cHeight: The width and height of the canvas containing the sprite.

  • x, y: Position of the center of the sprite.

  • Dx: Delta-X, or change in X. Describes how the sprite will move in the X axis. Positive values indicate movement to the right.

  • dy: Delta-y, or change in Y. Describes how the sprite will move in the Y axis. Positive values indicate movement downward.

  • speed: Displays the current speed of the sprite in its current direction of travel.

  • changeImage(imageFile): Changes the image file to the file indicated by imageFile. Used for a simple form of animation.

  • setImage(imageFile): Another name for changeImage().

  • update(): Draws the sprite’s image on the scene based on the current image, size, imgAngle, X, and Y properties. Normally called late in the page’s update() function.

  • hide(): Hides the sprite. Sprite position and angle are still calculated, but the sprite will not be drawn, nor will it collide with other sprites.

  • show(): Reverses the hide() method, making the visible appear and respond to collisions.

  • report(): A utility method for displaying the position, dx, dy, speed, and angle values of the sprite to the programmer’s console. Useful for debugging.

  • setPosition(X, Y): Sets the center of the sprite to the coordinate specified by X and Y.

  • setX(x), setY(y): Sets an individual coordinate to the specified value.

  • setDX(newDX), setDY(newDY): Changes the DX or DY properties to the indicated values. Setting DX to 5 causes the sprite to move 5 pixels to the right every frame until DX is changed again (directly or through other motion methods).

  • changeXby(xChange), changeYby(yChange): Moves the sprite the indicated value in X or Y, but does not make a permanent change to DX or DY. After the current frame, the sprite will move based on its current settings of DX and DY.

  • setSpeed(speed): Changes the sprite’s speed to the indicated value. The speed and moveAngle values are used together to determine the DX and DY properties of the sprite. You can set the speed to a negative value to make the sprite move backward.

  • getSpeed(): Returns the current speed based on the sprite’s current DX and DY values. Can be more accurate than using the speed property.

  • changeSpeedBy(diff): Changes the speed by the diff amount. Positive values speed up the sprite in the current moveAngle direction, and negative values slow the sprite down. It’s possible to have a negative speed. You may want to limit the minimum and maximum speeds to keep the game under control.

  • setImgAngle(degrees): Immediately changes the angle at which the sprite is drawn to the indicated value. Does not modify the motion of the sprite.

  • changeImgAngleBy(degrees): Modifies the sprite’s image angle. Use this method repeatedly to gradually change the angle at which a sprite is drawn.

  • getImgAngle(): Used to return the sprite’s current imgAngle. Returns a value in degrees.

  • setMoveAngle(degrees): Immediately changes the angle at which the sprite moves. Used in conjunction with speed to determine new DX and DY values for the sprite. Does not modify the appearance of the sprite.

  • changeMoveAngleBy(degrees): Modifies the sprite’s movement angle. Use this method repeatedly to gradually change the motion angle of a sprite.

  • getMoveAngle(): Returns the sprite’s current motion angle in degrees.

  • setAngle(degrees): Immediately sets both image and movement angles to the same value. Use when the sprite travels in the direction it is facing.

  • changeAngleBy(degrees): Modifies both the image and movement angles. Use this method repeatedly to gradually change the sprite’s direction.

  • turnBy(degrees): Another name for changeAngleBy().

  • addVector(degrees, force): Adds a force vector to the sprite at the indicated angle and force. This extremely powerful method can be used to add physics-based behaviors like gravity, orbits, and skidding. Modifies only the motion angle.

  • setBoundAction(action): Change the boundAction of the sprite to one of the following: BOUNCE, WRAP, STOP, DIE, or CONTINUE.

  • checkBounds(): If you have a boundary behavior that is not covered by one of the default actions, you can write your own checkBounds() method. You are responsible for checking all boundary conditions, and the default actions will no longer be checked for this sprite. It is never necessary to call the checkBounds() method. It is called automatically by the sprite’s update() method.

  • collidesWith(sprite): Returns true if this sprite’s bounding rectangle is overlapping the rectangle of the parameter sprite. Returns false if the sprites are not overlapping or either sprite is hidden.

  • *distanceTo(sprite): Returns the distance (in pixels) between the center of the current sprite and the center of the parameter sprite. Not affected by the sprite’s image size or angle.

  • angleTo(sprite): Returns the angle (in degrees) between the center of the current sprite and the center of the parameter sprite.

  • loadAnimation(width, height, cellWidth, cellHeight): Indicates that the image associated with a sprite is actually a sprite sheet. The width and height parameters indicate the width and height of the sprite, and the cellWidth and cellHeight determine the width of a single animation cell.

  • generateAnimationCycles(): Generates a series of animations based on the sprite sheet. Default behavior presumes that each row is a state and each column is a frame of animation within that state.

  • renameCycles(cycleNameArray): Renames each cycle. Each element of the array should be a human-readable name for the corresponding state.

  • setAnimationSpeed(speed): Sets the delay used when the library flips through the animation frames. Higher values cause slower animations.

  • setCurrentCycle(cycleName): Changes the animation cycle to the indicated value. Use one of the names defined with the renameCycles() method.

  • playAnimation(): Begins the animation, which will continue until paused.

  • pauseAnimation(): Pauses the current animation.

HTML5 Game Programming: Making Noise with the Sound Object

You use the Sound object to create two sounds per object — an MP3 and an OGG — to ensure the sound effects in your game will work on most HTML5-compliant browsers.

sndElement = new Sound(src) Creates a new Sound object called
sndElement based on the src
file. This file should be in MP3, OGG, or WAV format.
play() Plays the current sound.
showControls() Displays the HTML5 sound control panel with a volume control
and scrubber. Can be useful for iOS devices that require manual
sound playback before code-based playback.

HTML5 Game Development: Keeping Track with the Timer Object

The Timer object will help you keep track of time in your games. You can have as many timers as you wish in your game.

timerObj = new Timer() Creates a new Timer object called
timerObj. The counter automatically
begins counting when it is created.
reset() Resets the timer so it begins counting at zero.
getElapsedTime() Returns the number of seconds since the timer was created or

HTML5 Game Programming: Adding a Touch with the Virtual Joystick Object

Create a Joystick object whenever you think your game may be used on touch devices. The scene’s getMouseX() and getMouseY() methods will respond to touch input.

joyName = new Joy() Creates a new Joystick object called
getMouseX(), getMouseY() Gets the X and Y position of the mouse if the user is touching
the screen. Returns screen coordinates, not coordinates in the
scene. Typically, you want to use the scene object’s getMouseX() and getMouseY() methods
getDiffX(), getDiffY() Returns how far the user’s finger has moved from the initial
touch position. Modify these values to get joystick-like
virtKeys = true; If you create a variable called virtKeys in your main code and set it to true before building a joystick object, the
user can drag up to trigger the up arrow key, down to trigger the
down arrow, and so on.

Adding Tilt with the Virtual Accelerometer Object

An HTML5 game programmer can use an accelerometer (the Accel object) to read tilt and movement input on supported devices, such as tablets and phones.

accelName = new Accel() Creates a new Accel object called
getAX() Returns rotation around the X axis as
a –1 to 1 value (often used to modify DY).
getAY() Returns rotation around the Y axis as
a –1 to 1 value (often used to modify DX).
getAZ() Returns rotation around the Z axis
(rotating the device like a steering wheel). Typically, the getAY() also returns suitable values for this
type of input, so getAZ() is rarely
getRotX(), getRotY(), getRotZ() Returns the current change in rotation around each of the axes.
Normally, the get() methods are more

HTML5 Game Development: Adding Buttons with the GameButton Object

If your game only allows keyboard input, users with touchscreen devices may not be able to play. Use the gameButton object to add touchscreen-supported buttons.

buttonName = new
Creates a GameButton object called
buttonName displaying the label value.
The label value can include HTML code for more interesting
setPosition(x,y) Sets the button’s upper-left corner to the indicated (x,y) coordinates. The coordinates are for the
page, so buttons can be placed on the game scene or elsewhere on
the page.
setSize(width, height) Changes the button’s size. You may need to experiment to find
the optimal button size for easy play without obscuring the
isClicked() Returns true if the button is currently clicked and false if it
is not. Provides an easy way to read the button’s status in the
game loop.