如何确保怪物不在圈内？

Question

I have a sketch https://codepen.io/korolariya/pen/KXQaJK?editors=0011

 update(){
    if(!this.prey){    
      return;
    }
    let p = this.calcPointInCircle(this.prey.position,this.lake.position,this.lake.radius);
    this.goToPoint(p);
  }

The monster must pursue the victim without entering the circle.

Now it moves linearly to the point closest to the fisherman on the circle.

Answer 1

A simple way would be to just move the monster towards the player at a certain speed, but force the monster's position to remain outside the circle.

var currentDist = Math.sqrt(monsterX*monsterX+monsterY*monsterY);
var requiredDist = 50;
if (currentDist<requiredDist)
{
    var f = requiredDist/currentDist;
    monsterX *= f;
    monsterY *= f;
}

Not entirely correct as the resulting speed would depend on the arc difference to the player on the circle, but it appears kinda natural:

Live example (drag player around with mouse, monster will chase)

Answer 2

Use the algo below:

1- calculate the angle of the line formed by the prey and the center of the lake, let's call this angle alpha :

Since tangent of alpha is equal to (yPrey - yLake) / (xPrey - xLake),

var alpha = arctan((yPrey - yLake) / (xPrey - xLake));

2- When alpha is calculated in radians, you can calculate where the line intersect the circle in point of cordinates x and y:

var x = lakeRadius * cos(alpha) + xLake;
var y = lakeRadius * sin(alpha) + yLake;