Arrays de objetos

[dureo]

Hola, estoy realizando un sencillo juego en Canvas de html5 y intento generar unas bolas de fuego que caen.

Para generarlas uso lo siguiente:

Código:

var balls = new Array();

var numberOfFireballs = 3;

var fireball = {
	speed : 100
};

for (i = 0; i < numberOfFireballs; i++) {
	balls[i] = fireball;
};

el problema es que al hacer...

Código:

for (i = 0; i < numberOfFireballs; i++) {
		if (balls[i]) {
			if (balls[i].y > canvas.height) {
				resetFire(i);
			} else {
				balls[i].y += balls[i].speed * modifier;
			}
		}
	}

var resetFire = function(i) {
	do {
		balls[i].x = 32 + (Math.random() * (canvas.width - 64));
	} while ((balls[i].x + 30) > (canvas.width - 30) && (balls[i].x) > (30))
	balls[i].y = 0;
};

me cambia el x de todos los balls[i] a la vez y no una x diferente para cada balls[i].
Y por eso las bolas que deberían aparecer en diferentes zonas de la pantalla aparecen superpuestas todas en la misma posición.

Gracias por la ayuda, espero que se entienda.