将鼠标坐标存储到firebase

Question

我必须制作一个《瓦尔多在哪里》类型的游戏，我很难弄清楚如何将坐标(x，y(存储在数据库(firestore(中。例如，在下面的代码中，我有两个框(请参见代码片段(。当我点击其中一个时，它会显示我点击的坐标。我想保存这些坐标，这样当用户在玩游戏时点击它们时就会匹配。我知道如何检索这些数据，使其与用户的点击相匹配，我正在努力将这些信息保存到数据库中。

const box = document.querySelector('.box')
const ie = document.querySelector('.para')
const getCoord = (e) => {
let x = e.clientX;
let y = e.clientY;

let coord = `X: ${x}, Y: ${y}`
ie.textContent = coord;
}
box.addEventListener('click', getCoord);

.box {
width: 200px;
height: 100px;
border: 1px solid black;
}
.char {
display: flex;
margin: .8rem;
}
.red,
.blue {
background: red;
width: 30px;
height: 30px;
margin: .5rem;
}
.blue {
background: blue;
}

<div class="box">
<div class="char">
<div class="red">A</div>
<div class="blue">B</div>
</div>
</div>
<p class="para"></p>

运行该片段，您会看到您在框中单击的位置获得了X和Y值。如何将这些值存储在firebase上？我感谢您的回复。

Answer 1

实际上，您可以使用不同的方法。保存所有用户点击数据是没有意义的。您可以在数据库中使用这样的JSON结构，在其中存储特定pageIdentifier的正确坐标。

{
"page1":{x:98.19586181640625, y:47.1947021484375},
"page2":{x:94.19586181640625, y:44.1947021484375},
....
}

加载特定页面后，您可以执行get调用来获取特定页面页面数据，即坐标。您可以使用这些坐标与用户单击的坐标进行交叉检查，然后继续游戏。