HTML 5 Game Development: Working with the Scene Object

Part of the 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.
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

SERIES
HTML5 Game Development For Dummies Cheat Sheet

Advertisement

Inside Dummies.com