api

jj

This the global object (it stands for JavaScript Jungle) this is where the jungle environment is controlled. You can use it to get the size of the jungle, listen to global events or even fire your own. You can access this anywhere in your world.

jj.createCreature(name, func)

This is the main method you'll use to create new creatures. A creature is just a layer (<div>) in the jungle.

name - A name for your creature, it needs to be unique to the jungle.
func - A function that will be passed your creature object to work on.

Example

jj.createCreature('billy', function (creature) {
   // Give your creature a size.
   creature.size({width: 50, height: 50});

   // Center your creature in the world.
   var worldCenter = jj.center();
   creature.position({
     top:  worldCenter.top  - 25,
     left: worldCenter.left - 25
   });
});

jj.size()

This grabs the size of the world and returns you an object with a width and height property {width: 1024, height: 780}.

Example

var worldSize = jj.size();

jj.center()

This returns the co-ordinates of the center of the world as a top and left property {left: 512, top: 365}.

Example

var center = jj.center();

jj.bind(topic, callback)

This lets you listen in to global events that can be fired using jj.trigger(). It works in the same way as jQuery.bind('click'). Check the whiteboard for a list of events.

topic    - The name of the topic that you want to subscribe to.
callback - A callback that will be called when the topic is published.
           Different topics will provide different arguments to the
           callback.

Example

jj.bind('tick', function (frame) {
  // This function will be called 30 times a second. You can use it
  // to animate your creatures.

  // Move a creature down the screen in 5px increments.
  creature.el.css('top', '+= 5px')
});

jj.trigger(topic, arg1, arg2)

This triggers a function on the global object so that any other creature can listen in (they can do this with jj.bind()).

Note that, the 'Chat' creature will automatically publish any global events to the chat console. See jj.chat() and Creature.chat().

Example

// Others can listen in.
jj.bind('arons-messages', function (message) {
  console.log('Aron says ' + message);
});

jj.trigger('arons-messages', 'hello guys!');

jj.get(creatureName)

Get another creature object in the world to interact with it.

creatureName - The name of the creature that you want to get.

Examples

// Others can listen in.
var grass = jj.get('grass');

// Do something magical with the grass creature.

jj.all()

Get all the creatures in the world as an object of name/creature pairs.

// Others can listen in.
var allCreatures = jj.all();

$.each(allCreatures, function (creature, name) {
  // Trigger a hello event on all creatures.
  creature.trigger('hello', 'This is my hello message');
});

jj.chat(message, [creature])

Publish a chat message, which will be displayed in the chat sidebar, by the 'Chat' creature.

The optional creature argument can be either a Creature instance object, or a string that represents the name to associate with the message.

jj.chat("Hello jungle!", myCreature);
jj.chat("Hello jungle!", "JimBob");

Creature

The entire jungle is composed of creature objects. These are just layers (<div>s) that sit in the canvas. You can create a creature using the jj.createCreature() method. Once you have a creature you can do pretty much anything you want with it eg. draw canvas, svg or just plain old html and css.

There are numerous methods that you can call on the creature. Also feel free to add new methods to your creature for others to call.

jj.createCreature('cake', function (creature) {
  creature.size({width: 50, height: 50});

  creature.el.css('background-color', 'pink');

  // Add a new method to your creature
  creature.eatSlice = function () {
     // Tell others.
     creature.trigger('eaten');

     // Get smaller.
     creature.size({width: '-= 10px', height: '-10px'});
  };
});

jj.createCreature('dog', function (creature) {
  creature.size({width: 100, height: 50});

  var cake = jj.get('cake');

  // Call a method on the cake creature.
  cake.eatSlice();
});

.el

This is your creatures element wrapped in jQuery. You can call any jQuery methods on it, insert elements into it etc.

jj.createCreature('dog', function (creature) {
  creature.size({width: 100, height: 50});
  creature.el.append($('<div />'));
  creature.el.css('background-color', 'red');
});

.name()

Get the name of a creature.

jj.createCreature('dog', function (creature) {
  creature.size({width: 100, height: 50});

  creature.name(); // 'dog'
});

.bind()/.trigger()

These behave in the same way as the global jj.bind()/jj.trigger() but events are only fired on the creature themselves. eg. creature.bind() will be called when creature.trigger() is fired.

.size(dimensions)

Set/Get the size of your creature. You need to do this immediately for your creature to appear at all.

dimensions - An object with "width" and "height" properties (as numbers).

jj.createCreature('cake', function (creature) {
  creature.size({width: 50, height: 50});
  creature.size(); // => {width: 50, height: 50}
});

.position(position)

Get/Set the position of the creature in the Jungle. You can use this in conjunction with jj.size() and jj.center().

position - An object with "top" and "left" and "zIndex" properties (as numbers).

jj.createCreature('cake', function (creature) {
  creature.size({width: 50, height: 50});

  creature.position({top: 20, left: 20});
  creature.position(); // => {top: 20, left: 20, zindex: 0}
});

.data(data)

Data allows you to set metadata about your creature for other creatures to read. You can always add properties to the creature itself if you prefer.

data - An object of metadata you can add to your creature.

jj.createCreature('cake', function (creature) {
  creature.size({width: 50, height: 50});

  creature.data({age: 20});
  creature.data().age; // => 20
});

.chat(message)

Publish a chat message, which will be displayed in the chat sidebar, by the 'Chat' creature.

This is a shorthand for jj.chat() and automatically includes the creature's name in the chat console.

jj.createCreature('parrot', function (creature) {
    creature.chat("Squawk!");
});