Javascript mouse.displace是不可预测的

我正在用p5.js中的play库编写一些代码。屏幕右侧将显示一些图像，当您单击其中一个图像时，屏幕上将显示图像的彩色版本。你可以用鼠标推它来移动它。然而，当我点击第二个图像，第二个“可移动”图像出现时，它有时是可移动的，但大多数时候不是。我想知道是因为我的代码还是其他原因

正如您在代码中所看到的，我尝试单独替换它们，但它给出了错误“未捕获错误：只能在精灵或组之间检查重叠”。我首先通过的是因为变量，但是movingBlocks在草图的开头也被定义为一个变量，所以我不理解。如果有人能帮助我，我将非常高兴，谢谢

var movingBlocks;
var mouseBlock;
var bb1;
var b1;
var bb2;
var b2;
var b3;
var bb3;
var b4;
var bb4;
var b5;
var bb5;
var b6;
var bb6;
var b7;
var bb7;

function preload() {
  mouseBlock = loadImage('mouse.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  mouseBlock = createSprite(200,200);
  mouseBlock.addAnimation('normal', 'mouse.png');

  movingBlocks = new Group()
  var b1 = createSprite(windowWidth-100,75);
  b1.addAnimation('normal', 'stamps/black/black01.png');
  b1.scale = 0.4;

  b1.onMousePressed= function() {
    var bb1 = createSprite(windowWidth/2,windowHeight/2);
    bb1.addAnimation('normal', 'stamps/gradient/Stamp1.png');
    // tint(255,127);
    bb1.scale = 0.4;
    movingBlocks.add(bb1);

  }

  var b2 = createSprite(windowWidth-100,200);
  b2.addAnimation('normal', 'stamps/black/black02.png');
  b2.scale = 0.4;

  b2.onMousePressed= function(){
    var bb2 = createSprite(windowWidth/2, windowHeight/2);
    bb2.addAnimation('normal', 'stamps/gradient/Stamp2.png');
    bb2.scale = 0.3;
    movingBlocks.add(bb2);
  }

  var b3 = createSprite(windowWidth-100, 325);
  b3.addAnimation('normal', 'stamps/black/black03.png');
  b3.scale = 0.4;

  b3.onMousePressed = function(){
    var bb3 = createSprite(windowWidth/2, windowHeight/2);
    bb3.addAnimation('normal', 'stamps/gradient/Stamp3.png');
    bb3.scale = 0.4;
    movingBlocks.add(bb3);
  }

  var b4 = createSprite(windowWidth-100, 450);
  b4.addAnimation('normal', 'stamps/black/black04.png');
  b4.scale = 0.4;

  b4.onMousePressed = function(){
    var bb4 = createSprite(windowWidth/2, windowHeight/2);
    bb4.addAnimation('normal', 'stamps/gradient/Stamp4.png');
    bb4.scale = 0.4;
    movingBlocks.add(bb4);
  }

  var b5 = createSprite(windowWidth-100, 575);
  b5.addAnimation('normal', 'stamps/black/black05.png');
  b5.scale = 0.4;

  b5.onMousePressed = function(){
    var bb5 = createSprite(windowWidth/2, windowHeight/2);
    bb5.addAnimation('normal', 'stamps/gradient/Stamp5.png');
    bb5.scale = 0.4;
    movingBlocks.add(bb5);
  }

  var b6 = createSprite(windowWidth-100, 690);
  b6.addAnimation('normal', 'stamps/black/black06.png');
  b6.scale = 0.4;

  b6.onMousePressed = function(){
    var bb6 = createSprite(windowWidth/2, windowHeight/2);
    bb6.addAnimation('normal', 'stamps/gradient/Stamp6.png');
    bb6.scale = 0.4;
    movingBlocks.add(bb6);
  }

  var b7 = createSprite(windowWidth-100, 825);
  b7.addAnimation('normal', 'stamps/black/black07.png');
  b7.scale = 0.4;

  b7.onMousePressed = function(){
    var bb7 = createSprite(windowWidth/2, windowHeight/2);
    bb7.addAnimation('normal', 'stamps/gradient/Stamp7.png');
    bb7.scale = 0.5;
    movingBlocks.add(bb7);
  }
}

function draw() {
  background(240,240,240);
  mouseBlock.position.x = mouseX;
  mouseBlock.position.y = mouseY;
  mouseBlock.scale=0.3;

        if(keyDown('x')) {
          bb1.rotation -= 6;
          // bb1.changeAnimation('spinning');
        }
  mouseBlock.displace(movingBlocks);
  // mouseBlock.displace(bb1);
  // mouseBlock.displace(bb2);
  // mouseBlock.displace(bb3);
  // mouseBlock.displace(bb4);
  // mouseBlock.displace(bb5);
  // mouseBlock.displace(bb6);
  // mouseBlock.displace(bb7);

  drawSprites();
}

---

我找到了答案！它是如此简单。。。 我只需要把这两条线调换一下：

mouseblock.displace(movingblocks);
drawSprites();

---

我不完全确定这是否总能解决这个问题，但我可以在所有的街区走动，这样至少我有一个最后的作品要在我的演讲中展示。谢谢你的帮助bs和

bb

s，这可能会导致不可预测的行为。任何变量只需输入一次

var

。@jstl感谢您留下答案！我尝试过这个（我很笨，无法监督这个），但遗憾的是，它没有帮助。文件大小也可能是一个问题吗？因为有这么多的图像。我仍然希望它们保持良好的质量，因为我的目标是导出动画并在视频编辑中使用它们（这很有效）。现在我的文件大约是152kb，我不认为文件大小会成为一个问题。如果您提供编辑器的链接，我可能可以提供更多帮助。如果您怀疑文件大小有问题，也可以尝试用较小的图像替换当前图像，看看问题是否自行解决。@jstl感谢您的帮助！我这一周很忙，很抱歉这么晚才回复，但在再次请求你的帮助之前，我尝试了不同的事情。最后，我不得不换两条线路。但再次感谢！