Update Tween Destination

An example of how to interrupt a tween with a new destination mid animation.

HTML

<html>
<head>
</head>
<body>
	<canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(204, 204, 204, 1.00);"></canvas>
</body>
</html>

JavaScript

canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {

  stage.update();
}

var bg = new createjs.Shape();
bg.graphics.beginFill("gray").drawRect(0,0,550,400);
stage.addChild(bg);

var player = new createjs.Shape();
player.graphics.beginFill("red").drawCircle(0,0,20,20);
stage.addChild(player);
player.x = 275;
player.y = 200;

stage.enableMouseOver();

var playerSpeed = 2;
var destination = {x:0,y:0};
var playerTween;

stage.on("click",setDestination);
 
function setDestination()
{
	destination.x = stage.mouseX;
	destination.y = stage.mouseY;

	tweenDestination();
}

function tweenDestination()
{
	a = destination.x - player.x;
    b = destination.y - player.y
    c = Math.hypot(a,b);
	
    destinationTime = c*playerSpeed
	playerTween = createjs.Tween.get(player,{override:true}).to({x:destination.x,y:destination.y},destinationTime,createjs.Ease.linear());
}