HTML 5 Game Development: Working with the Scene Object - dummies

HTML 5 Game Development: Working with the Scene Object

By Andy Harris

Part of HTML5 Game Development For Dummies Cheat Sheet

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
methods.
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,
top)
Utility function for setting the size and position at the same
time.
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.