如何以一定的角度移动物体？

Question

"I am making a game in which I need to move an object to a target position. I am half the way but the ball has many defects like:
1) If you keep tx=ty then it works fine but when you change it, the object is displaced, but why?
2) If you keep the target behind the object, the object does not move, why?"

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var cx = 100; 
var cy = 100;
var r1 = 25;
var r2 = 50;
var a = 10;

var tx = 500;
var ty = 400;

function draw() {
    var vx = Math.cos(Math.atan2(ty, tx));
    var vy = Math.sin(Math.atan2(ty, tx));

    if(cx < tx && cy < ty){
        cx += vx + a;
        cy += vy + a;
    }

    ctx.clearRect(0, 0, c.width, c.height);
    // target
    ctx.fillStyle = "blue";
    ctx.strokeStyle = "rgb(0, 0, 179)";
    ctx.lineWidth = 20;
    ctx.beginPath();
    ctx.arc(tx, ty, r2, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

    // ball
    ctx.fillStyle = "red";
    ctx.strokeStyle = "rgb(179, 0, 0)";
    ctx.lineWidth = 20;
    ctx.beginPath();
    ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

Answer 1

1 => Can you give an example in an edit to your question?
2 => This is probably because you check in your if statement this: cx < tx && cy < ty .
That means when cx and cy are both smaller then tx and ty .

Working snippet:

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var cx = 100; var cy = 100; var r1 = 25; var r2 = 50; var a = 0.5; // Made edit to 0.5 to move it slower var tx = 500; // Made edit from t_x to tx var ty = 400; // Made edit from t_y to ty function draw() { var vx = Math.cos(Math.atan2(ty, tx)); var vy = Math.sin(Math.atan2(ty, tx)); if(cx < tx && cy < ty){ cx += vx + a; cy += vy + a; } ctx.clearRect(0, 0, c.width, c.height); // target ctx.fillStyle = "blue"; ctx.strokeStyle = "rgb(0, 0, 179)"; ctx.lineWidth = 20; ctx.beginPath(); ctx.arc(tx, ty, r2, 0, 2 * Math.PI); // Edit t_x and t_y to tx and ty ctx.stroke(); ctx.fill(); // ball ctx.fillStyle = "red"; ctx.strokeStyle = "rgb(179, 0, 0)"; ctx.lineWidth = 20; ctx.beginPath(); ctx.arc(cx, cy, r1, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); requestAnimationFrame(draw); } requestAnimationFrame(draw); 

 <canvas id="canvas"></canvas>