30. Whack A Mole ( JavaScript30 )

Dev/JavaScript30

30. Whack A Mole ( JavaScript30 )

takeU 2021. 7. 11. 14:38

Whack A Mole

목표

두더지잡기 게임 만들기

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <button onClick="startGame()">Start!</button>
  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>
<script>
</script>
</body>
</html>

과정

변수, 상수 생성
게임 진행 시간 설정
두다지가 올라올 구멍을 정하는 함수 생성
두더지가 올라오고 내려가도록 하는 함수 생성
게임을 시작하기 위한 함수 생성
두더지를 잡았을 때의 함수 생성
두더지를 클릭하면 bonk 실행

코드 분석

1. 변수, 상수 생성

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;

두더지 잡기 게임을 하기 위한 변수, 상수 생성

2. 게임 진행 시간 설정

const randomTime = (min, max) => {
    return Math.round(Math.random() * (max - min) + min);
}

randomTime에 랜덤으로 진행될 시간이 min과 max사이에서 랜덤으로 정해지도록 담는다

3. 두더지가 올라올 구멍을 정하는 함수 생성

const randomHole = holes => {
   const idx = Math.floor(Math.random() * holes.length);
   const hole = holes[idx];
   if (hole === lastHole) {
       console.log('Ah nah thats the same one bud');
       return randomHole(holes);
   }
   lastHole = hole;
   return hole;
}

전체 6개의 구멍에서 랜덤으로 한개를 정하는 함수를 생성, 이때 중복되지 않도록 if문을 달아 다시 함수가 실행되도록 하고 마지막에 hole을 반환하도록 한다.

4. 두더지가 올라오고 내려가도록 하는 함수 생성

const peep = () => {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    if (!timeUp) peep();
  }, time);
}

선택된 hole에 up 클래스를 달아 두더지가 올라오도록 하고, 시간이 지나면 제거하도록 함.
만약 timeUp이 true가 되면 끝남

5. 게임을 시작하기 위한 함수 생성

const startGame = () => {
 scoreBoard.textContent = 0;
 timeUp = false;
 score = 0;
 peep();
 setTimeout(() => timeUp = true, 10000)
}

게임을 시작할 때의 조건들과 위에서 만든 peep함수를 실행하도록 설정하고 timeUp이 true가 되거나 시간이 10초가 흐르면 멈추도록 설정

6. 두더지를 잡았을 때의 함수 생성

const bonk = e => {
 if(!e.isTrusted) return; // cheater!
 score++;
 e.target.classList.remove('up');
 scoreBoard.textContent = score;
}

클릭하면 스코어가 추가되고 두더지가 사라지도록 up 클래스를 지워주도록 함수 생성

7. 두더지를 클릭하면 bonk 실행

moles.forEach(mole => mole.addEventListener('click', bonk));

찾아본 내용, 알게된 내용들

isTrusted - 이벤트가 사용자 생성에 의해발생한다면 true, 스크립트로 인해 생성되거나 수정되면 false 반환
textContent - 텍스트로 내용을 표시함

저작자표시 비영리 변경금지

현재글30. Whack A Mole ( JavaScript30 )

takeU