javascript settimeout이 더 빠르고 더 빠르게 진행됩니까?

Question

JavaScript로 뱀 게임을 만들고 있습니다. 따라서 화살표 키를 누르면 'snakehead'가 계속 그 방향으로 움직여야합니다.

처음 키를 누르면 멋지게 작동하지만 그 후에는 헤드가 더 빠르고 더 빠르게 움직입니다.

그래서 내가 원하는 것은 100 밀리 초마다 한 번 머리를 움직이는 것입니다. 만약 당신이 정말로 무슨 뜻인지 모르겠다면이 페이지를 보아라. http://www.dbzweb.be/08/braetj08/snake.html

그런데 누군가 내 코드를 어떻게 바꿔서 같은 속도로 작동하는지 알려줄 수 있는가?

function init_game() { 
    if ((event ? event.keyCode : down) == (event ? 40 : 1)) /*down*/ 
    { 
     if ((snakehead + z) < z * z) { 
      right = 0; 
      left = 0; 
      up = 0; 
      down = 1; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gamebox"; 
      snakehead = snakehead + z; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gameboxsnake"; 
     } else { 
      document.write("<h1>game over!</h1> press this button to try again.<br><input  type='button' value='retry'  onclick='window.open(\"http://www.dbzweb.be/08/braetj08/snake.html\",\"_self\")'>"); 
     } 
    } 
    if ((event ? event.keyCode : up) == (event ? 38 : 1)) /*up*/ 
    { 
     if ((snakehead - z) > -1) { 
      right = 0; 
      left = 0; 
      up = 1; 
      down = 0; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gamebox"; 
      snakehead = snakehead - z; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gameboxsnake"; 
     } else { 
      document.write("<h1>game over!</h1> press this button to try again.<br><input type='button' value='retry' onclick='window.open(\"http://www.dbzweb.be/08/braetj08/snake.html\",\"_self\")'>"); 
     } 
    } 
    if ((event ? event.keyCode : right) == (event ? 39 : 1)) /*right*/ 
    { 
     if ((snakehead + 1) % z !== 0) { 
      right = 1; 
      left = 0; 
      up = 0; 
      down = 0; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gamebox"; 
      snakehead = snakehead + 1; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gameboxsnake"; 
     } else { 
      document.write("<h1>game over!</h1> press this button to try again.<br><input  type='button' value='retry' onclick='window.open(\"http://www.dbzweb.be/08/braetj08/snake.html\",\"_self\")'>"); 
     } 
    } 
    if ((event ? event.keyCode : left) == (event ? 37 : 1)) /*left*/ 
    { 
     if (snakehead % z !== 0) { 
      right = 0; 
      left = 1; 
      up = 0; 
      down = 0; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gamebox"; 
      snakehead = snakehead - 1; 
      document.getElementsByClassName(snakehead, "div", document)[0].id = "gameboxsnake"; 
     } else { 
      document.write("<h1>game over!</h1> press this button to try again.<br><input type='button' value='retry' onclick='window.open(\"http://www.dbzweb.be/08/braetj08/snake.html\",\"_self\")'>"); 
     } 
    } 
    t = 0; 
    t = setTimeout("init_game()", 100); 
} 

Answer 1

t = 0; 
t = setTimeout("init_game()", 100); 

이것은 당신이하지 생각하지 않습니다. 그러면 변수 t이 0으로 설정되고 (은이 시간 초과를 지우지 않음) 즉시 setTimeout에서 반환 된 timeoutID으로 설정합니다.

키를 누를 때마다 init_game이 다시 실행되므로 모든 호출을 실행하는 시간 초과가 증가하므로 뱀이 가속됩니다. init_game.

t = 0;을 clearTimeout(t)으로 변경해보십시오. 그래도 코드 앞에 t을 선언해야합니다 (위에 var t; 추가).

또한 문자열을 setTimeout으로 전달하지 말고 eval을 사용합니다. 함수를 전달하십시오.

clearTimeout(t); 
t = setTimeout(init_game, 100); 

참고 : 당신은 당신이 루프에서 init_game 중지 return;을 추가해야 document.write("<h1>game over!</h1> 후 (! "게임 오버"무한 인쇄를 메시지).

DEMO : 당신이 코드의 읽을 벽을 기록하기 때문에 http://jsfiddle.net/T5kPg/1/