我正在寻找一种获取二维数组中邻居坐标的方法。 我面临的问题是我想要定义远程邻居的数量。 我知道如何使用以下矢量立即获得8个邻居:
var distance = 1;
var top_left = array[x-distance ][y-distance ];
......等等。但是我想在这个代码片段中获得更广泛的邻居。
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>
答案 0 :(得分:1)
您可以使用slice
从2d阵列中剪切块。要确定所需的部件,可以计算区域中的哪些行和哪些列。
假设您在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("|")));
}