我正在构建一艘战舰应用。目标是每次页面刷新时在板上随机生成船只。我的问题是我必须确保飞船永远不会相互碰触,我只是想不通。
这是我的船只阵列,每艘船都是一个名称和两个方向:
const shipArray = [
// sous marins x4
{
name: "destroyer",
directions: [
[0, 1],
[0, width],
],
},
{
name: "destroyer",
directions: [
[0, 1],
[0, width],
],
},
{
name: "destroyer",
directions: [
[0, 1],
[0, width],
],
},
{
name: "destroyer",
directions: [
[0, 1],
[0, width],
],
},
//torpilleurs x3
{
name: "cruiser",
directions: [
[0, 1, 2],
[0, width, width * 2],
],
},
{
name: "cruiser",
directions: [
[0, 1, 2],
[0, width, width * 2],
],
},
{
name: "cruiser",
directions: [
[0, 1, 2],
[0, width, width * 2],
],
},
//escorteurs x2
{
name: "battleship",
directions: [
[0, 1, 2, 3],
[0, width, width * 2, width * 3],
],
},
{
name: "battleship",
directions: [
[0, 1, 2, 3],
[0, width, width * 2, width * 3],
],
},
//croiseur x1
{
name: "carrier",
directions: [
[0, 1, 2, 3, 4],
[0, width, width * 2, width * 3, width * 4],
],
},
];
这是比在船上随机生成飞船的代码:
function generate(ship) {
let randomDirection = Math.floor(Math.random() * ship.directions.length);
let current = ship.directions[randomDirection];
if (randomDirection === 0) direction = 1;
if (randomDirection === 1) direction = 10;
let randomStart = Math.abs(
Math.floor(
Math.random() * userSquares.length -
ship.directions[0].length * direction
)
);
const isTaken = current.some((index) =>
userSquares[randomStart + index].classList.contains("taken")
);
const isAtRightEdge = current.some(
(index) => (randomStart + index) % width === width - 1
);
const isAtLeftEdge = current.some(
(index) => (randomStart + index) % width === 0
);
if (!isTaken && !isAtRightEdge && !isAtLeftEdge)
current.forEach((index) =>
userSquares[randomStart + index].classList.add("taken", ship.name)
);
else generate(ship);
}
generate(shipArray[0]);
generate(shipArray[1]);
generate(shipArray[2]);
generate(shipArray[3]);
generate(shipArray[4]);
generate(shipArray[5]);
generate(shipArray[6]);
generate(shipArray[7]);
generate(shipArray[8]);
generate(shipArray[9]);
答案 0 :(得分:0)
如果您不想在船上生成船:
我将处理随机生成的飞船theShip
和任何飞船aShip
(可能为每艘飞船添加一个className)。
您可以将theShip.offsetLeft
与elementFromPoint
进行比较。创建一个执行以下操作的函数,并将其添加到创建船只的点之后创建新船只的函数中。
theShip.style.pointerEvents = "none"
。aShip
在theShip
的位置,请返回并生成新船。
if (document.elementFromPoint(theShip.offsetLeft, theShip.offsetTop)) {return}
您需要设置theShip.style.pointerEvents = "none"
,以使elementFromPoint
本身不是theShip
。