如何让 x 和 y 走在同一条线上？

Question

我正在尝试使用 PIXIJs 创建移动圆圈，它将在鼠标单击事件上移动，它的工作原理但问题是它首先到达 x 或 y 位置，

问题是它到达了更靠近圆圈的 x 或 y 位置，但我需要将圆圈在同一条线上移向 target（鼠标点击区域)...

我做了一些计算，但没有用...关于将圆移动到直线的想法？？？

**

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>

**

这是我的 JSfiddle

Answer 1

如果你想将圆心移动到当前点，试试这个：

bodyy.click = function(mouseData){
       xDestination = Math.round(mouseData.data.global.x - 20);
       yDestination =  Math.round(mouseData.data.global.y - 20);
    }

20 - 圆的半径

Answer 2

你沿着对角线移动，直到 x 坐标或 y 坐标等于目的地，这不是你想要的。此外，如果两个坐标不完全相等，则会导致锯齿效果。

将整个嵌套的 if 语句替换为：

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

这会导致圆直接沿着两点之间的线移动。

如何让 x 和 y 走在同一条线上？

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

javascript

game-engine

pixi.js