JavaScript로 게임 만들기 - 5

html파일의 timer부분에 아무 숫자를 넣고 가운데 정렬하자

      <div
        id="timer"
        style="
          background-color: red;
          width: 100px;
          height: 100px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        10
      </div>

이제 js파일에서 전역변수 timer를 선언하고 timer를 감소시키는 decreaseTimer함수를 정의하면

let timer = 10;
function decreaseTimer() {
  if (timer > 0) {
  	setTimeout(decreaseTimer, 1000);
    timer--;
  }
}

decreaseTimer();

그래도 시간이 줄어들지 않는다.
쿼리셀렉터로 함수가 실행될 때 timer안에 있는 텍스트가 바뀌도록 동작할 내용을 추가해줘야한다.

  if (timer > 0) {
    timer--;
    document.querySelector('#timer').innerHTML = timer
  }

timer라는 id 안에 있는 html코드를 timer라고 해주면

카운트다운이 잘 동작한다.

다음으로 게임 결과에 대한 내용인데 먼저 비겼을 때에 대해 생각해보자
가장 먼저 화면 가운데에 비겼을 때 나타날 Draw문구를 display none으로 가운에데 넣고

    <div
      id="displayText"
      style="
        position: absolute;
        color: white;
        display: none;
        align-items: center;
        justify-content: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      "
    >
      Draw
    </div>

decreaseTimer함수에서 timer가 0이되면 id displayText의 display style을 flex로 바꾸고 각 조건에 따라 보여줄 텍스트를 작성하자

  if (timer === 0) {
    document.querySelector("#displayText").style.display = "flex";
    if (player.health === enemy.health) {
      document.querySelector("#displayText").innerHTML = "Draw";
    } else if (player.health > enemy.health) {
      document.querySelector("#displayText").innerHTML = "Player Win";
    } else if (player.health < enemy.health) {
      document.querySelector("#displayText").innerHTML = "Player2 Win";
    }
  }

근데 위의 조건식 중 체력이 같을때의 승부를 판별하는 조건식이 좀 복잡하니 함수를 따로 정의하여 관리하자 decreaseTimer 함수 위에 determineWinner함수로 해당 조건식을 넣어두고 decreaseTimer내에서 호출하자

function determineWinner({player, enemy}) {
    document.querySelector("#displayText").style.display = "flex";
  if (player.health === enemy.health) {
    document.querySelector("#displayText").innerHTML = "Draw";
  } else if (player.health > enemy.health) {
    document.querySelector("#displayText").innerHTML = "Player Win";
  } else if (player.health < enemy.health) {
    document.querySelector("#displayText").innerHTML = "Player2 Win";
  }
}

let timer = 60;
function decreaseTimer() {
  if (timer > 0) {
  	setTimeout(decreaseTimer, 1000);
    timer--;
    document.querySelector("#timer").innerHTML = timer;
  }
  if (timer === 0) {
    determineWinner({player, enemy})
  }
}

이렇게 승패를 판별하는 함수를 따로 빼주고 animate함수 안에

  if (enemy.health <= 0 || player.health <= 0) {
    determineWinner({ player, enemy });
  }

체력을 기반으로 한 조건식 안에 determineWinner함수를 호출하면

이제 타이머를 다 기다리지 않아도 승패를 보여준다.
그런데 승패를 보여준 이후에도 카운트다운이 계속해서 진행되고 있다.
이번엔 이 문제를 해결해보자.

먼저 determineWinner함수에 파라미터로 timerId를 추가하고

function determineWinner({ player, enemy, timerId }) {
  ...
}

timerId라는 이름의 전역변수를 선언하고 decreaseTimer안에서 자기 자신을 호출하고 있던 setTimeout을 timerId로 지정해준다.

let timer = 60;
let timerId;
function decreaseTimer() {
  if (timer > 0) {
    timerId = setTimeout(decreaseTimer, 1000);
    timer--;
    ...
}

animate함수 안에서 사용하고 있던 determineWinner에도 파라미터를 추가하고

  if (enemy.health <= 0 || player.health <= 0) {
    determineWinner({ player, enemy, timerId });
  }

승패가 결정났을때 타이머가 멈춰야 하므로 determineWinner함수 안에 clearTimeout으로 타이머를 멈춰주자

function determineWinner({ player, enemy, timerId }) {
  clearTimeout(timerId);
  ...
}

이제 승패가 결정나면 타이머가 멈춘다.

기능적인 구현은 어느정도 마무리 되었으니 다음엔 배경이미지를 넣어보자