Question

我目前正在尝试使用形状创建Fizzbuzz，但无法将3和5的平方整除以正确显示。香港专业教育学院寻找答案，但似乎没有人尝试过。

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

但是，

当iterand被3整除时，改为绘制一个紫色圆圈当iterand被5整除时，改为绘制绿色正方形当iterand被3和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);
    }
  }
}

Answer 1

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

仔细阅读您自己的说明：

[...]通过for循环来完成此操作，该循环从零开始，并且每次迭代将 iterand向前加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);
        }
    }
}

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

使用形状的Fizzbuzz（p5.js）

1 个答案: