Ready-to-go game shell
initevent which is triggered on page load
renderevent which is called every frame or as needed
tickevent that is called at uniform intervals
resizeevent that gets called whenever the game changes size
var shell = require"game-shell"var contextplayer_x = 250player_y = 250//Bind keyboard commandsshellbind"move-left" "left" "A"shellbind"move-right" "right" "D"shellbind"move-up" "up" "W"shellbind"move-down" "down" "S"//Fired when document is loadedshellon"init"var canvas = documentcreateElement"canvas"canvaswidth = 500canvasheight = 500shellelementappendChildcanvascontext = canvasgetContext"2d"//Fired once per game tickshellon"tick"console.log"Tick"ifshellwasDown"move-left"player_x -= 1ifshellwasDown"move-right"player_x += 1ifshellwasDown"move-up"player_y -= 1ifshellwasDown"move-down"player_y += 1//Render a frameshellon"render"contextfillStyle = "#000"contextfillRect0 0 500 500contextfillStyle = "#f00"contextfillRectplayer_x-10 player_y-10 20 20
npm install game-shell
element- The DOM element to attach all input listeners to. Can be either an element, a string representing the id, the CSS class or the element class. (defaults to creating a new element and adding to
tickRate- The time between ticks in milliseconds (default
frameSkip- The maximum alloted time between render updates (default
bindings- A default set of key bindings
fullscreen- A flag which if set attempts to put the game in fullscreen mode
pointerLock- A flag which if set attempts to active pointer pointer lock (default true for fullscreen, false otherwise)
sticky- If set to true, then keep trying to grab fullscreen/pointerLock even if user escapes out
This event is fired once the document is loaded and it is safe to access the DOM
Called each time the game state needs to be updated. This is not tied to rendering rate.
Called when a frame is redrawn. The optional parameter
frame_time is a floating point value between
1 which measures the fractional amount of frames since the last time the game was ticked. This can be used to create smoother sub-tick animations if desired.
Triggered whenever the element is resized.
w is the new width and
h is the new height of the element.
bind() is called.
unbind() is called.
Returns true if the key was ever down during the last tick
Returns true if the key was ever up during the last tick
Returns the number of times a key was pressed since last tick
Returns the number of times a key was released since last tick
The x/y coordinates of the mouse relative to the element
The x/y coordinates of the mouse on the previous frame.
The amount the window scrolled due to mousewheel movement. Represented as 3D array, the units are in pixels.
Binds a virtual key to one or more physical keys. This is added to all previous bindings.
Unbinds a virtual key, removing it from the bindings object
A list of all physical key names which are supported
An object which lists all of the physical keys which each virtual key is bound to. This can be used to save key state
Sets the threshold for time to skip the game
A count of the total number of ticks
A count of the total number of frames rendered
A weighted average of the time required to update the game state in milliseconds
A weighted average of the time required per frame in milliseconds
The time the simulation was started at in milliseconds
If set, then the game is paused and no tick events are fired. You can pause the game by assigning to this variable:
//Pause the gameshellpaused = true//Unpause the gameshellpaused = false
Sets or tests whether the game is fullscreen
If set try to continuously reacquire fullscreen
Sets or tests whether the game has a pointer lock
If set try to continuously reacquire pointer lock
The DOM element associated with the shell
The width of the element contained by the shell
The height of the element contained by the shell
If set, trap event default behaviors. (Good for fullscreen apps, can be annoying for some embedded applications). Default set to
If set, don't propagate events like scrolling. Default
(c) 2013 Mikola Lysenko. MIT License