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

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

  1. 格式化和缩进你的代码。这不是很一致。您可以通过搜索“javascript beautifier”找到许多 JavaScript 美化器。选择一个并通过它运行您的代码，然后在您进行未来更改时保持格式一致 - 或再次通过美化器运行它。

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

于 2013-07-06T01:00:08.953 回答