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

Posted 2023-05-09

【中文标题】获取二维数组中邻居的坐标

【英文标题】：Getting coordinates of neighbours in two-dimensional array

【发布时间】：2017-12-23 09:27:08

【问题描述】：

我正在寻找一种方法来。 我面临的问题是我想定义远邻的数量。 我知道如何使用以下向量获得直接的 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>

【问题讨论】：

代码 sn-p 无法帮助我理解您想要实现的目标

这是您当前使用的代码中的相关逻辑吗？ $('#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'); 这似乎是合理的。它不工作吗？更改正在分析的 $(this) 磁贴时是否忘记删除“可移动”类？

这个sn-p很好，除了返回二维数组中的坐标；）

【参考方案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("|")));

【讨论】：

我想我必须了解 slice 函数 - 但它看起来像是一个合法的答案。谢谢