我有一个类似于国际象棋的游戏板（有攻击而不仅仅是移动），我通过将相对细胞送到悬停的细胞来突出显示攻击细胞的可能影响区域，就像这样; < / p>
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数组以使此转换函数实用？
P.S。我是javascript的新手
答案 0 :(得分：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)
];
};
如何格式化possibleCells数组以使此转换函数实用？
使用2D数组：
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是地图的大小，hoveredCell.x和hoveredCell.y是悬停单元格的位置。
如果它们总是相同且只是它的位置发生变化，你可以使可能成为一个全局常数。
修改
转换为真实坐标的方法在大型地图上非常无效，但是如果你使用复杂的模式，它更容易理解。
如果你想在不使大型地图上的代码无效的情况下采用更直观的方式，请执行以下操作：
//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);
}