How to make x and y to travel on the same line?

Question

I was trying to create Moving circle using PIXIJs , which will move on mouse click event , its working but the problem is either it reaches x first or y position initially ,

the problem is it reaches the x or or y position which is closer to the circle , but i need to move the circle on same line towards the target (mouse clickd area)...

I did some calculations but that does not work ... any idea about moving circle to the straight line???

Here is my fiddle moving Circle

**

let xDestination = 100;
let yDestination = 100;

let app = new PIXI.Application(window.width,window.height);
document.body.appendChild(app.view);

let Graphics = new PIXI.Graphics();
Graphics.beginFill(0x00FFFF);
let rect = Graphics.drawCircle(20, 20, 20, 20);
let NewStage = new PIXI.Graphics();


NewStage.beginFill(0xFC7F5F);
let bodyy = NewStage.drawRect(0, 0, 500, 500);
bodyy.interactive = true;
rect.interactive = true;

app.stage.addChild(bodyy);
app.stage.addChild(rect);

let isMovingForward = true;

app.ticker.add(function(){
 if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){
    if(rect.x > xDestination) {
    rect.x -= 5;
    } else {
    rect.x += 5;
    }
    if(rect.y > yDestination) {
    rect.y -= 5;
    } else {
    rect.y += 5;
    }
 }
})
bodyy.click = function(mouseData){
 xDestination = Math.round(mouseData.data.global.x -20);
 yDestination =  Math.round(mouseData.data.global.y -20);
}

**

Here is my JSfiddle

How to make x and y to travel on the same line?

2 Answers