基础JavaScript问题：如何实现4条红蓝条纹效果？

嘿，我瞅了下你的代码，问题主要出在嵌套循环的变量名冲突上，另外循环次数也没匹配你的需求，这才导致只渲染出2条条纹。

问题根源 #

1. 变量名重复踩坑：你外层循环和内层循环都用了i当变量名，这会导致内层循环跑完后，i的值直接变成5，外层循环的i < 2条件瞬间不满足，所以外层只执行了一次就停了。
2. 循环次数不对：你内层循环设成了5次，这会生成5行，但你要的是4条条纹，次数得调整。

修正后的代码 #

function start() {
  var row = 0;
  var blue = 0;
  var red = 100;
  // 外层循环改用j，避免和内层的i冲突
  for (var j = 0; j < 2; j++) {
    // 内层循环跑2次，结合外层2次刚好生成4组条纹
    for (var i = 0; i < 2; i++) {
      // 创建蓝色方块
      var rect = new Rectangle(100, 100);
      rect.setPosition(blue, row);
      rect.setColor(Color.blue);
      add(rect);
      
      // 创建红色方块
      var rect2 = new Rectangle(100, 100);
      rect2.setPosition(red, row);
      rect2.setColor(Color.red);
      add(rect2);
      
      // 下移一行，准备下一组方块
      row += 100;
    }
    // 横向偏移，准备下一列的方块
    blue += 200;
    red += 200;
  }
}

关键修改说明 #

• 修复变量冲突：把外层循环变量改成j，这样内层的i就不会覆盖外层循环的计数，外层能完整执行2次。
• 调整循环次数：内层循环从5次改成2次，结合外层的2次循环，刚好生成4行（每行2个方块，完美匹配4条蓝红相间条纹的需求）。

如果你想要的是纵向排列的4条单色彩条纹（蓝、红、蓝、红），可以简化代码不用嵌套循环：

function start() {
  var row = 0;
  for (var i = 0; i < 4; i++) {
    var rect = new Rectangle(200, 100); // 宽度设为200，横向铺满
    rect.setPosition(0, row);
    // 交替设置颜色
    rect.setColor(i % 2 === 0 ? Color.blue : Color.red);
    add(rect);
    row += 100;
  }
}

内容的提问来源于stack exchange，提问作者IssaMe