코드에 사용할 6개의 이미지(gopher.png, dead_gopher.png, bomb.png, explode.png, mole-hole.png, mole-hole-front.png)는 따로 내려받습니다. 주소는 ‘https://raw.githubusercontent.com/ZeroCho/es2024-webgame/master/파일명’ 형태입니다. 예를 들어 gopher.png 파일을 내려받으려면 https://raw.githubusercontent.com/ZeroCho/es2024-webgame/master/gopher.png에 접속하면 됩니다.

해당 주소에 접속하면 화면에 보이는 이미지에 마우스를 올리고 왼쪽 버튼을 클릭합니다. 메뉴가 나오면 이미지를 다른 이름으로 저장을 선택해 파일을 내려받습니다. 이때 모든 이미지를 whack-a-mole.html 파일과 같은 폴더에 저장해야 이미지가 제대로 보입니다.

다음 절부터 게임 동작을 하나씩 구현해 보겠습니다. 두더지 잡기 게임에는 이벤트 리스너와 타이머 등 비동기 코드가 많이 나오므로 순서를 정확히 지키도록 호출 스택과 이벤트 루프를 생각하며 코딩해야 합니다.