title: Moving a shape in kineticJS towards mouse click
body: <p>I am experimenting with Meteor and KineticJS.  What I'm trying to do is to create a shape, and move it towards a mouse click on the stage.  The position should be saved to the mongoDB so that all connected clients can be updated.  </p>
  
  <p>I haven't gotten far yet, but this is what I've got.  I basically need a way to do two things:</p>
  
  <ol>
  <li>How can I make a shape move towards the mouse click on the stage
  and stop when it gets there?</li>
  <li>Is there a better way of checking
      the current position of a shape, other than the gameLoop that I
      tried below?  It works, but it feels wrong.</li>
  </ol>
  
  <p>Thank you!</p>
  
  <pre><code>//client.js code
  
  var player = null;
  var playerAnim = null;
  
  Template.container.rendered = function () {
  
    var myCanvas = document.getElementById('myCanvas');
    var stage = new Kinetic.Stage({
          container: myCanvas,
          width: 1024,
          height: 1024
        });
  
        var layer = new Kinetic.Layer();
  
        // add the layer to the stage
        stage.add(layer);
  
        // add click listener for the stage
        $(stage.getContent()).on('click', function(evt) {
          //stage was clicked
  
          //Find the player shape in the database
          Players.find().forEach(function (dbShape) {
          player = new Kinetic.RegularPolygon(dbShape);
  
          // setup an animation to move the player to the right
            playerAnim = new Kinetic.Animation(function(frame) {
  
            var velocity = 50;
            var dist = velocity * (frame.timeDiff / 1000);
            player.move(dist, 0);
            Players.update(dbShape._id, {$set: {x: player.attrs.x, y: player.attrs.y}});
            }, layer);
  
            playerAnim.start();        
            layer.add(player);
            layer.draw();
          });
        });
  
      //make a gameLoop to check the position and stop the animation
      Meteor.setInterval(function(gameLoop){          
        if(player.attrs.x &gt; 500){
          playerAnim.stop();
        }
      },  500);
  
      Meteor.autosubscribe(function () {
      // clear the canvas
      if (layer) {
        layer.removeChildren();
        layer.clear();
      }
      // populate the canvas with the Shapes collection
      Players.find().forEach(function (dbShape) {
        var player = new Kinetic.RegularPolygon(dbShape);
  
        layer.add(player);
        layer.draw();
      });
    });
  
  }
  </code></pre>