1

我一直在玩新的 HTML5 标准,看看它可以提供什么并学习一些东西......但我不明白为什么我的游戏在 Firefox 中如此缓慢。

有几种方法可以选择“绘制”播放器和背景。可以在右下角选择。

我在Firefox 中测试了游戏,结果如下:

总而言之,结果超级慢。使用 Html 它完全滞后于画布,它看起来好一点,但仍然完全滞后......

谷歌浏览器结果:

谷歌似乎运行代码相当好......它确实没有滞后。

Internet Explorer 测试

所以这就是这一切的有趣部分。Internet Explorer 9 运行得非常好……在我的电脑上它几乎太快了。

所以我的问题是。Firefox 不喜欢我的显卡吗?或者哪里出错了?也许我的代码太慢了?但是我是否已经正确完成了测试,它只需要大约 1 毫秒来运行重绘图片的时间间隔(正如计时器在右上角指示的那样,名为 intervalTimer。

我非常想听听你得到了什么结果,如果它只是 Firefox 讨厌我的显卡。:-(

另外,如果您可以看到我可以在哪里进行一些改进以使其在 Firefox 中更好地工作。

这是我的一些代码:

interval.js文件运行 setInterval 并重绘播放器。

function interval() {
var startdate = +new Date();  // log start timestamp

if (general_slowmo > 9)
    general_slowmo = 0;
else
    general_slowmo++;

collisions();


if (drawmethod == "canvas") {
    canvas.clearRect(0, 0, general_winwidth, general_winheight);
    drawplayercanvas(p0x, p0y, 0);
}
else if (drawmethod == "html") {
    drawplayerhtml(p0x, p0y, 0);
}
else {
    drawImageWebGl(p0, p0x, (general_winheight - p0y) - general_playerheight);
}


var enddate = +new Date();  // log end timestamp
var diff = enddate - startdate;
$("#intervalTimer").html("intervalTimer: " + diff + "ms");
}

但我在 intervalTimer div 上得到的只是 0 或 1 毫秒时间。但我不知道它是否计算绘制玩家所需的时间?

在区间内,函数 Collisions 运行:

function collisions() {

var spritex = p0x;
var spritey = p0y;
var jump = jumpp0;
var keyX = keyXp0;
var keyY = keyYp0;
var onground = ongroundp0;

if (keyX == -1) { //left movement
    if (blockexists(spritex - 1, spritey) === false && blockexists(spritex - 1, spritey + general_blocksize) === false) {
        spritex--;
    }
}

if (keyX == 1) { //right movement
    if (blockexists(spritex + general_playerwidth, spritey) === false && blockexists(spritex + general_playerwidth, spritey + general_blocksize) === false) {
        spritex++;
    }
}

if (jump != 0) {
    var aboveone = blockexists(spritex, spritey + (general_playerheight - 1));
    var abovetwo = blockexists((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));

    if (aboveone === true || abovetwo === true) {
        jump = 0;

        if (toblock(spritex, spritey + (general_playerheight - 1)) == 2) {

            removeblockarray(spritex, spritey + (general_playerheight - 1));

            if (mapdrawmethod == "canvas")
                removeblockcanvas(spritex, spritey + (general_playerheight - 1));
            else
                removeblockhtml(spritex, spritey + (general_playerheight - 1));
        }
        if (toblock((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1)) == 2) {

            removeblockarray((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));

            if (mapdrawmethod == "canvas")
                removeblockcanvas((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
            else
                removeblockhtml((spritex + general_playerwidth - 1), spritey + (general_playerheight - 1));
        }
        spritey--;
    }
    else {
        jump++;
        spritey++;

        if (jump > maxjump) {
            jump = 0;
        }
    }
}

if (keyX != 0 || onground == false) {
    if (blockexists(spritex, spritey - 1) === true || (blockexists(spritex + general_playerwidth - 1, spritey - 1) === true)) {
        if (jump == 0)
            onground = true;
    }

    else if (jump == 0) {
        spritey--;
        onground = false;
    }
}

if (blockexists(spritex, spritey, "item") === true || blockexists(spritex + general_playerwidth - 1, spritey, "item") === true || blockexists(spritex, spritey + general_playerheight, "item") === true || blockexists(spritex + general_playerwidth - 1, spritey + general_playerheight, "item") === true) {

    if (toblock(spritex, spritey) == 11) {
        $("#diamcount").html(++general_numdiamonds);
    }
    else if (toblock(spritex + general_playerwidth - 1, spritey) == 11) {
        $("#diamcount").html(++general_numdiamonds);
    }
    if (toblock(spritex, spritey + general_playerheight) == 11) {
        $("#diamcount").html(++general_numdiamonds);
    }
    else if (toblock(spritex + general_playerwidth - 1, spritey + general_playerheight) == 11) {
        $("#diamcount").html(++general_numdiamonds);
    }

    if (toblock(spritex, spritey) == 10 || toblock(spritex + general_playerwidth - 1, spritey) == 10 || toblock(spritex, spritey + general_playerheight) == 10 || toblock(spritex + general_playerwidth - 1, spritey + general_playerheight) == 10) {
        if (keyY == 1) {
            if (general_slowmo > 5) {
                spritey++;
            }

            onground = true;
            jump = 0;
        }
        if (keyY == -1) {
            if (general_slowmo > 5) {
                spritey--;
            }

            onground = true;
            jump = 0;
        }
    }
}


p0x = spritex;
p0y = spritey;
jumpp0 = jump;
keyXp0 = keyX;
keyYp0 = keyY;
ongroundp0 = onground;
}

无论如何,我想说的是我想听听它为什么这么慢。如果你得到和我一样的结果。

也许是因为我把 div 放在了画布上?

4

2 回答 2

1

如果您使用的是Firebug插件,这可能是原因。

我的画布遇到了同样的问题,它在 Chrome 上运行非常流畅,但在 Firefox 上运行非常缓慢且滞后。禁用后firebug,它在 Firefox 上运行得更快,在 Chrome 上运行得更快。

希望这可以帮助。

于 2013-06-25T16:56:33.290 回答
0

我在运行 Firefox 18.0.2 的 Mac OS X 10.8.2 上 - 它实际上运行游戏比我的 Chrome 25.0.1364.99 更快、更流畅。碰巧的是,我的 Firefox 刚刚更新到 19.0,它看起来仍然很流畅。

确保您没有运行任何可能与游戏中的 JS/库冲突的扩展。禁用 Firefox 上的所有扩展并再试一次 -完全重新安装也将帮助您消除可能导致缓慢的原因。

于 2013-02-24T23:49:23.307 回答