2013-07-06 2 views
0

Global для основного цикла игрыАнимация на холсте две петли сразу

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 
} 


} 
} 
+0

Я сделал, как вы сказали, но ничего не произошло, это то же самое. Я не понимаю, как кажется, первый цикл переопределяет другой, потому что он быстрее? – Sam

+0

SetTimeout является асинхронным, что означает, что при запросе setTimeout код внутри таймаута будет запущен после указанного таймаута, но код после истечения таймаута сразу начнет работать (без таймаута). Поэтому нет никакой задержки для любого кода, который после setTimeout, и ваша анимация лифта будет продолжать работать бесперебойно. Никакого переопределения не происходит! RAF поддерживает движение вашего лифта, и setTimeout оживляет ваш взрыв - никаких помех между этими двумя процессами. Нет совпадений, никаких задержек! – markE

+0

Одна вещь, которую я вижу, это то, что вы делаете отсечение, чтобы получить каждый спрайт из своего спрайта. Это может привести к задергивающей задержке только потому, что процесс отсечения занимает некоторое время. Вместо этого попробуйте разрезать спрайт на отдельные спрайты. Сделайте это один раз, прежде чем позволить пользователю начать воспроизведение. Если вам нужна помощь в этом обрезании, дайте мне знать ... я был бы рад помочь;) – markE

ответ

0

У меня нет времени, чтобы посмотреть на проблему кадров анимации прямо сейчас, но есть два других вещей, которые вы обязательно должны сделать:

  1. Формат и отступы код. Это не очень последовательно. Существует много иллюстраторов JavaScript, которые вы можете найти с помощью поиска «javascript 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 
    }, 
    ... 
]; 

Вы также можете упростить этот длинный l ist if(ExplodeFrame == N) тесты для всех используют общий бит кода. Просто вычислите второй параметр на ctxAnimation.drawImage() с (ExplodeFrame - 5) * 100 + 6 вместо всех тестов if и жестко закодированных значений.

+0

Спасибо, это только мое программирование на втором году и 4-я неделя, что фактически заставляет что-то двигаться по экрану. Я пытаюсь втиснуть всех сразу, нужно немного подождать и улучшить код, и, возможно, вытащить идею, прежде чем пытаться программировать все :) – Sam

Смежные вопросы