meteor - Moving a shape in kineticJS towards mouse click -

i experimenting meteor , kineticjs. i'm trying create shape, , move towards mouse click on stage. position should saved mongodb connected clients can updated.

i haven't gotten far yet, i've got. need way 2 things:

1. how can make shape move towards mouse click on stage , stop when gets there?
2. is there better way of checking current position of shape, other gameloop tried below? works, feels wrong.

thank you!

//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 layer stage       stage.add(layer);        // add click listener stage       $(stage.getcontent()).on('click', function(evt) {         //stage clicked          //find player shape in database         players.find().foreach(function (dbshape) {         player = new kinetic.regularpolygon(dbshape);          // setup animation move player 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 gameloop check position , stop animation     meteor.setinterval(function(gameloop){                 if(player.attrs.x > 500){         playeranim.stop();       }     },  500);      meteor.autosubscribe(function () {     // clear canvas     if (layer) {       layer.removechildren();       layer.clear();     }     // populate canvas shapes collection     players.find().foreach(function (dbshape) {       var player = new kinetic.regularpolygon(dbshape);        layer.add(player);       layer.draw();     });   });  } 

1. i use tween this. grab object, mouse position, , on mousedown or click create tween node mouse position.

   layer.on('mousedown', function() {     var mousepos = stage.getmouseposition();     var tween = new kinetic.tween({     node: rect,     duration: 1,     x: mousepos.x,     y: mousepos.y,     opacity: 1,     strokewidth: 6,     scalex: 1.5   }).play();  }); 

   jsfiddle

   note: make layer clickable, need add transparent rectangle size of width , height of stage layer. see in jsfiddle kinetic.rect made named var bg

2. would putting check inside animation work you?

   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}});     if(player.getx() > 500){      this.stop();    } }, layer);