버튼을 세 번 클릭하면 게임이 더 빨라지고 빠르게 돌아갑니다 - javascript

Question

제 연구의 일부로 저는 캔버스를 사용하여 자바 스크립트에서 게임 "스페이스 인베이더"를 만듭니다. 게임이 시작되기 전에 기본 페이지가로드되고 새 게임 버튼을 클릭하기를 기다리고 있습니다. 이 버튼을 클릭하면 게임이 제대로 실행되기 시작하며 전혀 문제가 없습니다. (게임은 update() 및 render() 함수를 호출하는 재귀 함수를 통해 실행됩니다. 게임을 실행하는 동안이 버튼을 다시 누르면 문제가 발생합니다. 무슨 일이 일어나더라도 게임은 더 빨리 달리고 여러 번 클릭하면 더 빠르고 더 빨리 게임을 할 수 있습니다 ...

왜냐하면 간격의주기가 분명하지 않았기 때문입니다. 함수 자체를 다시 호출하고 재귀 함수로 루프를 유발합니다.

감사합니다.

// ---------------------------------------- // // 새 게임 버튼을 눌렀을 때 호출되는이 함수는

function startGame() 
    { 
     clearInterval(timeInterval); 
     run(); 
     // run function - run the recursive function below 
     timeInterval = setInterval(randEnemyShots,frequencyShot); 
     // randEnemyShots function - choose one enemey from all enemies to shot 
     // frequencyShot variable - this is the frequqncy of shots 
    } 

// ------------------------------- --------- //

function run() 
    { 
     var loop=function(){ 
      if(gameRuning) 
      { 
       update(); 
       // update function - all the logic of game 
       render(); 
       // render function - drawing the game 
       window.requestAnimationFrame(loop,canvas); 
      } 
     }; 
     window.requestAnimationFrame(loop,canvas); 
    } 

// ------------------------------ -------------------------------------------------- --------------------------------------- //

Answer 1

문제는 '시작'버튼을 클릭하면 run() 함수를 다시 호출하여 게임의 속도가 실제로 두 배가된다는 것입니다.

게임 루프가 무기한 실행될 수 있도록 게임 초기화시 한 번만 함수를 호출해야합니다. false로 설정하면

function gameInit(){ 
    //Initialisation code here 
    run(); //Start the game loop only once 
} 

function startGame() { 
    //Handle 'Start' button click 
    clearInterval(timeInterval); 
    timeInterval = setInterval(randEnemyShots,frequencyShot); 
} 

당신은 '일시 정지'루프에 gameRuning 값을 사용할 수 있습니다.

Answer 2

setTi를 사용하는 것이 좋습니다. meout (확인) setInterval보다는. 일반적으로 setInterval의 동작 및 비용이 이상한 것이기 때문에.