jquery проверка на столкновение и изменение пути

Question

Вот небольшой код jquery, где прыгает любое количество точек. Я хочу, чтобы они не сталкивались на пути к новой координате. Есть ли способ предотвратить их столкновение?

Мои мысли касаются столкновения с плагином, но я не знаю, как использовать его на движущихся объектах. Документация также не дает подсказки.

Вот код https://jsfiddle.net/c0ffi124/anoxLdsb/16

function runGame(parameter) {
    document.getElementById("blocks").style.display = "block";
    document.getElementById('start-button').style.display = 'none';
    let divs = document.getElementsByClassName("block");
    for (div in divs) {
        animateDiv(divs[div]);
    }
};

function makeNewPosition() {

    var height = $(window).height() - 50;
    var width = $(window).width() - 50;

    var newh = Math.floor(Math.random() * height);
    var neww = Math.floor(Math.random() * width);

    return [newh, neww];

}

function animateDiv(myclass) {
    var newq = makeNewPosition();
    $(myclass).animate({ top: newq[0], left: newq[1] }, 3000, function() {
        animateDiv(myclass);
    });
};

Answer 1

Вы можете сохранить координаты x и y точек.
Вы можете проверить расстояние между 2 точками с помощью теоремы Пифагора и, если она слишком мала, сгенерировать новые x и y.
Если sqrt(abs((x1-x2)(x1-x2)) + abs((y1-y2)(y1-y2)))> радиус одной точки, точки сталкиваются. Таким образом, вы можете перебрать все возможные пары точек и выполнить эту проверку.