javascript - 如何使用 setInterval 和 HTML5 Canvas 解决无响应的重绘和控件问题

Question

我正在开发一个简单的 HTML5 游戏，您可以在以下网址进行测试:

http://frankcaron.com/simplegame/game.html

代码在这里:

https://github.com/frankcaron/Personal_HTML5_GamePrototype/blob/master/js/game.js

为了对元素进行动画处理，我使用了一些 setIntervals。主游戏循环有一个 setInterval ，它工作得很好。一些褪色元素也使用它们，没有问题。我遇到的问题是点击动画。

我遇到的问题是，在 Safari 中以及在某种程度上在 Chrome 中，点击事件和动画没有响应。并不是每次都会火。我认为与运行的并发间隔存在一些冲突。我不知道为什么。

我已经使用 requestAnimFrame 对 HTML5 动画的其他方法进行了一些研究，但我认为这不能解决我的问题。

这是感兴趣的代码:

//Track mousedown
addEventListener('mousedown', function (e) {
    //Safari Fix
    e.preventDefault();
    //If you click while the game is going, do your special move
    performSpecial();
}

//Perform a special move
var performSpecial = function () {
    switch(classType)
    {
        case 1:
            //Class 1
            break;
        default:
            //No class
            renderExplosion();
    }
}

//Render explosion special move
var renderExplosion = function () {
    //Temp vars
    var alpha = 1.0;   // full opacity
    var circleMaxRadius = 32;
    fadeCircle = setInterval(function () {
        ctx.beginPath();
        ctx.arc(hero.x + 16, hero.y + 16, circleMaxRadius, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
        ctx.strokeStyle = "rgba(255, 0, 0, " + alpha + ")";
        ctx.stroke();
        circleMaxRadius = circleMaxRadius + 5;
        alpha = alpha - 0.05 ; // decrease opacity (fade out)
        if (alpha < 0) {
            clearInterval(fadeCircle);
        }
    }, 1); 
};

Answer 1

好吧，我使用 window.requestAnimationFrame 重写了应用程序，并且不再遇到这个问题。如果有人想查看完整的解决方案，代码可以在我的 Github 上找到。

简而言之，我删除了所有间隔并替换了整个游戏循环。当需要动画效果时，我会打开与事件相对应的标志。渲染器检查此条件并在标志打开时渲染效果，完成后再次关闭标志。