from AS3 code to Html5 move objects toward mouse pointer using click

Question

Good afternoon, please can someone help me translate this code from as3 to html.
 If you know a better code please feel free to let me know. 
I have noticed that the instance is a bit erased while moving

Thanks a lot

stage.addEventListener(MouseEvent.CLICK, myClickReaction); 
// speeds ALONG NYPOTENUSE 
var v:Number = 5; 
// vector of movement 
var dir:int = 0; 
// mouse click point 
var clickPoint:Point = new Point(); 
// angle doesn't change metween clicks - so it can be global 
var angle:Number; 

function myClickReaction (e:MouseEvent):void { 
clickPoint = new Point(mouseX, mouseY); 
angle = Math.atan2(clickPoint.y - sunny.y, clickPoint.x - sunny.x); 
dir = angle >= 0 ? -1 : 1; 
addEventListener(Event.ENTER_FRAME, onEnterFrame); 
} 

function onEnterFrame(e:Event):void { 
var projectedX:Number = sunny.x + v * Math.cos(angle); 
var projectedY:Number = sunny.y + v * Math.sin(angle); 
var diff:Number = clickPoint.y - projectedY; 
if (diff / Math.abs(diff) == dir) { 
sunny.x = clickPoint.x; 
sunny.y = clickPoint.y; 
removeEventListener(Event.ENTER_FRAME, onEnterFrame); 
} 
else { 
sunny.x = projectedX; 
sunny.y = projectedY; 
} 
}

kglad · Answer

stage.addEventListener("mousedown", myClickReaction.bind(this));
var tickFF = tickF.bind(this);
// speeds ALONG NYPOTENUSE
var v = 5;
// vector of movement
var dir = 0;
// mouse click point
var clickPoint = new createjs.Point();
// angle doesn't change metween clicks - so it can be global
var angle, projectedX, projectedY, diff;

function myClickReaction(e) {
clickPoint.x = e.stageX
clickPoint.y = e.stageY;
angle = Math.atan2(clickPoint.y - this.sunny.y, clickPoint.x - this.sunny.x);
dir = angle >= 0 ? -1 : 1;
createjs.Ticker.addEventListener("tick", tickFF);
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.