for 循环不起作用 p5.js

Question

 var Background; function setup() { createCanvas(windowWidth, windowHeight); Background = color(0); background(Background); for(var i = 0; i < 400; i += 25) { //print("i " + i); for(var u = 0; i < 800; i += 25) { noFill(); stroke(255, 255, 255); rect(i, u, 25, 25); //print("u " + u); } } } function draw() { } function windowResized() { resizeCanvas(windowWidth, windowHeight); }

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

I am making a game that requires cells and I started debugging because the cells weren't working and this is what I got. Any idea what is wrong with it?

Answer 1

Please be more specific than saying it doesn't work. What exactly did you expect this code to do? What exactly happens instead? Which line of code is different from what you expected? Unless you can provide that information, your question is probably too broad for Stack Overflow. But I'll try to help you in a general sense.

You need to get into the habit of debugging your code . (That tutorial is for Processing, but many of the same ideas apply to P5.js and JavaScript.)

I see that you added a couple print statements in your program, which is good, but you need to read what they say to understand what your program is doing. You should also read through your code carefully, line by line, with some sample input and a piece of paper and a pencil to track variables.

Anyway, either way you should notice that your u variable is always 0 . This is probably not what you expected.

This would tell you to take a closer look at the for loop that uses the u variable:

for(var u = 0; i < 800; i += 25) {

And hopefully now it becomes obvious that you're switching variables here. This line should probably be:

for(var u = 0; u < 800; u += 25) {

In the future please try to do this type of debugging before you post. It will save you a lot of time.