javascript - 以后转换成二维坐标的良好数据结构？

Question

我有一个类似于国际象棋的游戏板(有攻击而不仅仅是移动)，我在其中通过将相关单元格与悬停单元格相关联来突出显示对单元格的可能影响区域，就像这样；

    this.getAOECells = function(startCell, hoveredCell) {
        let possibleCells = [hoveredCell];

        let upCell = hoveredCell.relative(0, -1);
        possibleCells.push(upCell);

        let rightCell = hoveredCell.relative(1, 0);
        possibleCells.push(rightCell);

        let downCell = hoveredCell.relative(0, 1);
        possibleCells.push(downCell);

        let leftCell = hoveredCell.relative(-1, 0);
        possibleCells.push(leftCell);

        return possibleCells;
    };

但如果我能像这样以可见的方式存储它，维护起来会简单得多

this.getAOECells = function(startCell, hoveredCell) {

let possibleCells = [
    0, 1, 0
    1, 1, 1
    0, 1, 0
]

return convertToRealCells(possibleCells, startCell, hoveredCell);
};

我如何格式化 possibleCells 数组，以便此转换函数实用？

附言我是 javascript 的新手

Answer 1

第一种方法绝对没有问题，但是你可以这样省几行:

this.getAOECells = function(startCell, hoveredCell) {
    var possibleCells = [hoveredCell];
    possibleCells.push(hoveredCell.relative(0, -1));
    possibleCells.push(hoveredCell.relative(1, 0));
    possibleCells.push(hoveredCell.relative(0, 1));
    possibleCells.push(hoveredCell.relative(-1, 0));
    return possibleCells;
};

或者这个:

this.getAOECells = function(startCell, hoveredCell) {
    return [
        hoveredCell,
        hoveredCell.relative(0, -1),
        hoveredCell.relative(1, 0),
        hoveredCell.relative(0, 1),
        hoveredCell.relative(-1, 0)
    ];
};

How can I format the possibleCells array so that this convert function would be practical?

使用二维数组:

possibleCells = [
    [0, 1, 0],
    [1, 1, 1],
    [0, 1, 0]
];

convertToRealCells 的示例代码:

//xPos, yPos - where the relativeCells' top left cell's real position is
//width, height - size of relativeCells, maybe there's a better way of getting it...
//twidth, theight - size of the map
function convertToRealCells(relativeCells, xPos, yPos, width, height, twidth, theight) {
        var res = makeArray(twidth, theight, 0);
        for (x = 0; x < width; x++) {
            for (y = 0; y < height; y++) {
                res[x + xPos][y + yPos] = relativeCells[x][y];
            }
        }
        return res;
    }

//https://stackoverflow.com/questions/13808325/creating-a-2d-array-with-specific-length-and-width
function makeArray(w, h, val) {
    var arr = [];
    for(i = 0; i < h; i++) {
        arr[i] = [];
        for(j = 0; j < w; j++) {
            arr[i][j] = val;
        }
    }
    return arr;
}

possibleCells = [
    [0, 1, 0],
    [1, 1, 1],
    [0, 1, 0]
];

console.log(convertToRealCells(possibleCells, 5, 5, 3, 3, 10, 10));

它的输出是这样的:

[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

你可以像这样使用它

this.getAOECells = function(startCell, hoveredCell) {

    let possibleCells = [
        [0, 1, 0],
        [1, 1, 1],
        [0, 1, 0]
    ]

    return convertToRealCells(possibleCells, hoveredCell.x - 1, hoveredCell.y - 1, 3, 3, map.width, map.height);
};

map.width 和 map.height 是 map 的大小，hoveredCell.x 和 hoveredCell.y 是悬停单元格的位置。

如果 possibleCells 始终相同且只是位置发生变化，则可以将其设置为全局常量。

编辑:

转换为实坐标的方法在大 map 上非常低效，但它更容易理解，尤其是当您使用复杂的图案时。

如果您想在不使代码在大 map 上无效的情况下采用更直观的方式，请执行以下操作:

//xPos, yPos - where the relativeCells' top left cell's real position is
//width, height - size of relativeCells, maybe there's a better way of getting it...
function convertToRealCells(relativeCells, xPos, yPos, width, height) {
    var res = [];
    for (x = 0; x < width; x++) {
        for (y = 0; y < height; y++) {
            if (relativeCells[x][y] == 1) {
              res.push({
                "x": x + xPos,
                "y": y + yPos
              });
            }
        }
    }
    return res;
}

possibleCells = [
    [0, 1, 0],
    [1, 1, 1],
    [0, 1, 0]
];

console.log(convertToRealCells(possibleCells, 5, 5, 3, 3));

它的输出是这样的:

[[object Object] {
  x: 5,
  y: 6
}, [object Object] {
  x: 6,
  y: 5
}, [object Object] {
  x: 6,
  y: 6
}, [object Object] {
  x: 6,
  y: 7
}, [object Object] {
  x: 7,
  y: 6
}]

您可以像这样访问每个元素的坐标:

res = convertToRealCells(possibleCells, 5, 5, 3, 3);

for (i = 0; i < res.length; i++) {
  console.log(i + ". x: " + res[i].x + ", y: " + res[i].y);
}