[英]Accessing CSS styles with JavaScript is too slow
我正在使用JavaScript創建一個簡單的重力物理游戲。 當我意識到自己可能做錯了什么時,我幾乎沒有開始,因為它進展得非常慢。
我使用圓形html div元素作為行星,並使用一個小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);
}
主要問題似乎是我每秒使用JavaScript訪問CSS屬性33次。
我是一個相當新的程序員,所以如果有一種完全替代的方式來制作形狀並移動它們而無需處理DOM元素和CSS,我真的很想知道!
使用requestAnimationFrame而不是setTimeout將獲得更好的性能。 順便說一句,最好使用畫布來運行游戲,這是超級快的。 您可以看一下PIXI.js或EaselJS。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.