Как рассчитать тайл из точки на тайловой карте в Javascript

У меня есть Tilemap, написанный на простом JavaScript:

const map = [
    0,0,1,1,
    1,1,1,1,
    1,1,1,1,
    1,1,1,1

]

Каждая плитка отображается как квадрат размером 128*128 пикселей.

И я написал функцию, которая выводит евклидово расстояние между двумя точками, в моем случае расстояние между событием клика на тайловой карте:

function distance(x,y,x2,y2) {
    return Math.sqrt(Math.pow((x-x2), 2)+Math.pow((y-y2), 2))
}

Как рассчитать, на какой из плиток произошел щелчок?


javascript tile
person Marvin    schedule 19.02.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если map представляет собой матрицу 4 x 4, вы можете рассчитать индекс по следующей формуле.

const
    getIndex = (x, y) => x + 4 * y,
    map = [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

console.log(getIndex(0, 0));
console.log(getIndex(1, 0));

person Nina Scholz    schedule 19.02.2021

arrow_upward
1
arrow_downward

предположим, у вас есть матрица n x m, где n = количество строк m = количество столбцов

у вас будет массив со значениями n * m

Таким образом, чтобы вычислить евклидово расстояние между двумя точками, вам нужно знать горизонтальный (x) индекс и вертикальный (y) индекс этого значения, например:

map = [1, 1, 1, 1] 
// map[0] is in the position (0, 0)
// map[1] is in the position (1, 0)
// map[2] is in the position (0, 1)
// map[3] is in the position (1, 1)

Вы можете сделать это с помощью этой функции:

const getX = (index, m) => index % m
const getY = (index, n) => Math.floor(index / n)

теперь вы можете использовать свою функцию:

let m = 128,
    n = 128,
    index = 0,
    index2 = 1,
    map = [// n * m values here],
    x, y, x1, y1

x = getX(index, m)
y = getY(index, n)
x1 = getX(index1, m)
y1 = getY(index1, n)

d = distance(x, y , x1, y1)
person Rafael Dourado D    schedule 19.02.2021