Доступ к стилям CSS с помощью JavaScript слишком медленный

Question

Я создаю простую игру физики гравитации с JavaScript. Я едва начал, когда понял, что, вероятно, что-то делал не так, потому что это происходило ОЧЕНЬ медленно.

Я использую круговые элементы div в виде планет html и небольшой элемент div для мяча (это игра в мини-гольф). Мой код выглядит так:

  function Ball([x, y, r]) {
    this.b = document.createElement("DIV");
    this.b.className = "ball";
    this.b.style.width = r * 2 + "px";
    this.b.style.height = r * 2 + "px";
    this.b.style.left = x + "px";
    this.b.style.top = y + "px";
    this.start = [x, y];
    this.v = [0, 0];
    this.planets = levels.list[levels.currLevel][1];
    // the above line just has the information for each planet
    document.body.appendChild(this.b);
  }
  Ball.prototype.physics = function () {
    var b = this;
    var a = [0.25, -0.09];
    this.planets.forEach(function (info) {
      // change acceleration from each planet
    });
    b.v[0] += a[0];
    b.v[1] += a[1];
    b.b.style.left = (parseFloat(b.b.style.left) + b.v[0]) + "px";
    b.b.style.top = (parseFloat(b.b.style.top) + b.v[1]) + "px";
    setTimeout(function () {b.physics();}, 30);
  }

Основная проблема заключается в том, что я обращаюсь к свойствам CSS с помощью JavaScript 33 раза в секунду.

Я довольно новый программист, поэтому, если есть совершенно альтернативный способ создания фигур и их перемещения без использования элементов DOM и CSS, я бы очень хотел узнать об этом!

Answer 1

Использование requestAnimationFrame вместо setTimeout повысит производительность.Кстати, лучше всего использовать Canvas для запуска вашей игры, это супер быстро.Вы можете взглянуть на PIXI.js или EaselJS.