Js игра зрение врагов 2д, как реализовать?
Пример

<canvas width="1000px" height="1000px"></canvas>

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

const drawRect = (color, x, y, width, height) => {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
  return {
    color, x, y, width, height
  }
}
   
drawRect('blue', 50, 50, 20, 20)
drawRect('black', 150, 150, 50, 150)

const drawLine = (x1,y1,x2,y2) => {
  ctx.lineWidth = '3';
  ctx.strokeStyle = 'violet';
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.closePath();
  ctx.stroke();
}


canvas.addEventListener('click', (e) => {
  canvas.width += 0;
   
  const npc = drawRect('blue', 50, 50, 20, 20)
  const house = drawRect('black', 150, 150, 50, 150)
  drawRect('green', e.clientX, e.clientY, 20, 20)
  
  const x1 = npc.x, y1 = npc.y, x2 = e.clientX, y2 = e.clientY;

  const points = [];
  for(let i = 0.0; i <= 1; i = i+0.01){
    const gg = getPositionAlongTheLine(x1,y1,x2,y2, i);
    drawRect('aqua' ,gg.x, gg.y, 2 , 2)
    points.push({x: gg.x, y: gg.y, width: 10, height: 10})
  }
  
  for(let i = 0; i < points.length; i++){
    if(collides({...points[i], width: 2, height: 2}, house)){
      console.log('есть препятствие')
      return;
    }
  }
  drawLine(x1, y1, x2, y2)
})
  
  // отдает координаты равные проценту расстояния: percentage максимум = 1 
  function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
    return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
  }
 

  function collides(a,b){
      return a.x < b.x + b.width &&
             a.x + a.width > b.x &&
             a.y < b.y + b.height &&
             a.y + a.height > b.y;
  }

Я там наговнокодил немного, но это лишь потому что не хочу тебе давать лёгких решений, но если сможешь разобраться в коде - то решишь свою проблему, если этот вариант тебя устроит.

Синий - нпс
Черный - препятствие
Зеленый - игрок

Если нпс видит игрока - появляется линия между нпс и игроком.

Игрок на карте появляется при нажатии на левую кнопку мыши.
Точно так же как и любую другую задачу: спроектировать и реализовать.

Составить задачу
Сделать декомпозицию задачи на более маленькие подзадачи в несколько итераций до самых простых
Взять маленькую задачу и решить её
Выполнять пункт 3 до тех пор, пока есть задачи
Profit
