1

我目前正在开发一个简单的 HTML5 游戏，您可以在以下 URL 进行测试：

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); 
};
4

1 回答 1

1

Welp，我使用 window.requestAnimationFrame 重写了应用程序，我不再有这个问题。如果有人想查看完整的解决方案，代码在我的 Github 上。

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

于 2013-07-04T18:41:06.430 回答