0
377
VistasJavascript - How to find adjacent tiles in a grid?
Situation:
I have a container with a simple 3x3 grid like this:
Question:
When I click a tile I want to get the adjacent tiles in an array.
Example 1:
If the center tile is selected I want these tiles in the array:
Example 2:
If the right tile in the middle row is selected I want these tiles in the array:
Current Solution:
Currently I do this:
- get all tiles in an array called
battlefieldSlots - get the selected tiles index in
currentSlotIndex - push the tiles I need to an array called
slotTargets
This works, but the approach seems a bit clumsy. Especially since eventually I would like to have a solution that works with different grids (e.g. 4x4, 3x5, 7x7). I can't think of a good way to approach this.
Any help appreciated.
var slotTargets = [];
if (currentSlotIndex == 2) {
slotTargets.push(null);
slotTargets.push(null);
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 1));
} else if (currentSlotIndex == 3) {
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 1));
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 3));
slotTargets.push(null);
} else if (currentSlotIndex == 5) {
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 3));
slotTargets.push(null);
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 1));
} else if (currentSlotIndex == 6) {
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 1));
slotTargets.push(null);
slotTargets.push(null);
} else {
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 1));
slotTargets.push(battlefieldSlots.item(currentSlotIndex + 3));
slotTargets.push(battlefieldSlots.item(currentSlotIndex - 1));
}
2 Respuestas
Responde la pregunta0
Since you are using a 1D array data structure to store your grid, it's a little complicated to check if an index is out-of-bound. 3 for example, we have no idea if it is (0, 1) or (3, 0), so we need to have 4 variables to check edge conditions.
If you want the solution to be more elegant, using a 2D array might help
const col = 3; // width of your grid
const row = 3; // height of your grid
function getAround(index) {
let around = [];
// For Edge Condition
index = Number( index );
if( isNaN( index ) ) {
throw new Error("Index should be a number.");
}
const leftEdge = index % col === 0; // Tile on very left edge
const rightEdge = (index+1) % col === 0; // Tile on right edge
const topEdge = Math.floor( index / col ) === 0; // Tile on top edge
const bottomEdge = Math.floor( index / col ) === (row - 1); // Tile on bottom edge
if( ! leftEdge ) around.push( index - 1 );
if( ! rightEdge ) around.push( index + 1 );
if( ! topEdge ) around.push( index - col );
if( ! bottomEdge ) around.push( index + col );
return around;
}
0
If we assume you have an x & y position for your tiles (with 0,0 being top left in this example) it's somewhat easy to find the adjacent tiles
function findAdjacentTiles(x,y,gridWidth,gridheight){
return [[-1,0],[1,0],[0,-1],[0,1]] // all the possible directions
.map( ([xd,yd]) => ([x+xd,y+yd]) ) // adjust the starting point
.filter( ([x,y]) => x>=0 && x<gridWidth && y>=0 && y<gridheight) // filter out those out of bounds
}
console.log("for [1,1]:", JSON.stringify(findAdjacentTiles(1,1,3,3)));
console.log("for [2,1]:", JSON.stringify(findAdjacentTiles(2,1,3,3)));