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

New Here ,
Feb 18, 2022 Feb 18, 2022

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;
}
}

Views

91

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 19, 2022 Feb 19, 2022

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;
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 19, 2022 Feb 19, 2022

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
quote

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 19, 2022 Feb 19, 2022

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 21, 2022 Feb 21, 2022

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 21, 2022 Feb 21, 2022

Copy link to clipboard

Copied

LATEST

do you see a problem here, http://www.kglad.com/Files/forums/sunny.html

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines