Как расположить элементы случайным образом не накладываясь?

Question

[Lector]

Суть такова, располагаю элементы внутри другого, случайным образом но иногда они накладываются друг на друга, как мне сделать чтобы такого не было? Предполагаю что нужно как-то проверять что координаты уже заняты, хотелось бы еще чтобы они не липли друг к другу.

Comments

[Сергей Соколов]

Как предпочитаете поступать в случае наложения:

1. не накладывать
   
2. искать более подходящее положение для нового
   
3. сдвигать и новый и тот, на кого попали – как отталкивающиеся магниты
   

Что, если физически невозможно уже впихнуть ещё один?

Answer 1

[Rerurk]

Первый вопрос, какие элементы? Размеры фиксированные?

Comments

[Lector]

просто дивы, размеры фиксированые

[hzzzzl]

Lector, покажи хоть обрывок кода, а так-то на внешний контейнер display:flex и внутренним дивам margin

[Lector]

нет, элементы создаются скриптами и добавляются в цикле

const randCoord = () => {
	return {
		left: Math.floor(Math.random() * (areaWidth - 120)),
		top: Math.floor(Math.random() * (areaHeight - 120))
	}
}

const setTanks = () => {
	let div = document.createElement('div');
	div.classList.add('tank');
	let coords = randCoord();
	div.style.left = `${coords.left}px`;
	div.style.top = `${coords.top}px`;
	areaEnemy.append(div);
}

[Rerurk]

Lector, если рандом в таблице то это не сложно,

[hzzzzl]

Lector, можно (и нужно) положить все координаты танков в массив, и тогда пусть randCoord перед возвратом значения проверяет все уже существующие танки, и заново делает рандом, если новый танк ложится на существующий?

[edward_freedom]

Rerurk, ты в курсе, что в ветку ответов, пишутся ответы, а не вопросы?

Answer 2

[Сергей Соколов]

Накидать случайно, как лягут. Потом подвинуть.

Для каждого найти векторы до всех других.
Каждый такой вектор преобразовать в обратный, на который хорошо бы подвинуть.
Но разделить на квадрат длины. Так влиять будут только короткие – когда сосед оказался слишком близко.
Сложить векторы и переместить объект.

Метод плохо сработает если один объект окажется «зажат» между другими точно на одной прямой, или окружён.

Comments

[Rerurk]

Вы представляете данный алгоритм и масштаб анализа?

[Сергей Соколов]

Rerurk, обычное дело, как поиск nearest neighbor.