如何循环drawLine使其重复10次

Question

我目前正在尝试在 javascript 中创建数独网格，为此我需要设置一个循环，以便一条线重新出现 10 次，每条线之间有 20 像素的间隙。到目前为止，我有：

var canvas;
canvas = openGraphics();

var x;
var y;
var gap;
x = 20;
y = 20;
gap = 25;

canvas.drawLine(20, 20, 20, 245);

canvas.paint();

您建议如何执行此操作？

Answer 1

正如你已经说过的，你必须使用循环结构。

Mozilla 开发者网络在这些方面有很好的documentation。

但老实说，我认为在尝试编写游戏之前，您应该阅读他们的JavaScript Guide，否则您最终会遇到大量死胡同，您很快就会完全失去制作游戏的兴趣。

另外，在搜索 JavaScript 帮助时，请留在 MDN，因为 Internet 上有很多网站都有糟糕、陈旧、损坏的代码示例和帮助。

尤其是远离 w3schools。

Answer 2

程序员可以使用多种循环结构，最常见的两种是for loop 和while loop。

for 循环适用于“循环”多次，while 循环适用于在某个值为“true”时循环。

在这种情况下，您知道需要绘制的行数，以便最匹配 for 循环

这是 for 循环的示例代码。发生的情况是 { 和 } 之间的代码运行了多次。每次循环运行时，变量 i 从 0 开始变大 1。这种情况一直持续到条件 i 变为 false。

for(var i=0;i<numberTimesToLoop;i++)
{
    document.write("i = " + i);
    document.write("<br />");
}

并不是我想为你完成任务，但在很多情况下，通过查看实际代码更容易学习。 （我演示了，我发现很多学生看到答案后可以立即识别它。当然我先给他们理论，如果它不点击我试试这个方法......）

对您当前代码的此修改将绘制您的垂直线。

var canvas;
canvas = openGraphics();

var x;
var y;
var gap;
x = 20;
y = 20;
gap = 25;


var currentX = 20;
for(var i=0;i<10;i++)
{
    canvas.drawLine(currentX, 20, currentX, 245);
    currentX = currentX + gap;
}
canvas.paint();

（不太确定 w3schools 网站的问题是什么）