Есть два способа представить вашу карту.
Один из способов представить это сетка квадратов, где каждый квадрат может иметь планету / систему или нет. Затем можно указать, что если сосед находится на расстоянии одного квадрата в любом из восьми направлений (NW, N, NE, W, E, SW, S, SE), то существует связь с этим соседом. Однако, обратите внимание, что на вашем примере карты центральная система не подключена к системе к северу / востоку от нее, поэтому, возможно, это не то представление, которое вам нужно. Но его можно использовать для построения другого представления
Второй способ состоит в том, чтобы представлять каждый квадрат как имеющий восемь битов, определяя, существует ли соединение с соседом вдоль каждого из тех же восьми направлений. Предположительно, если есть хотя бы одно соединение, то в квадрате есть система, в противном случае, если нет соединений, оно пустое.
Итак, в вашем примере сетки 3х3 данные будут:
Tile Connections
nw n ne w e sw s se
nw 0 0 0 0 0 0 0 0
n 0 0 0 0 1 0 1 0
ne 0 0 0 1 0 0 0 0
w 0 0 0 0 0 0 0 0
center 0 1 0 0 0 0 1 1
e 0 0 0 0 0 0 0 0
se 0 0 0 0 0 0 0 0
s 0 1 0 0 1 0 0 0
sw 1 0 0 1 0 0 0 0
Вы могли бы представить эти соединения в виде массива из восьми логических значений или гораздо более компактно как восьмибитное целое число.
Тогда легко использовать восемь логических значений (или восьмибитное целое), чтобы сформировать имя файла растрового изображения для загрузки для этого квадрата сетки. Например, ваш центральный фрагмент, использующий эту схему, может называться «Bitmap01000011.png» (только с использованием логических значений) или, альтернативно, «Bitmap43.png» (используя шестнадцатеричное значение восьмибитного целого числа, представляющего этот двоичный шаблон для более короткого имени файла ).
Поскольку у вас есть 256 возможных комбинаций, вам потребуется 256 битовых карт.
Вы также можете уменьшить данные до четырех логических значений / битов на плитку, поскольку, например, «северное» соединение подразумевает, что мозаика к северу имеет «южное» соединение, но это делает выбор битовых карт немного сложнее, но Вы можете решить это, если хотите.
В качестве альтернативы вы можете наложить слой между нулевым (пустым) и девятью (полностью подключенными + системный круг) растровыми изображениями в каждом квадрате. Вам просто нужно использовать прозрачные .png, чтобы вы могли объединить их вместе. Недостатком является то, что браузер может медленно рисовать каждый квадрат (особенно полностью связанные). Преимущество будет в том, что вы создаете меньше данных и загружаете их с вашего веб-сайта.
Вы бы представляли саму карту в виде таблицы и добавляли свои растровые изображения в виде ссылок на изображения в каждую ячейку по мере необходимости.
Псевдокод на карту будет:
draw_map(connection_map):
For each grid_square in connection_map
connection_data = connection_map[grid_square]
filenames = bitmap_filenames_from(connection_data)
insert_image_references_into_table(grid_square,filenames)
# For each square having one of 256 bitmaps:
bitmap_filenames_from(connection_data):
filename="Bitmap"
for each bit in connection_data:
filename += bit ? "1" : 0
return [filename,]
# For each square having zero through nine bitmaps:
bitmap_filename_from(connection_data):
# Special case - square is empty
if 1 not in connection_data:
return []
filenames=[]
for i in 0..7:
if connection_data[i]:
filenames.append("Bitmap"+i)
filenames.append("BitmapSystem");
return filenames