지뢰찾기를 만들어보자 #10 - 사용자 인터페이스 변경 3/4

지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. https://mc500.tistory.com/676 이번 글에서도 이어서 깃발 표시 부분과 최고 점수 부분에 대해 변경해 보도록 하겠다.

5. 깃발 표시된 상자 클릭시 알림 제거하기

현재 구현으로는 깃발을 표시한 곳을 클릭하면 이미 깃발이 있다는 alert 메시지를 띄운다. 문제는 이렇게 alert가 떠 있는 상태에서도 시간은 지나가게 되므로 기록 경신에 성가신 부분이 있다. 그래서 그 부분을 제거한다.

  if (box.flagged) {
    //this.alert('Flagged')
    return
  } else if (box.value == CONST_MINE) {

6. High Score Board 표시

각 레벨별로 최고 기록을 알 수 있도록 해당 부분에 대한 HTML 코드를 canvas 아래 추가한다.

<canvas id="base" width="480" height="320"></canvas>
<br>
<div>
  <b>## Hight Scores ##</b>
  <table>
      <tr><td><b>Beginner</b></td><td>: {{highscores.beginner}} seconds</td></tr>
      <tr><td><b>Intermediate</b></td><td>: {{highscores.intermediate}} seconds</td></tr>
      <tr><td><b>Expert</b></td><td>: {{highscores.expert}} seconds</td></tr>
  </table>
</div>

기본 설정값으로는 일정한 크기를 가진 Table은 왼쪽으로 치우쳐지게 된다. 따라서 다음과 같이 CSS를 추가하여 Table이 화면의 가운데 올 수 있도록 margin left, right 정보를 auto로 변경한다. 또한, table 내붕의 텍스트는 왼쪽을 기준으로 정렬되도록 text-align을 지정한다.

table {
  text-align: left;
  margin: 0 auto;
}

기록의 의미는 보존이 되는 경우에 의미가 있다. 오락실 게임의 최고 기록과 이를 위해 여러 사람들이 도전하는 걸 보면 그 효과를 알 수 있다.

현재 구현 상태에서는 HTML 페이지가 다시 로딩하면 기존 기록이 사라지게 되므로 이를 어딘가 저장을 해야 놓아야 한다. Windows 지뢰찾기처럼 로컬에서 실행되는 경우 파일이나 시스템 레지스트리에 정보를 저장한다. 서버에서 운영중인 경우 서버에 저장할 수 있다. 하지만 이 두 가지를 제외하면 남은 방법은 localStorage를 사용하는 방법이 있다. 즉 Web Browser에 특정 정보를 저장하고 다시 불러서 사용하는 방법이다. localStorage는 setItem()/getItem() 두 가지만 기능만 제공하며, 문자열 형태의 key와 문자열로 된 값을 저장하고 다시 불러 올 수 있다. 자세한 내용은 Mozilla의 localStorage API에 대한 부분을 참고하기 바란다.

지뢰찾기에서는 웹 페이지가 로딩될 때 다음과 같이 localStorage에서 hight score 값을 얻는 코드를 이용하고

try {
  let highscores = JSON.parse(localStorage.getItem('highscores'))
  if (highscores) {
    this.highscores.beginner = highscores.beginner || 999
    this.highscores.intermediate = highscores.intermediate || 999
    this.highscores.expert = highscores.expert || 999
  }  
} catch(err){
  console.log(err)
}

최고 기록을 얻었을 때 이를 저장할 method를 다음과 같이 추가한다.

setHighscores(level, elapsed_time) {
  let record = elapsed_time
  
  switch(level){
  case 'beginner': 
    if (elapsed_time < this.highscores.beginner) {
      this.highscores.beginner = record
    }
    break
  case 'intermediate': 
    if (elapsed_time < this.highscores.intermediate) {
      this.highscores.intermediate = record
    }
    break
  case 'expert': 
    if (elapsed_time < this.highscores.expert) {
      this.highscores.expert = record
    }
    break
  default:
    return
  }

  localStorage.setItem('highscores', JSON.stringify(this.highscores))
}

그리고 실제 finishGame()를 게임에서 이겼을 때 호출되도록 코드를 추가한다.

  if (win) {
    this.setHighscores(this.level,record)
    this.drawFace(CONST_FACE.win)
  } else {
    this.revealBoxes()
    this.drawFace(CONST_FACE.lose)
  }