16.3

두더지와 폭탄 올리고 내리기

앞 절에서 애니메이션을 CSS로 처리했다고 했습니다. 예를 들어, 폭탄이나 두더지의 div 태그에 hidden 클래스를 주면 폭탄이나 두더지가 구멍 아래로 내려가고, hidden 클래스를 빼면 구멍 위로 올라옵니다. 즉, 자바스크립트로 태그에 클래스를 넣을지 뺄지만 지정하면 애니메이션을 조작할 수 있습니다.

시작 버튼을 누르면 모든 칸에서 두더지가 나타나게 하겠습니다. 두더지가 올라오는 애니메이션을 1초 동안 지속합니다. 1초 후에는 두더지가 다시 구멍으로 들어갑니다. 내려가는 애니메이션도 1초 동안 지속합니다. 따라서 두더지는 올라왔다 내려가는 데 총 2초가 걸립니다.