Module gamejs
This module holds the essential Rect and Surface classes as
well as static methods for preloading assets. gamejs.ready() is maybe
the most important as it kickstarts your app.
gamejs.onEvent to handle events.
To get called continuously, provide a callback to gamejs.onTick.
Functions
- error()
- fatal()
- info()
- log(msg)
- onEvent(fn, scope)
- onTick(callback, callbackScope)
- preload(resources)
- ready(readyFn)
- setLogLevel(logLevel)
- warn()
Properties
Class Rect
Instance Methods
- clip(Rect)
- clone()
- collideLine(pointA, pointB)
- collidePoint(point)
- collideRect(rect)
- inflate(amount, amount)
- inflateIp(amount, amount)
- move(x, y)
- moveIp(x, y)
- toString()
- union(union)
Instance Properties
Class Surface
Instance Methods
Rect (position, dimensions)
Creates a Rect. Rects are used to hold rectangular areas. There are a couple of convinient ways to create Rects with different arguments and defaults.
Any function that requires a gamejs.Rect argument also accepts any of the
constructor value combinations Rect accepts.
Rects are used a lot. They are good for collision detection, specifying an area on the screen (for blitting) or just to hold an objects position.
The Rect object has several virtual attributes which can be used to move and align the Rect:
top, left, bottom, right topleft, bottomleft, topright, bottomright center width, height w,h
All of these attributes can be assigned to. Assigning to width or height changes the dimensions of the rectangle; all other assignments move the rectangle without resizing it. Notice that some attributes are Numbers and others are pairs of Numbers.
Example
new Rect([left, top]) // width & height default to 0 new Rect(left, top) // width & height default to 0 new Rect(left, top, width, height) new Rect([left, top], [width, height]) new Rect(oldRect) // clone of oldRect is created
Parameters
| Array|gamejs.Rect | position | Array holding left and top coordinates |
| Array | dimensions | Array holding width and height |
Rect.prototype.bottom
Bottom, Y coordinate
Rect.prototype.bottomleft
Bottom-left Position. You can assign a rectangle form.
Rect.prototype.bottomright
Bottom-right Position. You can assign a rectangle form.
Rect.prototype.center
Center Position. You can assign a rectangle form.
Rect.prototype.clip (Rect)
Return the area in which this Rect and argument Rect overlap.
Parameters
| gamejs.Rect | Rect | to clip this one into |
Returns
| gamejs.Rect | new Rect which is completely inside the argument Rect, zero sized Rect if the two rectangles do not overlap |
Rect.prototype.collideLine (pointA, pointB)
Parameters
| Array | pointA | start point of the line |
| Array | pointB | end point of the line |
Returns
| true if the line intersects with the rectangle |
Rect.prototype.collidePoint (point)
Check for collision with a point.
collidePoint(x,y) or collidePoint([x,y]) or collidePoint(new Rect(x,y))
Parameters
| Array|gamejs.Rect | point | the x and y coordinates of the point to test for collision |
Returns
| Boolean | true if the point collides with this Rect |
Rect.prototype.collideRect (rect)
Check for collision with a Rect.
Parameters
| gamejs.Rect | rect | the Rect to test check for collision |
Returns
| Boolean | true if the given Rect collides with this Rect |
Rect.prototype.height
Height of rectangle
Rect.prototype.inflate (amount, amount)
Grow or shrink the rectangle size
Parameters
| Number | amount | to change in the width |
| Number | amount | to change in the height |
Returns
| gamejs.Rect | inflated rectangle centered on the original rectangle's center |
Rect.prototype.inflateIp (amount, amount)
Grow or shrink this Rect in place - not returning a new Rect like inflate(x, y) would.
Parameters
| Number | amount | to change in the width |
| Number | amount | to change in the height |
Rect.prototype.left
Left, X coordinate
Rect.prototype.move (x, y)
Move returns a new Rect, which is a version of this Rect moved by the given amounts. Accepts any rectangle form. as argument.
Parameters
| Number|gamejs.Rect | x | amount to move on x axis |
| Number | y | amount to move on y axis |
Rect.prototype.moveIp (x, y)
Move this Rect in place - not returning a new Rect like move(x, y) would.
moveIp(x,y) or moveIp([x,y])
Parameters
| Number|gamejs.Rect | x | amount to move on x axis |
| Number | y | amount to move on y axis |
Rect.prototype.right
Right, X coordinate
Rect.prototype.top
Top, Y coordinate
Rect.prototype.topleft
Top-left Position. You can assign a rectangle form.
Rect.prototype.topright
Top-right Position. You can assign a rectangle form.
Rect.prototype.union (union)
Join two rectangles
Parameters
| gamejs.Rect | union | with this rectangle |
Returns
| gamejs.Rect | rectangle containing area of both rectangles |
Rect.prototype.width
Width of rectangle
Rect.prototype.y
Position x value, alias for left.
Surface (dimensions)
A Surface represents a bitmap image with a fixed width and height. The
most important feature of a Surface is that they can be blitted
onto each other.
Example
new gamejs.Surface([width, height]); new gamejs.Surface(width, height); new gamejs.Surface(rect);
Parameters
| Array | dimensions | Array holding width and height |
Surface.prototype.blit (src, dst, area, compositionOperation)
Blits another Surface on this Surface. The destination where to blit to can be given (or it defaults to the top left corner) as well as the Area from the Surface which should be blitted (e.g., for cutting out parts of a Surface).
Example
// blit flower in top left corner of display displaySurface.blit(flowerSurface); // position flower at 10/10 of display displaySurface.blit(flowerSurface, [10, 10]) // ... `dest` can also be a rect whose topleft position is taken: displaySurface.blit(flowerSurface, new gamejs.Rect([10, 10]); // only blit half of the flower onto the display var flowerRect = flowerSurface.rect; flowerRect = new gamejs.Rect([0,0], [flowerRect.width/2, flowerRect.height/2]) displaySurface.blit(flowerSurface, [0,0], flowerRect);
Parameters
| gamejs.Surface | src | The Surface which will be blitted onto this one |
| gamejs.Rect|Array | dst | the Destination x, y position in this Surface. If a Rect is given, it's top and left values are taken. If this argument is not supplied the blit happens at [0,0]. |
| gamesjs.Rect|Array | area | the Area from the passed Surface which should be blitted onto this Surface. |
| Number | compositionOperation | how the source and target surfaces are composited together; one of: source-atop, source-in, source-out, source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor; for an explanation of these values see: http://dev.w3.org/html5/2dcontext/#dom-context-2d-globalcompositeoperation |
Returns
| gamejs.Rect | Rect actually repainted FIXME actually return something? |
Surface.prototype.fill (CSS, a)
Fills the whole Surface with a color. Usefull for erasing a Surface.
Parameters
| String | CSS | color string, e.g. '#0d120a' or '#0f0' or 'rgba(255, 0, 0, 0.5)' |
| gamejs.Rect | a | Rect of the area to fill (defauts to entire surface if not specified) |
Surface.prototype.getImageData ()
The data must be represented in left-to-right order, row by row top to bottom, starting with the top left, with each pixel's red, green, blue, and alpha components being given in that order for each pixel.
Returns
| ImageData | an object holding the pixel image data {data, width, height} |
Surface.prototype.setAlpha (alpha)
Set the alpha value for the whole Surface. When blitting the Surface on a destination, the pixels will be drawn slightly transparent.
Parameters
| Number | alpha | value in range 0.0 - 1.0 |
Returns
| Number | current alpha value |
error ()
fatal ()
info ()
onEvent (fn, scope)
The function passsed to onEvent will be called whenever
an event (mouse, keyboard, etc) was triggered.
Parameters
| fn | ||
| scope |
onTick (callback, callbackScope)
The function passed to onTick will continously be called at a
frequency determined by the browser (typically between 1 and 60 times per second).
Parameters
| Function | callback | the function you want to be called |
| Function | callbackScope | optional scope for the function call |
ready (readyFn)
ReadyFn is called once all modules and assets are loaded.
Parameters
| Function | readyFn | the function to be called once gamejs finished loading |
setLogLevel (logLevel)
- 0 = info
- 1 = warn
- 2 = error
- 3 = fatal
Example
gamejs.setLogLevel(0); // debug
gamejs.setLogLevel('error'); // equal to setLogLevel(2)
Parameters
| logLevel |