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

단어개수 카운트, Game Over 기능

이번에는 화면에 단어 카운터를 만들고 단어가 10개가 넘어가면 Game Over되는 기능을 만들어봤다.

일단은 html에 단어개수 div를 만들었다.

 

먼저 단어가 생성되거나 지워질 때 마다 카운팅을 해줘야 한다.

단어 생성 함수(randomStrRender) 마지막에 단어 개수를 카운팅하고 html textcontent를 바꾸어 주는 코드를 추가했다.

 

코드를 추가하면서 10개에 근접하면 경고를 날려주면 좋을 것 같아서 단어개수가 8개 이상이 되면 빨간색이 되는 코드도 추가했다.

 

* 이렇게 코드를 작성하니 단어가 8개가 넘어갔다가 다시 7개 이하로 내려올 때 카운터가 계속 빨간색으로 남아있는 문제가 발생했다. 그래서 단어를 맞춰서 지우는 코드 뒤쪽에도 위와 같은 코드를 추가해줬다. (뭔가 비효율적인 느낌이 살짝 있다..)

 

그리고 단어가 10개가 되면 Game over가 되는 기능을 추가했다.

단어 생성을 멈추고, 화면에 있는 단어를 모두 삭제한 후 Game Over라는 문구를 띄우는 코드를 위의 코드 바로 뒤에 작성해보았다. 아래는 randomStrRender 함수 전체 코드