Javascript 调试15个拼图中的无效移动

我做了一点，一开始我想洗牌。我从完成状态开始，随机在瓷砖上做1000次“假点击”，根据我的代码，其中一些是有效的，而大多数是无效的。有效的“假点击”会导致

清空文件

和

所选文件

通过交换其

顶部

和

左侧

值来交换其位置

一切（除了目前还不存在的

checkcompletion（）

方法）似乎都起作用了——直到人们真正尝试解决这个难题。用一个小n，我达到了50%以上的时间

在洗牌过程中，我只做有效的移动，这怎么可能呢？显然，这一定是关于我的代码检查移动是否有效：

if ((Math.abs(selectedX - emptyX) === tileSize) ^ (Math.abs(selectedY - emptyY) === tileSize)) {

（异或用于防止对角线移动。）

有人知道问题在哪里吗？或者有人对良好的调试策略有什么建议吗？经过一个多小时的调试，我有点不知所措

var idList=[“t1”、“t2”、“t3”、“t4”、“t5”、“t6”、“t7”、“t8”、“t9”、“t10”、“t11”、“t12”、“t13”、“t14”、“t15”、“t0”]；
var tileSize=100；
var init=函数（）{
//在板上放置瓷砖并添加侦听器
对于（变量列=0；列<4；列++）{
对于（变量行=0；行<4；行++）{
var div=document.querySelector（“.”+idList[行*4+列]）；
div.style.top=行*tileSize+“px”；
div.style.left=列*tileSize+“px”；
if（idList[行*4+列]！=“t0”）{
div.addEventListener（“单击”，单击Listener）；
}
}
}
//洗牌
对于（i=0；i<1000；i++）{
var fakeClick=parseInt（Math.random（）*15）；
交换选项（idList[fakeClick]）；
}
};
var clickListener=函数（e）{
var selectedTileClass=e.target.classList[1]；
交换选项（selectedTileClass）；
//检查完整性（）；//稍后执行
};
变量swapTiles=函数（selectedTileClass）{
//获取空磁贴和选定磁贴
var selectedTile=document.querySelector（“.”+selectedTileClass）；
var selectedX=parseInt（selectedfile.style.left）；
var selectedY=parseInt（selectedfile.style.top）；
var emptyTile=document.querySelector（“.t0”）；
var emptyX=parseInt（emptyTile.style.left）；
var emptyY=parseInt（emptyTile.style.top）；
//仅当选定的磁贴“旁边”为空磁贴时交换磁贴
if（（Math.abs（selectedX-emptyX）==tileSize）^（Math.abs（selectedY-emptyY）==tileSize））{
selectedFile.style.left=emptyX+“px”；
selectedFile.style.top=emptyY+“px”；
emptyTile.style.left=selectedX+“px”；
emptyTile.style.top=selectedY+“px”；
}
};
.board{
位置：相对位置；
宽度：400px；
高度：400px；
保证金：自动；
背景颜色：耐火砖；
边框：2个实心耐火砖；
}
.瓷砖{
位置：绝对位置；
宽度：100px；
高度：100px；
边框：2个实心耐火砖；
框大小：边框框；
背景颜色：橙色；
线高：100px；
字号：2rem；
字体大小：粗体；
字体系列：Arial，无衬线；
颜色：耐火砖；
文本对齐：居中；
过渡：全部.25s线性；
光标：指针；
}
.t0{
位置：绝对位置；
宽度：96px；
高度：96px；
保证金：2倍；
边框：2倍橙色固体；
框大小：边框框；
指针事件：无；
过渡：全部.25s线性；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
你是对的，你的测试是错的

想象一块小木板，中间有选定的瓷砖

ooooo
ooooo
ooxoo
ooooo
ooooo

现在看看这两个谓词的两个真值表根据空平铺的位置给出了什么

ftftf
ftftf
ftxtf
ftftf
ftftf

及

将它们与xor混合，就得到了

ftftf
tftft
ftxtf
tftft
ftftf

这意味着您在磁贴周围的“第一个圆圈”上得到了正确的响应，但在离磁贴更远的地方得到了错误的响应。
因此我必须检查每个谓词是否位于同一行/列a x上。这使得：
if（（Math.abs（selectedX-emptyX）==tileSize）和&selectedY==emptyY）^（（Math.abs（selectedY-emptyY）==tileSize）&&selectedX==emptyX））
yes它应该是这样工作的。可以用正则或| |替换^，因为如果查看真值表，则此公式中不需要xor。
ftftf
tftft
ftxtf
tftft
ftftf