타자 연습 게임 만들기(4)

이번에는 시작 버튼을 누르면 메인 화면에 3 2 1 Start 카운터가 나온 후 랜덤단어생성이 시작되도록 코드를 작성했다.

일단 시작버튼이 input box를 가리도록 html과 css로 만들어 놓았다.

이제 시작버튼을 누르면 일어날 일들을 함수로 작성할 것인데 필요한것이

⓵ 시작버튼 누르면 시작버튼이 사라지는 기능

⓶ 3, 2, 1, start! 글자를 담을 div박스와 div박스를 나타내고 지워줄 함수(setCounter함수)

⓷ 시작 버튼 click시 실행할 Event handler

 

⓵의 경우 간단하게 시작버튼의 style 프로퍼티의 display 속성을 none으로 바꾸어주면 된다.

 

setCounter 함수는 div 박스를 만드는 함수이다. class style은 css에 미리 작성해놓았다.

이 함수를 가지고 ⓷ 함수를 구현할 때 사용할 것이다.

 

이벤트 핸들러를 등록하기 전에 위에서 만든 div박스를 시간이 지날때 마다 실행되도록 setTimeout을 포함한 counter 함수를 따로 작성했다.

기존에 있던 카운터박스를 없애고 새로운 카운터박스를 렌더링한다.

마지막 박스는 없애기만 해야하기 때문에 boolean값도 넣을 수 있도록 작성했다.

 

이제 만들어둔 두 함수를 사용하여 onclick이벤트의 이벤트핸들러로 등록한다.

 

1초마다 counter 함수를 실행시키고 마지막에 div 박스를 없애고, setInterval함수를 실행시키면 된다.