Question

我目前创建的游戏涉及从随机X位置的屏幕底部出现的硬币。如果英雄与硬币重叠/碰撞，则用户获得一个点。

我的问题是，当我将碰撞检测置于快速间隔函数中时，似乎碰撞在某些情况下没有注册。

我已经在下面的jsfiddle中复制了游戏（原来它使用手机的加速度计来移动英雄但是在这个例子中我很快就使它成为一个左/右键控制） - http://jsfiddle.net/wpavxn6k/1/

以下间隔的片段 -

//keep checking to see if collision has occured 
window.setInterval(function () {
    if (hitTest(app.hero, app.coinClassUnique) == true) {
        app.coinClassUnique.css('display', 'none');
        app.score++;
        $("h2").html(app.score);
    }
 }, 5);

//measure the width/height and position of the coin div and the hero image to determine if they are overlapping 

function hitTest(a, b) {
    var aPos = a.offset();
    var bPos = b.offset();

    var aLeft = aPos.left;
    var aRight = aPos.left + a.width();
    var aTop = aPos.top;
    var aBottom = aPos.top + a.height();

    var bLeft = bPos.left;
    var bRight = bPos.left + b.width();
    var bTop = bPos.top;
    var bBottom = bPos.top + b.height();

    return !(bLeft > aRight || bRight < aLeft || bTop > aBottom || bBottom < aTop);
}

我的问题是，您是否可以在我的代码中看到可能影响性能的明显缺陷，或者是否有任何关于如何在这样的基于实时的游戏中提高性能和碰撞检测的提示。

Answer 1

我只想发布这个问题的答案，以防有人遇到类似的问题。游戏的时间间隔发生在不同的时间，因此我使用requestFrameAnimation在Canvas元素内重建了游戏。这样，所有元素立即重新加载。

我有一些问题，比如图像没有正确加载等等，这就是我避免使用画布的原因 - 但是在预加载和将图像渲染到隐藏在屏幕外的单独画布的帮助下 - 我能够解决这些问题的问题。

提高HTML5 / Javascript中的碰撞检测性能

1 个答案: