Skip to main content
Participant
February 18, 2022
Question

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

  • February 18, 2022
  • 1 reply
  • 316 views
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;
}
}

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    Community Expert
    February 19, 2022

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

    Participant
    February 19, 2022

    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

     

    kglad
    Community Expert
    Community Expert
    February 19, 2022

    there's nothing in the code that would require you to click twice, but you may need a background shape.