1. 맨 처음 화면이 켜지면 게임 설명 pop-up이 뜬다. → explainGame( )

1-1. Rule Btn을 누르면, rule-btn에 display: none 클래스가 붙어서, 안보이게 되고 playButton이 보이게 된다.

1. playBtn을 누르면, 게임이 시작된다.

   게임의 시작을 boolean으로 담아두고(start→true / stop→false) 버튼을 눌렀을 때, boolean 값에 따라 게임을 시작할지 멈출지 결정한다.

2-1. started == false

-게임이 처음 멈춰져 있는 상태이므로, 버튼을 누름과 동시에 started == true 로 바꿔준다.

-게임이 진행중이므로, playBtn은 remove하고, stopBtn으로 바꿔준다.→showStopBtn( )

-타이머와 스코어를 보여준다. →showTimerAndScore

-타이머가 거꾸로 동작하도록 함수를 걸어준다. →startGameTimer

-게임진행 함수를 시작한다. →initGame

function initGame() {
  score = 0; // -> 점수는 0에서 시작
  field.innerHTML = ""; // -> 게임을 멈췄다가 재시작했을 때, 이미지들이 중복생성되지
															않도록 필드를 아무것도 없게 정리해줌 
  gameScore.innerText = TRASH_COUNT; // 남아있는 trash 개수를 보여줌
  additem("trash", TRASH_COUNT, "./img/trash.png");
  additem("turtle", TURTLE_COUNT, "./img/turtle.png");
}

function onFieldClick(event) {
  if (!started) {
    return;
  }
  const target = event.target;
  if (target.matches(".trash")) {
    target.remove(); // -> trash를 클릭하면 클릭한 이미지 사라지기
    score++; // -> 점수는 하나씩 증가
    updateScore();
    if (score === TRASH_COUNT) { // score = 10 = TRASH_COUNT = 10;
      finishGame(win); // 이긴 게임
    }
  } else if (target.matches(".turtle")) { // turtle 이미지를 클릭했을 때
    stopGameTimer();
    finishGame(lose); // 진 게임
  }
}

function updateScore() {
  gameScore.innerText = TRASH_COUNT - score; // -> 전체 trash 개수에서 이미 없앤 개수를 
																					빼면, 남아있는 없애야하는 trash 개수가 나온다.
}

2-2. started == false

-타이머를 멈춘다. →stopGameTimer

-게임 재생 버튼을 안보이게한다. →playButton(”hidden”)

-팝업 창이 뜬다. →showPopUpWithText(”REPLAY”)