Как правильно вызвать эту функцию?

Question

Я работаю, хотя Яркий Javascript. Я в конце главы 15 «Игра на платформе», и мне трудно понять, как заставить игру остановиться.

Одно из упражнений в конце главы просит вас сделать это: «Сделать это можно сделать паузу (приостановить) и возобновите игру, нажав клавишу Esc

Это может быть сделано путем изменения. функция runLevel для использования другого манипулятора клавиатуры и прерывания или возобновления анимации всякий раз, когда нажата клавиша Esc. " Автор говорит, что вы можете сделать это, изменив способ вызова runLevel runAnimation. Вот функция называется:

function runLevel(level, Display, andThen) { 
    var display = new Display(document.body, level); 
    runAnimation(function(step) { 
     level.animate(step, arrows); 
     display.drawFrame(step); 
     if (level.isFinished()) { 
     display.clear(); 
     if (andThen) 
      andThen(level.status); 
     return false; 
     } 
    }); 
    } 

Я изменил функцию таким образом:

function runLevel(level, Display, andThen) { 
    var display = new Display(document.body, level); 
    var paused = false; 

    addEventListener("keydown", function(event){ 
     if (event.keyCode == 27) { 
      paused = !paused; 
     } 
    }); 

    if (!paused){ 
     runAnimation(function(step) { 
      level.animate(step, arrows); 
      display.drawFrame(step); 
      if (level.isFinished()) { 
      display.clear(); 
      if (andThen) 
       andThen(level.status); 
      return false; 
      } 
     }); 
    } 

    } 

Но игра продолжает играть, даже после того, как я ударил бежать. Я не понимаю, почему.
Полный код игры можно найти здесь: http://eloquentjavascript.net/code/chapter/15_game.js Заранее благодарим за любую помощь!

Answer 1

Попробуйте установить if-инструкцию внутри функции обратного вызова.

runAnimation(function(step) { 
    if (!paused){ 
     level.animate(step, arrows); 
     display.drawFrame(step); 
     if (level.isFinished()) { 
     display.clear(); 
     if (andThen) 
      andThen(level.status); 
     return false; 
     } 
    } 
    });