关于缩短我的 p5.js 代码的建议（for 循环？）

Question

我正在制作一个程序，每次点击摩丝时，它会随机加载 6 张彼此相邻的不同图像。

function mousePressed() {
   randomNum1 = floor(random(0,6));
   randomNum2 = floor(random(0,6));
   randomNum3 = floor(random(0,6));
   randomNum4 = floor(random(0,6));
   randomNum5 = floor(random(0,6));
   randomNum6 = floor(random(0,6));

   image(dieImages[randomNum1],0,0);
   image(dieImages[randomNum2],100,0);
   image(dieImages[randomNum3],200,0);
   image(dieImages[randomNum4],300,0);
   image(dieImages[randomNum5],400,0);
   image(dieImages[randomNum6],500,0);
}

我很确定我可以在某处使用 for 循环，但不确定如何使用。任何帮助，将不胜感激。谢谢！

Answer 1

您已经在为图像使用数组。 dieImages 数组基本上包含一堆图像变量。为什么不对你的随机数做同样的事情？

语法可能如下所示：

 randomNum[0] = floor(random(0,6));
 randomNum[1] = floor(random(0,6));
 randomNum[2] = floor(random(0,6));
 randomNum[3] = floor(random(0,6));
 randomNum[4] = floor(random(0,6));
 randomNum[5] = floor(random(0,6));

您可以缩短以使用 for 循环：

for(var i = 0; i < randomNum.length; i++){
  randomNum[i] = floor(random(0,6));
}

然后您的 image() 调用使用 randomNum 变量作为索引。如果随机数像我们刚才看到的那样在一个数组中，那么 image() 行可能是这样的：

image(dieImages[randomNum[0]],0,0);
image(dieImages[randomNum[1]],100,0);
image(dieImages[randomNum[2]],200,0);
image(dieImages[randomNum[3]],300,0);
image(dieImages[randomNum[4]],400,0);
image(dieImages[randomNum[5]],500,0);

您可以将其缩短为：

for(var i = 0; i < randomNum.length; i++){
  image(dieImages[randomNum[i]], i * 100, 0);
}

旁注：如果重构此代码以使用包含图像和位置的对象而不是两个 parallel arrays 在相应索引中包含相关数据，可能会更容易。

关于缩短我的 p5.js 代码的建议（for 循环？）

Advice on Shortening My p5.js Code (for loop?)

for-loop

image

p5.js