JavaScrpt Game Framework

The Core

mibbu(width, height, parent) Main function of the framework, returns ‘mibbu’ game object. Each time you want to create an instance of the game you have to call it. It has 3 optional parameters: width (default 400px), height (default 300px) & parent (default <body>). First & second are dimentions of game screen, last one is DOM node in which game will be displayed (mibbu will call .appendChild with game object on that element). When mibbu() object is created, we can use several of it’s method, such as:

hook(function) adds given function to the game loop – it will be called on each frame
cssAnimationOff() switch to the ‘position:absolute’ mode when in DOM, even if it is possible to use CSS3 Animations
canvasOff() switch to the DOM mode, even if it is possible to create <canvas>
hitsOn() enable collisions
hitsOff() disable collisions
fps() displays FPS counter
spr(image, width, height, frames, animations) creates new animated object. Check Sprites part for details.
on() starts the main game loop.
off() stops the main game loop.
bg(image, speed, direction, options) creates new background object. Check Backgrounds part for details.


noHits() removes all collisions added with hit() to the given sprite
callback(funtion, iterations) call function after given iterations of the current animation
change(image, width, height, frames, animations) changes given sprite into another one with given parameters
speed(speed) set current animation speed – after how many game frames sprite will switch to another frame. For example if game Fps number is 30 and some sprite’s speed() returns 3, it means that it has 10 frames per second (30/3 = 10, hard math, isn’t it:)?) Call it without arguments and it will just return the speed
zone(top, right, bottom, left) sets margins unaffected by collisions (for example if sprite is 20×20 and has 10px right collision zone margin, only 10×20 will be affected by collisions). Call it without parameters and it will return object with 4 attributes (top, left, bottom, right) describing margins unaffected by collisions
animation(nrOfAnimation) sets current animation of the sprite, when called without arguments return current animation number
id() returns id number, unique for each sprite
hit(object, callback) binds ‘callback’ function to the sprite. It will be executed when sprite will colide with sprite defines as ‘object’
resize(width, height) change size of the sprite to width x height, called withou arguments return current size of the sprite
frame(frameNumber) sets current frame of the sprite’s, when called without arguments it just return the current frame
position(x, y, z) moves sprite to the given point (x, y) and set it’s zIndex to z, called without arguments returned object with coordinated of the sprite {x, y, z}


dir(direction) change background’s move direction. Use cardinal directions (“N”, “S”, “E”, or “W”) or angle in radians
on() start moving background
off() stop moving background
speed(speed) change speed of background movement. Called without arguments return
position(x, y) moves sprite to the given point (x, y). Called without arguments returned object with coordinated of the background {x, y}