Small Canvas Gravity Modeling in JS

Question

So, I'm trying to create some circles, and then I want them to fall. Here is the code and demo: demo FireBug tells me that the "move" method is not defined for undefined objects, so something should be wrong when I want to create an array of objects. Correct my mistakes and keep in mind that I just started learning object-oriented programming in JS.

Answer 1

Instead of creating multiple events, create one event and a loop there:

setInterval(function(){ ctx.clearRect(0,0,1000,1000); //Clear the canvas here for (i = 0;i<bubble.length;++i) { bubble[i].move(); bubble[i].redraw(); } },32); 

The problem was the problem with the area. The way you wrote it i had a value of 10 in all cases where they performed.

Working fiddle: http://jsfiddle.net/some/fGChQ/16/

Another problem is that you clear the canvas in your redrawing ... For each circle.

Answer 2

I created a fork of this that addresses loop issues, there was also a problem clearing the rectangle canvas, causing some noise

Answer 3

 for (i = 0;i<bubble.length - 1; ++i) { console.log(bubble[i].y) setInterval(function(){ bubble[i].move(); bubble[i].redraw(); },32); } 

bubble.length is 10, an array is an index of 0-9. bubble [10] is undefined, so you cannot call the move method on it.