如何解决6x6表格中空白单元格与相邻点击图片无法交换位置的问题？

嘿，我看你在做6x6的拼图交换功能时卡壳了，咱们来一步步排查问题、修复代码～

先说说你现有代码的核心问题 #

从你给出的代码片段来看，主要有这几个逻辑漏洞：

1. 索引写法不规范且边界未判断：n-01、n+01这种写法虽然JS会把01解析成1，但非常不规范；而且完全没考虑边界情况（比如第一列的图片往左取索引会变成负数，最后一行往下取会超出35的总索引），直接访问document.images[负数]会得到undefined，导致报错。
2. 逻辑方向搞反了：你现在是先取点击图片的上下左右图片，但正确的逻辑应该是先找到空白单元格的位置，再判断点击的图片是否和它相邻，而不是反过来判断点击图片的邻居是不是空白。
3. 上下相邻的索引计算错误：6x6的表格里，往上相邻的索引应该是n-6（一行6个元素），往下是n+6，你代码里这部分没写完，也是问题之一。

修正后的完整代码思路 #

我给你写了一份修复后的move函数，核心逻辑是：先定位空白单元格的位置，再判断点击的图片是否和它是上下/左右相邻的，最后执行交换。

function move(n) {
  // 获取页面上所有图片元素（确保顺序是从左到右、从上到下对应0-35索引）
  const allImages = document.images;
  let blankIndex = -1;

  // 第一步：找到空白单元格的索引
  for (let i = 0; i < allImages.length; i++) {
    // 注意：如果blank.jpg的路径有子目录，要确保includes的匹配正确，比如'./images/blank.jpg'
    if (allImages[i].src.includes('blank.jpg')) {
      blankIndex = i;
      break;
    }
  }

  // 没找到空白单元格就直接返回，避免后续报错
  if (blankIndex === -1) return;

  // 第二步：判断点击的图片是否和空白单元格相邻
  const clickedRow = Math.floor(n / 6); // 点击图片所在的行（0-5）
  const blankRow = Math.floor(blankIndex / 6); // 空白单元格所在的行
  const isSameRow = clickedRow === blankRow;

  // 左右相邻：同一行，索引差1；上下相邻：索引差6
  const isLeftRightAdjacent = isSameRow && Math.abs(n - blankIndex) === 1;
  const isUpDownAdjacent = Math.abs(n - blankIndex) === 6;

  // 第三步：如果相邻，交换两者的src
  if (isLeftRightAdjacent || isUpDownAdjacent) {
    const tempSrc = allImages[n].src;
    allImages[n].src = allImages[blankIndex].src;
    allImages[blankIndex].src = tempSrc;
  }
}

额外注意事项 #

• 图片索引绑定要正确：确保你给每个图片绑定onclick时，传递的n是正确的索引（从0到35，按表格顺序排列）。如果是用循环绑定，要注意闭包问题，比如用let而不是var来声明循环变量：

  // 示例：循环给每个图片绑定点击事件
  for (let i = 0; i < document.images.length; i++) {
    document.images[i].onclick = function() {
      move(i);
    };
  }
  

• 图片路径要统一：确保blank.jpg的路径和其他图片（01.jpg-35.jpg）的路径格式一致，避免includes('blank.jpg')匹配失败。
• 表格结构要对应索引：你的6x6表格要保证图片是从左到右、从上到下依次排列，这样索引计算（行判断、上下相邻）才会正确。

内容的提问来源于stack exchange，提问作者Swiffi