example

Download the Jungle (or git clone the repository) and open up index.html in your browser. Hopefully you'll see the jungle.

To create a creature you need to create a new javascript file to hold your creature.

Add this to the /javascript/creatures.js file: see the line "// ,"creatures/mycreature/mycreature.js" // * ADD YOUR FINISHED CREATURE LIKE THIS EXAMPLE */".

Now we need a function that calls the jj.createCreature() method. Here we create a simple canvas circle and move it around. You can use SVG or just CSS with background images if you prefer.

jj.createCreature('creature', function (creature) {
  var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      width   = canvas.width  = 100,
      height  = canvas.height = 100,
      world   = jj.size(),
      top = 50,
      left = jj.center().left - (width / 2);

  creature.size({width: width, height: height});
  creature.position({top: top, left: left});
  creature.el.append(canvas);

  context.fillStyle = "#8ED6FF";
  context.beginPath();
  context.arc(50, 50, width / 2, 0, Math.PI * 2, true); 
  context.closePath();
  context.fill();

  jj.bind('tick', function () {
    if (top > world.height) {
      top = -height;
    } else {
      top  += 5;
    }
    if (left > world.width) {
      left = -width;
    } else {
      left += 10;
    }
    creature.position({top: top, left: left});
  });
});

Once this is done make it available online. Gists are a good way to do this. https://gist.github.com/

Then give either @asyncjs, Prem (@premasagar), Simon (@purge) or Aron (@aron) a shout and we'll add it to the main site, or tell us your GitHub username and we'll add you directly to the repo.