example

Download the Jungle 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 at the bottom of the index.html file.

<script src="path/to/my/creature.js"></script>

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();

  // Set the size and position of the creature.
  creature.size({width: width, height: height});
  creature.position({top: 50, left: jj.center().left - (width / 2)});
  creature.el.append(canvas);

  // Draw a circle.
  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 (creature.position().top > world.height) {
      creature.position({top: -height});
    }
    if (creature.position().left > world.width) {
      creature.position({left: -width});
    }
    creature.position({top: '+= 5px', left: '+= 10px'});
  });
});

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

Then visit http://jsbin.com/uxukok/edit#html and add your url to the list

    jj.load(
    'https://raw.github.com/gist/3c39967d411f977999e3/1352bf4cfbcb2bf94ae7a269e7446408eaa1a17e/gistfile1.txt',
    'https://raw.github.com/asyncjs/Javascript-Jungle/master/javascript/creature.js'
    )