Deep Dive

타이머 기능

MoonJay 2023. 7. 2. 19:24

 

What

타이머 기능 삽입


Why

간단한 게임에 타이머 기능을 부여하여 흥미 요소 첨가



How

제한 시간, 남은 시간 변수 생성

var timeLimit = 7; // 제한 시간
var timeLeft = timeLimit; // 남은 시간

 

타이머 구역에 삽입, 시간 초과시 게임 종료

function updateTimer() {
                    $('#timer').html('남은 시간: ' + timeLeft + '초');

                    if (timeLeft <= 0) {
                        $('#timer').removeClass('shake-animation');
                        endGame();
                    } else if (timeLeft === 5) {
                        $('#timer').addClass('shake-animation');
                    }
                    timeLeft--;
                }

 

타이머 함수 1초마다 실행

var countdown = setInterval(updateTimer, 1000);

setInterval 함수는 할당 된 시간 만큼 주어진 메소드를 실행

 

시간 초과시 타이머 종료

function endGame() {

    clearInterval(countdown);