Question

主要游戏循环的全球

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
}


}
}

Answer 1

我现在没有时间看动画帧问题，但还有其他两件事你应该这样做：

格式化并缩进代码。它不是很一致。您可以通过搜索“javascript beautifier”找到许多JavaScript美化器。选择一个并通过它运行代码，然后在进行未来更改时保持格式一致 - 或再次通过美化器运行。
简化，简化，简化！例如，请考虑此代码（在此重新格式化）：

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)测试列表，以便使用常见的代码。只需使用ctxAnimation.drawImage()计算第( ExplodeFrame - 5 ) * 100 + 6个参数，而不是所有if测试和硬编码值。

画布上的动画一次两个循环

1 个答案: