Your Box objects don't behave like objects, because you use them in 3 ways:
- class:
list[id] = new box(id, color, x, y);
- function:
list[0] = box(id, color, x ,y);
- object:
box.y = y;
,box.color = 'red';
etc
The list
part is right: keep a collection of (moving) boxes. The loop part isn't, because you don't use the list. You only 'loop' 1 box.
I've updated the fiddle: http://jsfiddle.net/rudiedirkx/7eUEE/1/ and I've renamed the box
class to Box
, because there might be Box
objects named box
.
The important parts:
// Create initial box
list[id++] = new Box(id, color, x ,y);
// Create more boxes
list[id++] = new Box(id, 'red', x, y);
// Loop through existing boxes animation
function loopdraw() {
list.forEach(function(box) {
// Draw