为什么我的外部 for 循环执行的迭代次数超过了它应该执行的次数？答案

【问题标题】：Why is my outer for-loop executing more iterations than it should?为什么我的外部 for 循环执行的迭代次数超过了它应该执行的次数？
【发布时间】：2020-11-29 11:27:54
【问题描述】：

谁能告诉我为什么我的骰子从图像上消失了？我期待外部 for 循环打印一排骰子 6 次。我不知道我在做什么。谢谢

var backgroundImg, itemImg;

function preload() {
    backgroundImg = loadImage("background.jpg");
    itemImg = loadImage("Dice.png");
}

function setup() {
    createCanvas(backgroundImg.width, backgroundImg.height);
    image(backgroundImg, 0, 0);

    imageMode(CENTER);
}
var add = 54
var xpos = 412
var ypos = 262
function draw() {
    // add your for loop below
    for( j=1; j <= 6; j++){
        
        for( i=1; i <= 9; i++){
            image(itemImg, xpos + add * i , ypos)
        }
        
      ypos += 72  
    }
}

【问题讨论】：

在此处添加您的代码。不是代码的屏幕截图。它使阅读和纠正它们变得更加困难。
Why not upload images of code/errors when asking a question?
问题可能是在draw()中你没有声明i和j。
你在桌子周围的手图像并不是代码要尊重的神奇“限制”。你可以画大一点。或者你可以为了较小的设计目标而去掉图像，问题就解决了。
@GetSet 嘿，我知道手不是极限。内部 for 循环按照我想要的方式执行，因为它连续绘制了 9 个骰子，它们之间有 54 个像素。那是因为 i 在它达到 9 时停止。但是，我对外部 for 循环做了同样的事情，认为它会在 6 次后停止生成行，因为 j 应该迭代到 6，而不是它创建无尽的行。我想这并不容易看到，但这个练习需要你在虚线圆圈中画骰子，所以除此之外的任何内容都是不正确的。

标签： javascript for-loop nested-loops p5.js

【解决方案1】：

我找到了解决方案。这是我必须做的：

var backgroundImg, itemImg;

function preload() {
    backgroundImg = loadImage("background.jpg");
    itemImg = loadImage("Dice.png");
}

function setup() {
    createCanvas(backgroundImg.width, backgroundImg.height);
    image(backgroundImg, 0, 0);

    imageMode(CENTER);
}
var add = 54
var xpos = 412
var ypos = 190
var add2 = 72
function draw() {
    // add your for loop below
    for( j=1; j <= 5; j++){
        
        for( i=1; i <= 9; i++){
            image(itemImg, xpos + add * i , ypos + add2 * j)
        }
        
      //ypos += 72  
    }
}

【讨论】：

澄清一下：您使用ypos += 72 的想法不错，您的问题是ypos 在第一次调用draw() 之前被声明并初始化为190 一次.每次新调用ypos 都会保留其先前的值。为了避免更改image() 坐标，您可以采取的措施是将ypos = 190 放在第一个for 循环之前。或者更好地在 ``draw()` 中声明 add、xpos 和 ypos（除非您需要从另一个函数访问它们）