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

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

**

Here is my JSfiddle

Answer 1

You move along a diagonal until either the x coordinate or y coordinate is equal to the destination, which is not want you want. Also if the two coordinates are not exactly equal, this causes the jagging effect.

Replace the entire nested if statement with:

rect.x -= (rect.x-xDestination)/10;
rect.y -= (rect.y-yDestination)/10;

which causes the circle to move directly along the line between the two points.