javascript - 使用形状的 Fizzbuzz (p5.js)

Question

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

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

但是，

当iterand能被3整除时，画一个紫色圆圈代替当 iterand 能被 5 整除时，绘制一个绿色正方形当迭代数能被 3 AND 5 整除时，绘制一个蓝色方 block

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);
    }
  }
}

Answer 1

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

仔细阅读您自己的说明:

[...] accomplish this with a for loop that starts at zero, and increments an iterand forward by one each iteration.

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

从 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);
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>