How to loop a drawLine so it repeats itself 10 times

Question

I am currently trying to create a sudoku grid in javascript, to do this I need to set up a loop so one line re-appears 10 times with a gap of 20 pixels between each one. So far I have:

var canvas;
canvas = openGraphics();

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

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

canvas.paint();

How would you recommend to do this?

score 2 · Answer 1 · answered Jan 09 '11 at 14:12

As you already stated, you have to use a looping construct.

The Mozilla Developer Network has good documentation on these.

But honestly, I think you should rather read their JavaScript Guide before trying to write a Game, otherwise you'll end up bumping into a ton of dead ends and you will soon loose the interest in making the game at all.

Also, please stay on MDN when searching looking JavaScript help, since there are a lot of sites on the Internet that have bad, old, broken code example and help.

Especially stay away from w3schools.

thank you, ill take a look at those :) its for coursework, i just need to produce the actual grid. — Beth M, Jan 09 '11 at 14:14

Kurru · Accepted Answer · 2011-01-09T14:42:14.570

There are various looping constructs available to programmers, the 2 most common ones are the for loop and the while loop.

The for loop is good for "looping" a number of times and the while loop is for looping while some value is "true".

In this case, you know the number of lines that you need to draw so the for loop is best matched

This is example code for the for loop. What happens is that the code between the { and } is run multiple time. Each time the loop runs, variable i gets larger by 1, starting from 0. This continues until the condition i<numberTimesToLoop becomes false.

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

Not that I want to do your assignment for you, but in a lot of cases its easier to learn from seeing actual code. (I demonstrate and I find plenty of students who on seeing an answer can immediately recognise it in the future. Of course I give them the theory first and if it doesn't click I try this method...)

This modification to your current code will draw your vertical lines.

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

(Not really sure what the problem with the w3schools website is)

`document.write` and w3schools... **never** use either of them. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Ivo Wetzel, Jan 09 '11 at 14:46
Just because it can be misused doesn't mean its bad, in the article you linked, the most upvoted answer has more votes than the one supporting your view. Also, enough with the anti-w3schools peddling. Even in your link, the selected answer links to w3schools — Kurru, Jan 09 '11 at 15:01
I don't think there's anything wrong with recommending a superior source of JavaScript documentation. W3School **is** pretty bad - if you want to, pop into the JavaScript room - we're building a list of reasons. — Yi Jiang, Jan 09 '11 at 15:04
Thank you very much! it really does help a lot. exactly how i was trying to write it aswell! just couldnt get it quite right on my own :) — Beth M, Jan 09 '11 at 15:35

How to loop a drawLine so it repeats itself 10 times

2 Answers2