title: HTML5 / kineticJS "getIntersection" function implementation (Canvas Game)
body: <p>I am trying to recreate the game <a href="http://www.sinuousgame.com/" rel="nofollow">http://www.sinuousgame.com/</a> and started studying <strong>html5 canvas</strong> and <strong>kineticJS</strong>.</p>
  
  <p>As you can see, My <strong>Fiddle</strong>: <a href="http://jsfiddle.net/p9fnq/5/" rel="nofollow">http://jsfiddle.net/p9fnq/5/</a> 
  (You could try commenting my checkCollide function definition and its calling,to see my output)</p>
  
  <p><strong>(New fiddle at bottom of post)</strong></p>
  
  <pre><code>//The working player code
  var LimitedArray = function(upperLimit) {
      var storage = [];
  
      // default limit on length if none/invalid supplied;
      upperLimit = +upperLimit &gt; 0 ? upperLimit : 100;
  
      this.push = function(item) {
          storage.push(item);
          if (storage.length &gt; upperLimit) {
              storage.shift();
          }
          return storage.length;
      };
  
      this.get = function(flag) {
          return storage[flag];
      };
  
      this.iterateItems = function(iterator) {
          var flag, l = storage.length;
          if (typeof iterator !== 'function') {
              return;
          }
          for (flag = 0; flag &lt; l; flag++) {
              iterator(storage[flag]);
          }
      };
  };
  
  var tail = new LimitedArray(50);
  
  var flag = 0, jincr = 0;
  var stage = new Kinetic.Stage({
      container: 'container',
      width: window.innerWidth,
      height: window.innerHeight,
      listening: true
  });
  var layer = new Kinetic.Layer({
      listening: true
  });
  stage.add(layer);
  var player = new Kinetic.Circle({
      x: 20,
      y: 20,
      radius: 6,
      fill: 'cyan',
      stroke: 'black',
      draggable: true
  });
  var line = new Kinetic.Line({
      points: [],
      stroke: 'cyan',
      strokeWidth: 2,
      lineCap: 'round',
      lineJoin: 'round'
  });
  layer.add(line);
  layer.add(player);
  
  // move the circle with the mouse
  stage.getContent().addEventListener('mousemove', function() {
      player.position(stage.getPointerPosition());
      var obj = {
          x: stage.getPointerPosition().x,
          y: stage.getPointerPosition().y
      };
  
      tail.push(obj);
      var arr = [];
      tail.iterateItems(function(p) {
          arr.push(p.x, p.y);
      });
      line.points(arr);
  });
  
  var x = 0;
  var y = 0;
  var noOfEnemies = 200;
  var enemyArmada = new Array();
  
  
  createEnemy();
  
  function createEnemy() {
      for (var i = 0; i &lt; noOfEnemies; i++) {
          var enemy = new Kinetic.Circle({
              x: Math.random() * window.innerWidth,
              y: Math.random() * window.innerHeight,
              radius: 4.5 + 1.5 * Math.random(),
              fill: 'red',
              stroke: 'black'
          });
          enemy.speedX = enemy.speedY = (0.5 + Math.random() * 50);
          enemyArmada.push(enemy);
          layer.add(enemy);
      }
  }
  
  var checkCollide = function() {
      var collided = stage.getIntersections(stage.getPointerPosition());
      if (typeof collided !== 'Kinetic.Shape') {
          console.log("not shape");
      }
      else {
          console.log("BOOOM!!!");
      }
  };
  
  
  var anim = new Kinetic.Animation(function(frame) {
      checkCollide();
      for (var i = 0; i &lt; noOfEnemies; i++) {
          var e = enemyArmada[i];
          e.position({
              x: e.position().x - e.speedX * (frame.timeDiff / 400),
              y: e.position().y + e.speedY * (frame.timeDiff / 400)
          });
  
          if (e.position().y &lt; 0 || e.position().x &lt; 0) {
              e.position({
                  x: (Math.random() * (window.innerWidth + 600)),
                  y: -(Math.random() * window.innerHeight)
              });
          }
      }
      }, layer);
  anim.start();
  </code></pre>
  
  <p>This is the error i finally ended up with:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'x' of undefined</p>
  </blockquote>
  
  <p>I need this error to be rectified plus collision to be detected.(Show the console  messages as i have written in the checkCollide function).</p>
  
  <p>Can anyone help me out with this??</p>
  
  <p><strong>EDIT:</strong> Have rectified the error,but collision detection not working.
  New Fiddle: <a href="http://jsfiddle.net/p9fnq/8/" rel="nofollow">http://jsfiddle.net/p9fnq/8/</a></p>