Today I learned/Tutorials

두더지 잡기 게임 만들기

dev-song 2020. 5. 17. 16:14

많다면 많고, 적다면 적었던 JavaScript30 시리즈의 마지막 튜토리얼입니다.
오락실 앞에 약방의 감초처럼 놓여있는 두더지 게임을 간단하게 JavaScript로 구현해봅니다.

튜토리얼 정보

  • 출처: JavaScript30
  • 이름: Day 30 - Whack A Mole
  • 언어: JavaScript
  • 목표: 구멍에서 무작위로 튀어나오는 두더지를 잡는 미니 게임 만들기

진행 기간

2020년 5월 16일

두더지가 나오는 구멍, 나와있는 시간 무작위로 설정하기

우선, 두더지가 튀어나올 구멍이 여럿 필요합니다. 여러 구멍 중 어떤 구멍으로 나올지, 그리고 나와서 얼마 동안 있다가 다시 들어갈 지가 정해져야 하겠죠.

두더지가 튀어나오는 구멍과 튀어나왔다가 들어가는 시간이 일정하면 금방 질리기 때문에, 이 둘을 무작위로 만들어줍니다.
JavaScript에 내장되어 있는 Math 객체의 random( ) 메서드[각주:1]를 활용하면 무작위 숫자를 구현할 수 있습니다.

무작위로 시간을 정하는 randTime( ) 함수를 먼저 만들겠습니다. randTime( ) 함수의 작동 방식입니다.

  1. Math.random( ) 메서드를 이용해 최소값과 최대값 사이에서 무작위 수를 산출
  2. Math.round( ) 메서드를 이용해 1.에서 구한 무작위 수를 반올림해서 반환

다음은 무작위로 구멍을 정하는 randHole( ) 함수입니다. randHole( ) 함수는 이렇게 작동합니다.

  1. 구멍의 갯수를 토대로, Math.random( ) 메서드와 Math.floor( ) 메서드를 함께 이용해 무작위 인덱스를 산출
  2. 구멍 배열에 무작위 인덱스를 적용해 두더지가 나올 구멍을 결정
    2-1. 결정된 구멍이 직전 구멍과 같다면, randHole( ) 함수를 다시 실행하고 그 결과를 반환[각주:2]
    2-2. 결정된 구멍이 직전 구멍과 다르다면, 직전 구멍에 결정된 구멍을 저장
  3. 결정된 구멍을 반환
  • 참고 코드

두더지가 구멍에서 튀어나오게 하기

자, 두더지가 나올 구멍과 시간을 정했으니 구멍에서 튀어나오게 할 차례입니다.

구멍에서 나오게 하는 함수의 이름은 peep( )으로 하죠. peep( ) 함수의 작동 방식입니다.

  1. randTime( ) 함수를 사용해 두더지가 나올 시간을 무작위로 계산
  2. randHole( ) 함수를 사용해 두더지가 나올 구멍을 무작위로 결정
  3. 두더지가 나올 구멍에 up 클래스를 추가
  4. setTimeout( ) 메서드를 사용해 무작위 시간 이후 두더지가 나올 구멍에서 up 클래스를 제거
    4-1. 게임이 끝났는지를 알려주는 변수 timeUp을 사용해 게임이 끝나지 않았다면 peep( ) 함수를 다시 실행[각주:3]
  • 참고 코드

게임 시작하기

이제 두더지가 무작위로 구멍에서 튀어나오고, 일정 시간 동안 나와 있다가 다시 들어가는 기능은 완성되었습니다.
이제 게임을 시작하는 함수를 만들어봅시다.

점수를 초기화시키고 게임을 시작하고 일정 시간 동안 지속시키는 startGame( ) 함수를 만듭니다. 다음처럼 작동합니다.

  1. 점수판의 점수 표시와 점수를 저장한 score 변수를 0으로 초기화
  2. 게임이 끝났는지를 알려주는 변수 timeUp에 false 값 지정
  3. peep( ) 함수 실행
  4. setTimeout( ) 메서드를 이용해 일정 시간 이후 변수 timeUp에 true 값 지정
  • 참고 코드

튀어나온 두더지 잡기

마지막으로 튀어나온 두더지를 잡는 기능을 추가하면 게임이 완성됩니다.

두더지를 잡는 bonk( ) 함수를 두더지 요소들에 마우스 클릭 이벤트로 연결합니다. bonk( ) 함수의 작동 방식입니다.

  1. 이벤트가 인위적[각주:4]일 경우 함수 실행을 취소
  2. 이벤트가 발생한 요소에서 up 클래스를 제거
  3. 점수를 저장하는 변수 score에 1을 더함
  4. 점수판의 textContent를 score로 지정
  • 참고 코드

GitHub 저장소 링크

  1. 참고자료: Math.random() - JavaScript | MDN [본문으로]
  2. 재귀적으로 작동하는 방식입니다. 결정된 구멍이 직전의 구멍과 다를 때까지 함수를 계속 실행하게 됩니다. [본문으로]
  3. randHole( ) 함수와 동일하게 재귀적인 방식으로 동작합니다. [본문으로]
  4. 이벤트의 isTrusted 속성은 이벤트가 사용자의 행동으로 만들어지면 true 값을, 스크립트나 다른 과정을 통해 만들어지면 false 값을 가집니다. 참고자료: Event.isTrusted - Web APIs | MDN [본문으로]
저작자표시 비영리