>source

뱀 게임을 그리는 setInterval이 있는데, 뱀이 "먹을"때마다 clearInterval이 있고 속도가 조절 된 setInterval 변수가 있습니다. 로드시 원래 setInterval이 시작됩니다. 버튼을 눌러 시작하려면 어떻게해야하나요?

setInterval을 버튼 안에 넣고 함수를 사용하려고 시도했지만 버튼이 setInterval을 시작하도록 만들었지 만 항상 draw 함수 내에서 clearInterval을 중단합니다.

<button onclick="">Start game</button>


if (snakeX == food.x && snakeY == food.y){
            food = {
                x : Math.round(Math.random()*(cvsWidth/snakeWidth-1)),
                y : Math.round(Math.random()*(cvsHeight/snakeHeight-1))
            };
            score++;
            if (speed >= 40) speed = speed-3;
            clearInterval(interval);
            interval = setInterval(draw, speed);
        }else{
            //Remove last
            snake.pop();
        }
var speed = 140;
var interval = setInterval(draw, speed);

  • 답변 # 1

    와이즈 비즈를 설정함으로써   onclick 에 대한 버튼의 속성   start() 의 원인  버튼을 클릭하면 호출됩니다.

    나는 또한 start 를 선언  전역 변수가 필요하다고 생각하기 때문에 전역 변수로 사용할 수 있습니다.

    그런 다음 시작이 호출되면 간격이 시작되고 간격의 ID가 interval 에 입력됩니다.

    interval
    
    

    var speed = 500;
    function draw() {
      console.log("Running")
    }
    
    var interval;
    function start() {
      //Prevent start from running twice.
      if(interval != null) return;
      interval = setInterval(draw, speed);
    }
    
    

    <button onclick="start()">Start game</button>

관련 자료

  • 이전 typescript - JSON 속성 값을 기반으로 칩 또는 버튼을 각도로 표시하려면
  • 다음 graphql - ravendb에서 새 문서를 생성하는 동안 메타 데이터에서 컬렉션 이름이 누락되고 문서가 @empty collection에 표시