获取二维数组中邻居的坐标

Question

我正在寻找一种方法来获取二维数组中邻居的坐标。 我面临的问题是我想定义远邻的数量。 我知道如何使用以下向量获得直接的 8 个邻居：

var distance = 1;
var top_left = array[x-distance ][y-distance ];

...等等。但我想在这段代码 sn-p 中获得更广泛的邻居。

var Move = function() {

  var that = this;

  this.grid = {
    width: 12,
    height: 12
  };

  this.showMoveableTiles = function() {
    var movableTiles = 3;
    var row = $(this).data('row');
    var tile = $(this).data('tile');

    $('.tile').removeClass('moveable');

    $('#grid .tile').filter(function() {
      return Math.abs($(this).data('row') - row) <= movableTiles && Math.abs($(this).data('tile') - tile) <= movableTiles && !($(this).data('row') == row && $(this).data('tile') == tile)
    }).addClass('moveable');
  };

};

var makeGrid = function(width, height) {
  var tiles = '';

  for (var row = 0; row < height; row++) {
    for (var tile = 1; tile <= width; tile++) {
      tiles += '<div class="tile" data-tile="' + tile + '" data-row="' + (row + 1) + '"></div>';
    }
  }

  $('#grid').append(tiles);
};

var move = new Move();

makeGrid(10, 10);

$(document).on('mousedown', '.tile', move.showMoveableTiles);

#grid {
  width: 300px;
  cursor: pointer;
}

.tile {
  width: 30px;
  height: 30px;
  background-color: #777;
  outline: 1px solid goldenrod;
  float: left;
}

.tile:hover {
  background-color: #999;
}

.moveable {
  background-color: #add8e6;
}

.moveable:hover {
  background-color: #c8ebf7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>

Answer 1

您可以使用slice 从二维数组中切出块。要确定您需要哪些部分，您需要计算该区域中的哪些行和哪些列。

假设您在x: 3, y: 5 有一个点，并希望在此位置周围有一个size: 2 的区域，您将计算：

var topRow = y - size;
var bottomRow = y + size;
var leftColumn = x - size;
var rightColumn = x + size;

现在，您可以循环遍历行并使用 row.slice(leftColumn, rightColumn + 1) 对每一行进行切片

下面的示例显示了它是如何完成的，但我没有包含您的确切示例。此外，它不适用于距离网格边缘太近而无法处理所需大小的坐标。我会把它留给你来解决。 （另外，它在 ES6 中）

const getArea = (x, y, s, grid) => {
  const topRow = y - s;
  const bottomRow = y + s;
  const leftCol = x - s;
  const rightCol = x + s;
  
  const gridArea = [];
  
  for (let r = topRow; r <= bottomRow; r += 1) {
    gridArea.push(grid[r].slice(leftCol, rightCol + 1));
  }
  
  return gridArea;
}


const tenxTen = makeGrid(10, 10);

// Get one element
logGrid(getArea(0, 0, 0, tenxTen));

// Get 3x3 around x:1, y:1 (b1)
logGrid(getArea(1, 1, 1, tenxTen));

// Get 7x7 around x:5, y:5 (f5)
logGrid(getArea(5, 5, 3, tenxTen));



// Utils
function makeRow(i, w) {
  return Array.from(Array(w), (_, j) => 
    "abcdefghijklmnopqrstuvwxyz"[i] + (j));
};

function makeGrid(w, h) {
  return Array.from(Array(h), (_, i) => makeRow(i, w))
};

function logGrid(grid) {
  console.log(grid.map(r => r.join("|")));
}