4

Просто рассчитать расстояние не проблема. В моей реализации это:

let distance = Math.sqrt((players[socketId].x - players[clientId].x)**2 + (players[socketId].y - players[clientId].y)**2);

Но есть нюанс, у меня мир зациклен. Это значит что доходя до края карты игрок меняет координату на противоположную.

if (object.x >= config.worldSize || object.x <= -config.worldSize) object.x = -object.x;
if (object.y >= config.worldSize || object.y <= -config.worldSize) object.y = -object.y;

Тоесть если 2 игрока идут друг за другом и один проходит край мира, то он пропадет с области видимости второго, пока тот тоже не пройдет край, так как при "телепортации" растояние по формуле увеличивается более чем на длину самого мира, и игроки уже считаются далеко друг от друга. Пример:

оба игрока идут по координате х вправо, длина мира в одну сторону 1000. Когда первый на 799 а второй на 999 они видят друг друга, спустя 2 шага первый на 801 а второй на -999, и растояние между ними уже 1800, и они соответственно, друг дружку не видят.

Как составить формулу так, что бы они оставались видимыми с учетом такой организации мира?

1
  • 2
    тут как бы логично что максимальное расстояние в одном измерении не может быть больше половины размера мира. соответственно если оно больше, то необходимо его вычесть из максимального размера и получите искомое расстояние 18 дек 2019 в 21:26

2 ответа 2

6

Представьте кольцо.

Расстояние между двумя точками на нем, не может быть больше половины длины окружности.

Если оно больше - значит в противоположном направлении идти ближе.

введите сюда описание изображения

Этим и воспользуемся для определения дельты по одному измерению:

// max - размер мира по одному измерению
const dist = (x0, x1, max) => {
    const v = Math.abs(x1 - x0);
    return v < max / 2 ? v : max - v;
} 

let drag;

const on = (types, cb) => types.forEach(type => addEventListener(type, cb));

const attr = (el, n) => +el.getAttribute(n);

const dist = (x0, x1, max) => {
  const v = Math.abs(x1 - x0);
  return v < max / 2 ? v : max - v;
}

const mirror = (v, size) => v < 0 ? size + (v % size): v % size;

const lerp = (p0, p1, t, size) => {
    let dist = (p1 - p0) % size;
    return p0 + (2*dist % size - dist)*t;
}

const w = attr(svg, 'width');
const h = attr(svg, 'height');

const calcDist = () => {

  const x1 = attr(p0, "cx"), 
      y1 = attr(p0, "cy"),
      x2 = attr(p1, "cx"), 
      y2 = attr(p1, "cy"),
      dx = dist(x1, x2, w);
      dy = dist(y1, y2, h);
      d = Math.sqrt(dx*dx + dy*dy), 
      n = parseInt(d/2.5);
      
  result.innerHTML = 'drag the circles, distance: ' + d.toFixed(1);
  
  dots.innerHTML = [...Array(n)].map((e, i) => 
    `<circle r=2 fill=steelblue
           cx=${mirror(lerp(x1, x2, i/n, w), w)} 
           cy=${mirror(lerp(y1, y2, i/n, h), h)} 
    />`).join('');
}

on(['mousedown', 'touchstart'], e => {
  e = e.touches ? e.touches[0] : e;
  const x = +e.target.getAttribute('cx') - e.clientX;
  const y = +e.target.getAttribute('cy') - e.clientY;
  if (!x && !y) return;
  drag = {x, y, element: e.target};
});

on(['mousemove', 'touchmove'], e =>  {
  if (!drag) return;
  e.preventDefault();
  e = e.touches ? e.touches[0] : e;
  drag.element.setAttribute('cx', mirror(drag.x + e.clientX, w));  
  drag.element.setAttribute('cy', mirror(drag.y + e.clientY, h));  
  calcDist()
});

on(['mouseup', 'touchend'], e => drag = null);

calcDist();
body {
  margin:0;
  overflow:hidden;
}

svg {
  user-select: none; 
  border: solid
}

text {
  font-size:20
}

circle {
  cursor: pointer;
}
<svg id=svg width=625 height=190>
    <g pointer-events=none>
        <text y=20 x=10 id=result></text>
        <g id=dots></g>
    </g>
    <circle id=p0 cx=66 cy=111 r=15 fill=#1594 />
    <circle id=p1 cx=166 cy=122 r=15 fill=#951a />
</svg>

6

Вообще-то говоря, такое происходит не только при пересечении границы. Ваш мир можно представить примерно в таком виде (сам "мир" - один прямоугольник, остальное - его копии): введите сюда описание изображения

так что имеет смысл перебирать расстояния не только до объекта в пределах одного "мира", но и до ближайших его копий в соседних "мирах" и выбирать наименьшее. Можно немного оптимизировать, и смотреть не 9 копий, а ограничиваться чуть меньшим количеством - например, если объект справа, то рассматривать еще более дальние справа миры - нет смысла (см. рисунок).

"По-моему, так" (с) Пух

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.