Javascript HTML5画布游戏有一个bug，当点击时，第一块拼图会变成另一块？

我想我只是需要对我正在进行的这场比赛有一个全新的视角

这是一个滑动图像拼图，你把一个图像分割成几块，然后以随机顺序显示出来，然后我移除一块拼图，用户必须点击每个拼图块来移动它，从而将图像重新组合在一起

完整代码如下：

我遇到的错误出现在你移动的第一块拼图上，如果你再次单击它-当它移动回刚出现的位置时-拼图变为另一块在一个例子中，我注意到它变为拼图，被移除以启动游戏，但这可能只是巧合

起初，我认为问题在于setInterval方法，它是异步的，我想因为我在一个循环中，可能参考循环的迭代被搞砸了，但是我现在将相关的迭代传递到setInterval中，问题仍然存在，所以不可能是这样

更新： 我仍然认为问题与设置间隔有关。主要的问题是，当我们开始在画布上绘制图像时，原始的x/y坐标显然与我们预期的不同。我注意到，当我们点击同一个拼图块将其移回其刚刚所在的位置时，保持我们要移动的拼图块坐标的对象是不正确的。我注意到drawnOnCanvasX/Y属性与它们应该的不同，它们现在匹配空_空间变量的x/Y坐标？事实上，这种情况并非总是发生，这让我认为setInterval没有通过正确的对象从循环传递到在该时间间隔上执行的函数

---

谢谢你的帮助

问题是因为我没有从随机数组中删除特定的项目

为了让游戏正常运行，我需要移除一个拼图块，这允许其他的拼图块有一个可以移动的空间。问题是我已经清除了我想要的片段，但实际上并没有将其从数组中移除。因此，当我在数组中循环找到一个具有精确X/Y坐标的项目时，它找到了应该被移除的拼图块项目，因为移除的块是随机选择的，这就是为什么有时会首先通过循环找到该块，而其他时候会找到正确的块

上帝啊，那太痛苦了