Copy link to clipboard
Copied
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;
}
}
Copy link to clipboard
Copied
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);
}
function tickF(e){
projectedX = this.sunny.x + v * Math.cos(angle);
projectedY = this.sunny.y + v * Math.sin(angle);
diff = clickPoint.y - projectedY;
if (diff / Math.abs(diff) == dir) {
this.sunny.x = clickPoint.x;
this.sunny.y = clickPoint.y;
createjs.Ticker.removeEventListener("tick", tickFF);
} else {
this.sunny.x = projectedX;
this.sunny.y = projectedY;
}
}
Copy link to clipboard
Copied
Thank you very much the code is not behaving the same as when I use it with as3.What I want is for the instance (sunny) to go where I click the mouse . And it stands still waiting for me to click again.
Thank you very much for your help
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);
}function tickF(e){
projectedX = this.sunny.x + v * Math.cos(angle);
projectedY = this.sunny.y + v * Math.sin(angle);
diff = clickPoint.y - projectedY;
if (diff / Math.abs(diff) == dir) {
this.sunny.x = clickPoint.x;
this.sunny.y = clickPoint.y;
createjs.Ticker.removeEventListener("tick", tickFF);
} else {
this.sunny.x = projectedX;
this.sunny.y = projectedY;
}
}
By @kglad
Copy link to clipboard
Copied
there's nothing in the code that would require you to click twice, but you may need a background shape.
Copy link to clipboard
Copied
I mean the purpose of this code is for the instance to go to the mouse and this is not happening.
It's not going towards the mouse but it's not stopping either.
Could you please help me with a code to make this happen?
I would appreciate it very much
Copy link to clipboard
Copied
do you see a problem here, http://www.kglad.com/Files/forums/sunny.html