почему моя анимация с html5 canvas такая мерцающая?

Сплав массива вызывает пропуски объектов

Ваша анимация щелкает по множеству причин.

Основной из них - это то, как вы удаляете мяч или золото. Вы вызываете функцию update из цикла for.

for(i = 0; i < balls.length; i++){
    balls[i].update();
}

Затем в функции обновления вы проверяете, находится ли мяч вне пределов. Если вы удаляете его из массива

if(this.y > 510) { //  example not your code
     balls.splice(i,1);
}

Но вы игнорируете тот факт, что вы только что переместили все шары над этим в массив вниз по одному индексу. Когда функция обновления возвращает шар в i, была удалена, а следующая над ним теперь находится в точке i. Затем цикл увеличивает i и вы рисуете следующий мяч, пропуская мяч.

Пропущенный мяч не отображает эту рамку и, таким образом, вы получаете мерцание. То же самое с золотом.

Быстрая починка

Есть и другие проблемы (многие), и для исправления потребуется полная переписывание.

Вы можете просто сбросить мяч и золото, а не удалить его и создать другое.

Где у вас есть

if(this.y  > 510 || this.x > 510 || this.x  < -30) { ballArray.splice(i,1) }

измените его на

if(this.y  > 510 || this.x > 510 || this.x  < -30) {
     this.x = Math.random() * 500;
     this.y = Math.random() * 500;
     this.zx = Math.random() - 0.5;
     this.zy = 1;
     this.rotation = 0;         
}

и удалите строку

if(ballArray.length < 99) {ballArray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}

Сделайте то же самое для золота.

это подготовит вас к следующей проблеме.

Некоторые кодовые заметки.

У вас все еще будут проблемы, потому что у вас есть золото и мяч как один объект, представляющий как мяч, так и золото для каждого шара и то же самое для каждого золота.

Вам нужен шар и золото как отдельные предметы, так что золото не рисует мяч, а наоборот.

У тебя должно быть

 function Gold(){ 
     this.draw(){ // draw code
     this.update() { // update code
     ...
 }
 function Ball(){ /* code */
     this.draw(){ // draw code
     this.update() { // update code
     ...
 }

И создайте каждый

 ballArray.push(new Ball( stuff));
 goldArray.push(new Gold( stuff));

Также вам нужно объявить все переменные, которые вы не сделали для i, j которые, таким образом, попадают в глобальную область действия и скоро вернутся к вам.

Всякий раз, когда вы используете переменную, она ДОЛЖНА иметь в некотором месте внутри функции объявление.

например

 function animate(){
     var i;
     var j;
     ... rest of code.

Ох и еще...

но сейчас я оставлю его.