您如何不断将 "if else" 语句添加到 "for" 循环（或一个函数，该函数查看某个值是否小于某个值，然后在其为假时停止）？

Question

我正在尝试在 processingjs 中创建一个程序，允许用户创建他们想要的任何大小的正方形网格，并且每当您单击正方形时它都会变成另一种颜色。到目前为止，我已经完美地完成了。您可以在以下网址查看：https://www.khanacademy.org/computer-programming/tile-creator/5356772601151488

整个代码为：

var fraction = width/gridSize; //divides the width of the canvas by the grid size. this allows us to put squares in each fraction (ej. if the gridsize is 5, then the fraction will divide the width of the canvas by 5, then with this we can draw a square in the first fifth of the canvas, second fifth of the canvas, etc. by multiplying the fraction by 1, 2, 3, 4, etc.)

for (var e = 0; e < gridSize; e++){ //i cant believe this works
    for (var i = 0; i < gridSize; i++){ //first it draws the squares by columns
        rect(i * fraction, fraction*e, fraction, fraction); //however it only draws them column by column, to make it go through all the rows i put it in yet another for loop that increments its variable e by 1, and draw each individual row with that
}}

var squareOnTopOfMouseX = 69;
var squareOnTopOfMouseY = 69;
var foundLocation = 0;

mouseClicked = function() {
    fill(255, 0, 0); //makes the color of the squares red
    
    if(mouseX < 1 * fraction){ //if the mouse X coord is within the FIRST fifth of the fraction
        squareOnTopOfMouseX = 0 * fraction; //sets the coord for the square to be on the 0th tile place. and so on for the rest
        
        } else if(mouseX < 2 * fraction){
        squareOnTopOfMouseX = 1 * fraction;
        
        } else if(mouseX < 3 * fraction){
        squareOnTopOfMouseX = 2 * fraction;
        
        } else if(mouseX < 4 * fraction){
        squareOnTopOfMouseX = 3 * fraction;
        
        } else if(mouseX < 5 * fraction){
        squareOnTopOfMouseX = 4 * fraction;
        }
        
    if(mouseY < 1 * fraction){ //if the mouse Y coord is within the FIRST fifth of the fraction
        squareOnTopOfMouseY = 0 * fraction; //sets the coord for the square to be on the 0th tile place. and so on for the rest
        
        } else if(mouseY < 2 * fraction){
        squareOnTopOfMouseY = 1 * fraction;
        
        } else if(mouseY < 3 * fraction){
        squareOnTopOfMouseY = 2 * fraction;
        
        } else if(mouseY < 4 * fraction){
        squareOnTopOfMouseY = 3 * fraction;
        
        } else if(mouseY < 5 * fraction){
        squareOnTopOfMouseY = 4 * fraction;
        }
        
    rect(squareOnTopOfMouseX, squareOnTopOfMouseY, fraction, fraction);
};

现在，我认为您无需理解我的代码即可回答我的问题。如果你看一下代码的最后，我有一系列 if 语句，它们基本上是在检查：如果用户点击了 canvas 的第一个部分（例如，如果网格是 5x5，那么它如果您单击 canvas 的第一个五分之一），然后将红色方块的 X 坐标放在 canvas 的第一个五分之一上。如果用户点击了第二个五分之一，然后将 X 坐标放在 canvas 的第二个五分之一上，等等。除了 Y 坐标外，它也做完全相同的事情。

再一次，我认为如果你不明白也没关系。但最后我的代码不仅效率低下，如果你将网格大小设置为大于 5，它也会中断（因为我需要手动向它添加更多语句）

我试过创建类似

的东西

for (var i = 0; i < gridSize; i++){
        if(mouseX < 1 * fraction){
            squareOnTopOfMouseX = i * fraction;
        }
    }

（为简单起见，我们现在忽略 Y 坐标，因为一旦修复，它应该是完全相同的代码）

但是上面这段代码行不通。无论我做什么，一旦编写为 for 或 while 循环，我就无法让我在开始时粘贴的相同代码正常工作。谁能帮我指出正确的方向？我认为 for 循环是我应该使用的，因为初始 if 语句之后的所有代码都是相同的：

else if(mouseX < (SomeGivenNumber) * fraction){
        squareOnTopOfMouseX = (SomeGivenNumber-1) * fraction;

（SomeGivenNumber 应该一直到 gridSize 设置的值为止）

正如我的问题标题所说，我认为对我来说有用的是继续添加 else if 语句，只要需要就可以了。比如，如果网格设置为 90x90，那么 'else if' 语句将一直到 90。但我不知道该怎么做。

Answer 1

一位名叫 Gerardo Furtado 的用户在评论中回复了一行完美的代码，这正是我想要的。我替换了所有混乱的 if 和 else if 语句

squareOnTopOfMouseX = (~~(mouseX / fraction)) * fraction

它就像一个魅力。其他用户的回答也有点管用，但 gerardo 是最简单的一个。 ngl idk 那个语句到底在做什么，但它有效！

编辑：出于某种原因，我也不能将我自己的答案标记为问题的答案（带有绿色复选标记的东西），所以除非其他用户想用我刚才写的内容回复，否则我可以将其标记为已回答这样 Whosebug 就会保持清洁。感谢所有帮助过的人

您如何不断将 "if else" 语句添加到 "for" 循环（或一个函数，该函数查看某个值是否小于某个值，然后在其为假时停止）？

How do you keep adding "if else" statements to a "for" loop (or a function that looks if a value is less than something, then stops once its false)?

javascript

canvas