An alien abductor for the asyncjs.com JavaScript Jungle.

ufo.js

jj.createCreature('ufo', function (creature) {
  var captured = {},
      positionFactor = 0.005,
      $ = jj.jQuery,
      SEARCH = 1,
      CHASE = 2,
      CAPTURE = 3,
      RETURN = 4,
      state = SEARCH,
      target = undefined;

  creature.data({
      sight: 200
  });

  creature.size({width: 128, height: 250});
  creature.position({top: 128, left: jj.center().left - 64});

  var beam = $(document.createElementNS("http://www.w3.org/2000/svg", "path"))
      .attr("d", "M64 50 L0 250 L128 250 Z")
      .attr("fill", "lime")
      .attr("opacity", "0.5")
      .css("visibility", "hidden");

  $(document.createElementNS("http://www.w3.org/2000/svg", "svg"))
      .css("position", "absolute")
      .css("left", "0")
      .css("top", "0")
      .append(beam)
      .appendTo($(creature.el));

  $(document.createElement("img"))
      .attr("src", "http://jimpurbrick.com/media/ufo.png")
      .appendTo($(creature.el));

  creature.bind('see', function(other) {
      if (state === SEARCH && ! captured[other.name()]) {
          state = CHASE;
          target = other;
      }
  });

  function randomTarget() {

      positionFactor = 0.005;
      var x = Math.random() * jj.size().width;
      var y = Math.random() * jj.size().height;
      return {
          position: function() {
              return {
                  top: y,
                  left: x
              };
          },
          size: function() {
              return {
                  width: 0,
                  height: 0
              };
          }
      };
  };

  function reset() {
      target = randomTarget();
      captured = {};
      state = SEARCH;
  }

  reset();

  function easeTowardTarget() {

      var left = creature.position().left;
      var top = creature.position().top;
      var delta = {
          x: target.position().left + (target.size().width / 2) - creature.position().left - (creature.size().width / 2),
          y: target.position().top - creature.position().top - 200
      };
      creature.position({left: left + (delta.x * positionFactor), 
                         top: top + (delta.y * positionFactor)});
      positionFactor += 0.005;

      var sqrDistance = (delta.x * delta.x) + (delta.y * delta.y);
      return sqrDistance < (20 * 20);
  };

  jj.bind('tick', function(frame) {
             
      switch(state) {
      case SEARCH:
          if(easeTowardTarget()) {
              target = randomTarget();
          }
          break;
      case CHASE:
          if(easeTowardTarget()) {
              captured[target.name()] = {
                  func: target.position,
                  position: target.position()
              };

              target.position = function() {
                  return $.extend(this.el.offset(), {
                  zIndex: this.el.css('z-index') || 0
                  });
              };
              $(beam).css("visibility", "visible");
              state = CAPTURE;
          }
          break;
      case CAPTURE:
          creature.position({top: '-=3px', left: '+=0px'});
          target.el.css({top: '-=3px', left: '+=0px'});
          if (target.position().top + target.size().height < 0) {
              state = RETURN;
          }
          break;
      case RETURN:
          creature.position({top: '+=3px', left: '+=0px'});
          target.el.css({top: '+=3px', left: '+=0px'});
          if (target.position().top >= captured[target.name()].position.top) {
              target.position = captured[target.name()].func;
              target = randomTarget();
              $(beam).css("visibility", "hidden");
              state = SEARCH;
          }
          break;
      }
  });

  jj.bind('midnight', function() {

      reset();

  });

});