Nsryjdtyk

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');



let targetX = 50;

let targetY = 50;



let obstacleX = 150;

let obstacleY = 50;



let aiX = 250;

let aiY = 51;



function loop() {

    // Distance between the vector points

    let disTargetX = targetX - aiX;

    let disTargetY = targetY - aiY;

    

    let disObstacleX = obstacleX - aiX;

    let disObstacleY = obstacleY - aiY;



    // Moves to target by default

    const angleTarget = Math.atan2(disTargetY, disTargetX);

    let moveAngle = angleTarget;



    // If near obstacle, adjust course and try to avoid it

    if (Math.sqrt(disObstacleX * disObstacleX + disObstacleY * disObstacleY) < 60) {

        const angleObstacle = Math.atan2(disObstacleY, disObstacleX);

        moveAngle += angleTarget - angleObstacle;

    }



    // Move the vector to desired location

    aiX += Math.cos(moveAngle);

    aiY += Math.sin(moveAngle);



    //Drawing

    ctx.clearRect(0, 0, 600, 200);



    ctx.beginPath();

    ctx.fillStyle = "teal";

    ctx.arc(aiX, aiY, 10, 0, Math.PI * 2, true);

    ctx.fill();



    ctx.beginPath();

    ctx.fillStyle = "purple";

    ctx.arc(obstacleX, obstacleY, 10, 0, Math.PI * 2, true);

    ctx.fill();

    

    ctx.rect(targetX - 20, targetY - 20,40,40);

    ctx.stroke();



    requestAnimationFrame(loop);

}



requestAnimationFrame(loop);

<canvas id="canvas" width="600" height="200"></canvas>