Пример
<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;
}
Я там наговнокодил немного, но это лишь потому что не хочу тебе давать лёгких решений, но если сможешь разобраться в коде - то решишь свою проблему, если этот вариант тебя устроит.
Синий - нпс
Черный - препятствие
Зеленый - игрок
Если нпс видит игрока - появляется линия между нпс и игроком.
Игрок на карте появляется при нажатии на левую кнопку мыши.
