G5

.js A simple yet powerful HTML5 game engine
"G5" derives from a combination of "Game" and "HTML5", I'm still searching for a proper name. G5 provides:

Methods: Game Loop

start G5.start()
Starts the game loop.
Every function registered through G5.draw and G5.update is iterated and executed.
We use window.requestAnimationFrame for the draw part and window.setInterval for the game logic.*

* See: requestAnimationFrame is not your [logic's] friend
stop G5.stop()
Pauses the game loop.
See G5.start for more info.
step G5.step([n])
n Amount of steps to perform, default = 1

Iterates the draw and game logic n times each call.
See G5.start for more info.
toggle G5.toggle()
Toggles between start and stop.
Returns true or false indicating the new status.
draw G5.draw(fn [, zIndex])
fn Any function drawing stuff in your game
zIndex Similar to CSS, the depth order in which the function should be executed (drawn)

Registers a new draw function in the game loop and returns a reference object.
See G5.start for more info.
update G5.update(fn)
fn Any function updating stuff in your game

Registeres a new update function in the game loop and returns a reference object.
fn is called with a parameter delta.

See G5.start for more info.
detach G5.detach(ref)
ref A reference returned from either G5.draw or G5.update.
You can also pass multiple references at once without wrapping them in an array. (e.g. G5.disptach(ref1, ref2, ref3))

Removes a function from the game loop.

Methods: Preparation

ready G5.ready(callback)
callback A function to execute when the DOM has loaded.
preload G5.preload(data [, callback] [, opts])
data The data to preload, right now images and audio files are supported
callback A function to execute when all data has been preloaded
opts An object containing a few more options.
Right now opts.ms defines the interval at which the internal preload check should be performed
and opts.step a step function which is called everytime another file has been preloaded.
The step function also takes the progress between 0 and 1 as the first parameter. This allows for easy loading screen setups.

Preloads image and audio files, tracks the progress and fires a callback.
include G5.include(paths [, callback])
paths One or multiple paths to javascript files
callback A function to execute when all files have been includeed and loaded

Includes a stack of javascript files and fires a callback.

Methods: Event-Listening

listen G5.listen(input, fn_down [, fn_up])
input One or multiple characters, patterns or special inputs. See below for more details.
fn_down A function to call when one of the specified inputs is being pressed
fn_up A function to call when one of the specified inputs is being released

Registers eventlisteners on the fly.
The input parameter takes 3 different types of values, for example:

abcdefg Registeres an eventlistener for the a, b, c, d, e, f, and g key
a-g Achieves the same as above
[special_input] Where [special_input] is one of the following:
  • [mouse_left]
  • [mouse_middle]
  • [mouse_right]
  • [enter]
  • [space]
  • [tab]
  • [left]
  • [right]
  • [up]
  • [down]

They can be combined in any way.

fn_down and fn_up are both called with the corresponding key as the first and the original event as the second parameter.

Returns a reference object for G5.ignore.
ignore G5.ignore(data)
data Either a reference object or a string in the same format specfied for the input parameter in G5.listen

Removes the event listener callbacks from the specified reference or input.
Note that not using a specific reference results in removing all (multiple) callbacks attached to the specified input.
is_keydown G5.is_keydown(key)
key The key in question

Returns either true or false depending on the key's status.
is_mousedown G5.is_mousedown(btn)
btn The button in question ("left", "right" or "middle")

Returns either true or false depending on the button's status.

Methods: Utilities

animation G5.animation(objects, [, property] [, easing] [, callback] [, options])
Description comming soon(ish).
rand G5.rand(min, max [, toFloat])
min The min value of the random number
max The max value of the random number
toFloat If set to true the random number will be of type float, default = false

Generates a random number with a given range.
clamp G5.clamp(val, min, max)
val The value to clamp
min The min value val can reach
max The max value val can reach

A combination of Math.min and Math.max.
"clamps" a number between a given range.
type_of G5.type_of(v)
v A variable to get the type from

An alternative to the type_of operator.
Gives a more precise result:

typeof [] === "object"
G5.type_of([]) === "array"
fullscreen G5.fullscreen(elem [, opts])
elem The element to display in fullscreen mode
opts An object with additonal options.

opts.resize

Wether or not to resize the specified element.
Can either be css or attribute, which defines the method used for reszing the element, default = "css".

opts.aspect

Whether or not to keep the aspect ratio when resizing the specified element.

Toggles the fullscreen mode for all browsers.
Note that this function must be triggered by a user interactive event.

Object Methods

Collision G5.Collision

Methods:

AABB(    
  x0, y0,
  w0, h0,
  x1, y1,
  w1, h1
)
x0 The x-coordinate of the first rectangle
y0 The y-coordinate of the first rectangle
w0 The width of the first rectangle
h0 The height of the second rectangle
x1 The x-coordinate of the second rectangle
y1 The y-coordinate of the second rectangle
w1 The width of the second rectangle
h1 The height of the second rectangle

Returns false if no collision is present,
otherwise it will return a function fix which returns a collision response in form of a velocity vector.

Simple 2d collision detection with collision response. Only AABB for now.
I might add an alternative per-pixel collision detection later.
Cookie G5.Cookie

Methods:

set(
  name,
  value
  [, days]
)
name The name of the new cookie to set
value The value of the cookie
days The amount of days the cookie should last

unset(name)
name The name of the cookie to remove (unset)

get(name)
name The name of the cookie to retrieve the value from

A simple cookie handling object.
Support G5.Support

Methods:

canvas
webgl
websocket
webworker
audio
audioContext

Provides a bunch of test functions for common HTML5 technologies.
Returns either true or false.

Constructors

Ticker G5.Ticker(fn, ms)
fn A fuction to call every ms times.
The function is also called with a parameter n which represents the number of calls remaining specified through start(n) or stop(n).
ms The milliseconds for the ticker interval

Methods:

start([n]) Starts the ticker.
n Ends the ticker after n ticks

stop([n]) Stops the ticker.
n Stops the ticker after n ticks

status() Returns the progress between 0 and 1 until the next tick is reached.

An advanced timeout function.
Scene G5.Scene(w, h [, context], opts)
w The width of the canvas element (scene)
h The height of the canvas element (scene)
context Specifies the context to retrieve from the canvas element, default = "2d"
opts An object with additonal options.
opts.zIndex defines the CSS z-index value.
opts.parent defines the parent element to append the canvas to, default = document.body.

Creates a new canvas element, appends it to an element and returns the context.
The canvas property of the context also has an additional value zIndex. It is synced with the canvas' CSS z-index property.
Buffer G5.Buffer(w, h [, context])
w The width of the canvas element (scene)
h The height of the canvas element (scene)
context Specifies the context to retrieve from the canvas element, default = "2d"

Creates a new canvas element and returns the context.
Image G5.Image(src, callback)
src The image source path
callback A function to call when the image has loaded

It's basically the same as new Image() but with parameters, so we don't have to create a new line to set the source.
Returns the image object.
Vector2 G5.Vector2([x][, y])
x The x value of the vector, default = null
y The y value of the vector, default = null

Methods:

add(v) Basic addition with the instance vector
subtract(v) Basic subtraction with the instance vector
divide(v) Basic devision with the instance vector
multiply(v) Basic multiplication with the instance vector
dot(v) Returns the dot product from the instance vector and v
scale(s) Multiplies both values of the instance vector by s
diff(v) Returns the difference between the instance vector and v
slope(v) Returns the slope value between the instance vector and v
angle(v) Returns the angle between the instance vector and v
length(v) Returns the length between the instance vector and v
getX(v, y) Returns the x value in relation to y between the instance vector and v
getY(v, x) Returns the y value in relation to x between the instance vector and v
clone() Returns a new instance of the current instance
Spritesheet G5.Spritesheet
Description comming soon(ish).

Static objects and variables

$_GET G5.$_GET
An object containing all GET parameters.
DEG2RAD G5.DEG2RAD
Math.PI / 180
Simply converts degrees to radians (deg*G5.DEG2RAD)
RAD2DEG G5.RAD2DEG
180 / Math.PI
Simply converts radians to degrees (rad*G5.RAD2DEG)