2d сетка как найти индексы по номеру узла - PullRequest
Новая
       3

2d сетка как найти индексы по номеру узла

0 голосов
/ 21 февраля 2020

Я создал двумерную сетку div с идентификаторами, равными итерации счетчика l oop. Когда я нажимаю div, я хочу использовать его идентификатор, чтобы определить его положение в сетке. Так что если у меня есть сетка 4x4 и я хочу получить индексы div с id = 8, то функция вернет 3,1 третью строку первого столбца. Как написать функцию с учетом размера сетки и номера блока, а затем вернуть ее координаты (строка и столбец) 

const container = document.getElementById("container");
const N = 16;
var blocks = new Array(N);
function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.innerText = (c);
    cell.setAttribute("id",c);
    container.appendChild(cell).className = "grid-item";
  }


for (let i = 0; i <= N; i++) {
  blocks[i] = new Array(N);
}
  let count = 0;
  for(let x=0; x<=15; x++){
  	for(let y=0; y<=15; y++){
  		blocks[x][y] = count;
  		count++;
  }
  //
  for(let x=0; x<=15; x++){
  	for(let y=0; y<=15; y++){
  		console.log(blocks[x][y]);
  }
}

}
}
makeRows(N, N);
:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
</div>
</body>
    <script src="astar.js"></script>
</html>

1 Ответ

1 голос
/ 21 февраля 2020

Хороший способ справиться с этим - вместо того, чтобы хранить их в двумерном массиве, хранить их в одном длинном массиве, чтобы вы могли сразу получить к ним доступ только по идентификатору - при условии, что идентификатор совпадает с индексом в массиве

Затем вам нужно две функции: превратить ID в X,Y и X,Y в ID 

const width = 12

const positionToIndex = (x, y) => (y * width) + x

const indexToPosition = (index) => ({
  x: index % width,
  y: Math.floor(index / width)
})

. Предполагается, что верхний левый угол равен (0, 0) и начальный индекс равен 0. Тогда вы просто инициализируете его как обычный плоский массив и используете indextoPosition(), чтобы найти позицию x, y 

// Initialize
for (var i = 0; i < width*height; i++) {
  const position = indexToPosition(i)
  blocks[i] = new Cell(position.x, position.y)
}

// When cell is clicked
cell.onclick = (id) => {
  const {x, y} = indextoposition(id)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...