0

メイン ゲーム ループのグローバル

var requestAnimFrame =  window.requestAnimationFrame || 
                    window.webkitRequestAnimationFrame || 
                    window.mozRequestAnimationFrame || 
                    window.msRequestAnimationFrame  ||  
                    window.oRequestAnimationFrame   || 
                    function(callback) {
                    window.setTimeout(callback, 1000/60);
                    };

以下では、この関数がアニメーションを開始する必要があることがわかります。ただし、アニメーションを表示するのに十分な時間がなくても、アニメーションが高速化されます。これは、メインのゲーム ループがそれをオーバーライドするためだと思います。これを解決する方法がわかりませんか？

function DrawSpawnAnimation() {


        anim();
    }

     function anim() {

    //alert(explodeY);

            ctxAnimation.drawImage(spriteSheet, ExplodeFrame * 100, 2740,100,100,explodeX,explodeY,100,100);

          if(ExplodeFrame == 5)
         {
         ctxAnimation.drawImage(spriteSheet, 6, 2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);

         }
          else if(ExplodeFrame == 6)
         {
         ctxAnimation.drawImage(spriteSheet, 106,  2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);

         }
         else if(ExplodeFrame == 7)
         {
         ctxAnimation.drawImage(spriteSheet, 206,  2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);

         }
          else if(ExplodeFrame == 8)
         {
         ctxAnimation.drawImage(spriteSheet, 306,  2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);

         }
           else if(ExplodeFrame == 9)
         {
         ctxAnimation.drawImage(spriteSheet, 406,  2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);

         }



            if (ExplodeFrame < 9) {     
                ExplodeFrame++;
                 setTimeout(anim, 1000 / 15);

            } 

        else
        {
        Death = false;
        ctxAnimation.drawImage(spriteSheet, 506,  2851,100,106,(Player.x - 50) + 10,(Player.y - 50) + 10,100,100);
        ExplodeFrame = 0;
        }

        //alert("hi");
        }

この関数では、プレイヤーが死んでいる場合、爆発アニメーションを呼び出します。

function Loop(){




if (isPlaying == true)
{
//document.addEventListener('click', pauseClicked ,false); //WARNING REMOVE THIS WHEN YOU CLICK MENU OR EXIT LEVEL IN ANYWAY


Platforms = [];
Lavas = [];
Flags = [];
Teleporters = [];

Prepare();




if(level == 1)
{

Level1();
}

else if(level == 2)
{
Level2();
}

else if (level ==3)
{
Level3();
}

else if (level == 4)
{
Level4();
}

else if (level ==5)
{
Level5();
}

else if (level ==6)
{
Level6();
}

else if (level ==7)
{
Level7();
}

else if (level ==8)
{
Level8();
}

else if (level ==9)
{
Level9();
}

else if (level ==10)
{
Level10();
}

else if (level ==11)
{
Level11();
}




else
{

stopLoop();
}


 if(ElevatorOn == true)
  {
   drawElevators();

  }

  if(LavaElevatorOn == true)
  {
    drawLavaElevators();
  }

  if(TeleportersOn == true)
  {
  drawTeleporters();

  }

  movePlayer();  
checkCol();
if(Death == false)
{
drawPlayer();
}

drawGUI();


if(Death ==true)
{

DrawSpawnAnimation();
requestAnimFrame(Loop);

}

else
{
requestAnimFrame(Loop); //this calls it again
}


}
}
4

1 に答える 1

0

今はアニメーション フレームの問題を検討する時間はありませんが、他に必ず行うべきことが 2 つあります。

  1. コードをフォーマットしてインデントします。あまり一貫していません。「javascript beautifier」で検索すると、多くの JavaScript ビューティファイアーを見つけることができます。1 つを選択してコードを実行し、その後変更を加えたときにフォーマットの一貫性を維持するか、beautifier を再度実行します。

  2. シンプル、シンプル、シンプル！たとえば、次のコードを考えてみましょう (ここでは再フォーマットされています)。

if( level == 1 ) {
    Level1();
} else if( level == 2 ) {
    Level2();
} else if( level == 3 ) {
    Level3();
} else if( level == 4 ) {
    Level4();
} else if( level == 5 ) {
    Level5();
} else if( level == 6 ) {
    Level6();
} else if( level == 7 ) {
    Level7();
} else if( level == 8 ) {
    Level8();
} else if( level == 9 ) {
    Level9();
} else if( level == 10 ) {
    Level10();
} else if( level == 11 ) {
    Level11();
} else {
    alert( "Game over - Still in development - Wayne Daly 2013" );
    stopLoop();
}

そのすべてのコードを次のものに置き換えることができます。

var levelFun = levelFunctions[level];
if( levelFun ) {
    levelFun();
} else {
    alert( "Game over - Still in development - Wayne Daly 2013" );
    stopLoop();
}

そして、、、などのすべての関数が定義されているLevel()場合Level2()、それらすべてを次のように置き換えます。

var levelFunctions = [
    null,  // there is no level 0
    function() {
        // level 1 function
    },
    function() {
        // level 2 function
    },
    ...
];

また、テストの長いリストを単純化してif(ExplodeFrame == N)、共通のコードをすべて使用することもできます。すべてのテストとハードコードされた値の代わりに、2 番目のパラメーターctxAnimation.drawImage()を計算するだけです。( ExplodeFrame - 5 ) * 100 + 6if

于 2013-07-06T01:00:08.953 に答える