0

HTML5 ゲームでカメラ/ビューポートがどのように機能するかを示す、Gustavo Carvalho という人物によるスタックオーバーフローの投稿があります。

requestAnimationFrame の代わりに setInterval が使用されることを除いて、すべて問題ありません。

成功せずに requestAnimationFrame に変換しようとしました:-(

誰か助けてくれませんか？投稿は次のとおりです。

シンプルな HTML5 ゲーム カメラ/ビューポート

どうもありがとう！

編集:以下の回答を確認した後、この解決策を思いつきました:

次のコードを置き換えてください...

 // Game Loop
    var gameLoop = function(){                      

        update();
        draw();
    }   

    // <-- configure play/pause capabilities:



    var runningId = -1;

    Game.play = function(){

        if(runningId == -1){


                //Use setInterval instead of requestAnimationFrame for compatibility reason
            runningId = setInterval(function(){
                gameLoop();
            }, INTERVAL);



            console.log("play");

        }

    }

    Game.togglePause = function(){      
        if(runningId == -1){
            Game.play();
        }
        else
        {
            clearInterval(runningId);
            runningId = -1;
            console.log("paused");
        }
    }   

    // -->

これと交換...

// Game Loop
    var gameLoop = function(){                      

        if(gameStatus == 'play'){

            update();
                draw();

        }

        window.requestAnimationFrame(gameLoop);

    }   


    var gameStatus = 'play';

    Game.play = function() {

        gameLoop();

    }




    Game.togglePause = function() {

        if(gameStatus == 'play'){

            gameStatus = 'pause';

            console.log(gameStatus);
        }
        else if(gameStatus == 'pause'){

            gameStatus = 'play';

            console.log(gameStatus);

        }



    }
4

2 に答える 2

1

コードの次の部分を次のように変更できます。

/// add a flag as condition for loop
var isPlaying = true;

// Game Loop
function gameLoop(){                      
    update();
    draw();

    /// incorporate loop here
    if (isPlaying)
        requstAnimationFrame(gameLoop);
}

その後：

Game.play = function(){ 
    if (!isPlaying){
        isPlaying = true;    /// enable looping
        gameLoop();          /// start loop
        console.log("play");
    }
}

Game.togglePause = function(){      
    if(!isPlaying){
        Game.play();
    }
    else
    {
        isPlaying = false;   /// this will terminate loop
        console.log("paused");
    }
}

Firefox と Chrome の最新バージョンでrequestAnimationFrameは、 の接頭辞が削除されていることに注意してください。古いブラウザやその他のブラウザでは、 polyfillを使用する必要がある場合があります。

于 2013-10-11T07:23:22.533 に答える