p5.js滑动拼图游戏Local Storage与像素交换异常问题求助

你遇到的重复问题核心在于直接在原像素数组上进行覆盖操作。当savedPixelGuide中的索引映射存在交叉（比如索引A需要映射到B，同时B需要映射到A）时，前一次赋值会修改原数组中的数据，后续读取该位置作为源时，拿到的已经是被修改后的值，而非初始的原始像素数据，最终导致重复。

比如你举的例子：

• 初始数组[1,2]，目标映射是[2,1]
• j=0时，将位置0的值设为位置1的原始值2，数组变成[2,2]
• j=1时，读取位置1的值（此时已经是2）赋值给位置1，最终得到[2,2]而非预期的[2,1]

解决思路是先创建原始像素数组的副本，所有源数据读取都从副本中获取，避免原数组修改对后续操作的影响：

1. 在循环前，复制shuffledPiece.pixels的原始数据到一个临时数组
2. 遍历过程中，从临时数组读取源像素，赋值到原数组的目标位置

修改后的代码片段如下：

if (key === 'W' || key === 'w') {
    
    initializeFlag = true;

    const savedPixelGuide = JSON.parse(localStorage.getItem('pixelGuide'));
    const randomPiece = pieces[shuffledArray[zer+14]];
    const shuffledPiece = shufflePixels(randomPiece, 42);
    
    // 关键：创建原始像素数组的副本
    const originalPixels = [...shuffledPiece.pixels];
    
    for (let j = 0; j < savedPixelGuide.length; j++) {
      let index1 = savedPixelGuide[j];
      let sourceIndex = index1 * 4;
      
      let targetIndex = j * 4;
      
      // 从副本读取源像素，赋值到原数组
      shuffledPiece.pixels[targetIndex] = originalPixels[sourceIndex];
      shuffledPiece.pixels[targetIndex + 1] = originalPixels[sourceIndex + 1];
      shuffledPiece.pixels[targetIndex + 2] = originalPixels[sourceIndex + 2];
      shuffledPiece.pixels[targetIndex + 3] = originalPixels[sourceIndex + 3];
    }
    
    shuffledPiece.updatePixels();
    resizedPiece = resizeImage(shuffledPiece, DIM, DIM);
    
    setTimeout(() => {
      initializeFlag = false;
    }, 1);
    return;
}

• 验证savedPixelGuide数组的正确性：确保数组中的每个索引都在合法范围内（0到shuffledPiece.pixels.length/4 - 1），且没有重复的目标索引（避免多个源位置覆盖同一个目标位置）
• 确认shufflePixels函数返回的shuffledPiece的像素数组是正确初始化的，没有提前被修改

内容的提问来源于stack exchange，提问作者Sefa Topçu