javascript - JS 游戏中 Canvas 渲染视错觉(短暂重复的图形)- 修复吗？

Question

我正在用 JavaScript 创建一个横向卷轴太空射击游戏。到目前为止，一切似乎都进展顺利。然而， Canvas 渲染中有一个奇怪的错误，我无法完全弄清楚(并且很难描述，所以请耐心等待!)

我有一个可以通过单击鼠标左键来发射射弹的玩家。当射弹第一次离开玩家时，会短暂地出现两个射弹，直到它们最终合并为一个射弹。我没有创建两个，所以这看起来像是一种视错觉(如果你快速连续发射一些射弹，这一点最为明显)。

真正奇怪的是，当我 try catch 发生的情况的屏幕截图时，一切看起来都很好。谁能弄清楚发生了什么事吗？

包括射弹的玩家代码( fiddle 中的完整代码)；

var Player = (function () {
    // ------------------------------------------------------------------------------------------------
    // PLAYER VARIABLES
    // ------------------------------------------------------------------------------------------------
    var w = 50;
    var h = 50;
    var x = 0;
    var y = 0;
    var projectiles = [];

    // ------------------------------------------------------------------------------------------------
    // BIND EVENTS TO THE GLOBAL CANVAS
    // ------------------------------------------------------------------------------------------------
    Canvas.bindEvent('mousemove', function (e) {
        y = (e.pageY - Canvas.element.getBoundingClientRect().top) - (h / 2);
    });

    Canvas.bindEvent('click', function () {
        createProjectile(50, (y + (h / 2)) - 10);
    });

    // ------------------------------------------------------------------------------------------------
    // FUNCTIONS
    // ------------------------------------------------------------------------------------------------
    var createProjectile = function (x, y) {
        projectiles.push({
            x: x,
            y: y
        })
    };

    var update = function () {
        for (var p = projectiles.length - 1; p >= 0; p--) {
            projectiles[p].x += 10;

            if (projectiles[p].x > Canvas.element.width)projectiles.splice(p, 1);
        }
    };

    var render = function () {
        Canvas.context.fillStyle = 'white';
        Canvas.context.fillRect(x, y, w, h);

        for (var p = 0; p < projectiles.length; p++) {
            Canvas.context.fillStyle = 'red';
            Canvas.context.fillRect(projectiles[p].x, projectiles[p].y, 5, 5);
        }
    };

    // ------------------------------------------------------------------------------------------------
    // Exposed Variables and Functions
    // ------------------------------------------------------------------------------------------------
    return {
        update: update,
        render: render
    }
})();

Js Fiddle 演示在这里:https://jsfiddle.net/oqz204bj/

编辑

根据@Pimskie的回答，它确实看起来像是一种视错觉 - 所以我的问题现在变成了，我怎样才能减少这种影响？我计划在未来实现一项功能，允许玩家切换武器(其中一些武器实际上会发射多个射弹)，但我不希望这种效果继续存在，因为担心会造成困惑。

Answer 1

是的，这是一种视错觉。第一次发射时看起来有多个方 block 的原因是因为你的眼睛集中在大的静态船舶方 block 上。一旦您的眼睛开始跟随移动路径，它看起来更像是一个移动的流体方 block ，而不是每秒重绘 60 或 30 次的方 block 。将一张纸或您的手放在屏幕上，覆盖其左半部分。将注意力集中在纸上并开几枪。您会注意到，射击似乎出现了多次，与刚刚发射时相同。将 3 个不同的框架视为同一个框架取决于您的心态。

requestAnimationFrame 取决于您的浏览器和计算机的帧速率。大多数情况下为 60 fps。 60 到 70 fps 是大多数显示器的极限，因此尝试超越该极限是没有意义的。然而，您可以通过对射弹施加拖尾示踪效果来创造更流畅运动的错觉。这需要在每个射弹后面创建 2 或 3 个额外的方 block ，这些方 block 的不透明度越来越小。