使用形状的 Fizzbuzz (p5.js)答案

【问题标题】：Fizzbuzz using shapes (p5.js)使用形状的 Fizzbuzz (p5.js)
【发布时间】：2020-01-30 21:53:15
【问题描述】：

我目前正在尝试使用形状创建一个 fizzbuzz，但无法正确显示可被 3 和 5 整除的正方形。我已经搜索了答案，但似乎没有人尝试过。

编写一个程序，在屏幕上绘制 25 个水平方向的黑色圆圈。请使用从 0 开始的 for 循环来完成此操作，每次迭代将 iterand 向前递增 1。

然而，

当iterand能被3整除时，改为画一个紫色圆圈当 iterand 可以被 5 整除时，画一个绿色方块代替当迭代数可以被 3 AND 5 整除时，画一个蓝色方块来代替

function setup() {
createCanvas(1500, 1500);
ellipseMode(CENTER);
}

function draw() {
  background(200);
  var y = 100;
  // 25 black squares
  for (let x = 0; x < 1250; x += 50) {
    fill(0);
    ellipse(x, y, 50, 50);
    // sets the purple circle
    if (x % 3 === 0) {
      fill(153, 31, 240);
      ellipse(x, y, 50, 50);
    }
    // sets the green squares should be on top
    if (x % 5 === 0) {
      fill(0, 255, 0);
      square(x + 25, y - 25, 50);
    }
    // sets the last blue square
    // issue is the is supposed to be only one at the 15 mark
    if (x % 3 == 0 && x % 5 == 0) {
      fill(0, 0, 255);
      square(x + 25, y - 25, 50);
    }
  }
}

【问题讨论】：

标签： javascript for-loop if-statement processing p5.js

【解决方案1】：

主要问题是您的条件评估x。注意，x 是 x 坐标，是 50 的倍数。
您必须评估字段的索引。

仔细阅读您自己的说明：

[...] 使用一个 从零开始的 for 循环来完成此操作，每次迭代都会将 itand 向前递增 1。

此外，必须绘制形状“代替”。

从i=0 到i<25 运行一个循环：

for (let i = 0; i < 25; ++ i)

并使用一个

if () { ... } else if () { ... } else { ... }

顺序：

看例子：

function setup() {
    createCanvas(1500, 1500);
}

function draw() {
    background(200);
    var y = 100;
    // 25 black squares
    for (let i = 0; i < 25; ++ i) {
        let x = i*50; 
        
        if (i % 3 == 0 && i % 5 == 0) {
            // sets the last blue square
            fill(0, 0, 255);
            square(x, y, 50);
        }
        else if (i % 5 === 0) {
            // sets the green squares should be on top
            fill(0, 255, 0);
            square(x, y, 50);
        }
        else if (i % 3 === 0) {
            // sets the purple circle
            fill(153, 31, 240);
            ellipse(x+25, y+25, 50, 50);
        }
        else {
            // black circle
            fill(0);
            ellipse(x+25, y+25, 50, 50);
        }
    }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"&gt;&lt;/script&gt;

【讨论】：