[4주차] 20220429 엘리스 TIL (JavaScript 심화)

01. 행맨 게임 만들기

01. 행맨 게임 소개

• 알파벳을 하나씩 선택하여 주어진 기회 안에 단어를 맞추는 게임.

• 초기에는 단어의 길이와 공백 정도의 정보만 주어진다.

• 알파벳을 하나씩 선택할 때마다, 그 알파벳이 들어 있는 위치가 드러난다.

• 단어에 들어 있지 않은 알파벳을 선택하면 점차 행맨이 완성된다.

• 총 7번의 기회, 혹은 60초 안에 단어를 맞추지 못하면 패배한다.

 

02. 행맨 게임 코드 구조 - 상태 관리

• 상태관리란?
  • 행맨 게임에서는 남은 시간, 남은 기회, 선택한 알파벳, 게임의 진행 상태 등의 데이터를 저장하고, 그 정보에 따라 필요한 UI를 화면에 그려야 한다.
  • 이때, 데이터를 앱의 상태라 한다.
  • 앱의 상태는 하나의 State 객체로 관리한다.(이 State 객체는 불변한다. - 변화를 주면 기존 객체에서 변화된 객체가 만들어지는게 아니라, 새로운 객체가 만들어진다)
• 상태 관리 패턴
  • 상태를 관리하는 객체는 변하지 않는다. 이를 불변 객체(불변 객체 = 변화를 주면 기존 객체에서 변화된 객체가 만들어지는게 아니라, 새로운 객체가 만들어진다)라고 한다.
  • 상태가 변경되면 State는 전혀 다른 객체가 된다.(이렇게 전혀 다른 객체가 되면 기존 객체를 참조하고 있던 데이터들이 변하지 않기 때문에 우리가 좀더 쉽게 상태를 관리할 수 있다)
  • 상태를 변경하는 코드는 컴포넌트 코드와 섞이지 않도록 한다.(컴포넌트에선 단순히 상태를 받아서 필요한 UI를 렌더링하고, 유저의 입력을 받아서 특정 상태를 변경하는 요청만을 보낸다.)
  • 컴포넌트는 상태를 어떻게 변경할지 알지 못한다.(그냥 함수만 호출한다)
  • 상태를 변경하고자 하면, 특정 메서드를 호출하도록 한다.

 

03. 행맨 게임 코드 구조 - 컴포넌트

• 컴포넌트란?
  • 컴포넌트는 특정 UI의 영역을 담당하는 코드이다.
  • 행맨 게임에서는 메시지를 그리는 컴포넌트, 키보드를 그리는 컴포넌트 등이 있다.
  • 컴포넌트를 잘게 쪼개어 화면을 구성한다.
• 컴포넌트 패턴
  • 컴포넌트는 상태를 직접 변경해서는 안 된다.
  • 컴포넌트는 상태를 받아 사용하며, 상태 변경을 요청한다.(상태 변경을 요청하는 코드가 컴포넌트 안에 들어가 있으면 안됨!)
  • 상태 변경은 상태를 관리하는 코드에서 한다.
  • ex> 컴포넌트가 키보드 입력을 요청하면, 상태 관리

 

04. 행맨 게임 코드 구조 - 게임 로직

• 앱 초기화(앱 초기화를 하는  로직)
  • 처음 게임을 실행하면, App 코드(App코드는 window의 DOMContentLoaded라는 이벤트가 있는데 이 이벤트를 리스닝 해서 이벤트가 발생했을 때, 그때 앱코드를 실행하게 끔 코드를 정의함)가 실행된다.
  • App은 상태를 초기화한다.
  • App에 이미지를 미리 로드하여 저장한다.
  • 이미지 로드가 끝나면 화면을 그린다.
• 게임의 상태 -1
  • state는 게임의 상태를 담는 객체이다.(state는 하나의 JS 오브젝트. 그 안에 gameStatus, timer, wordLoading 변수가 담김)
  • gameStatus는 게임의 현재 상태이다. LOSE, WIN, READY, START 등이 된다.(별도의 객체로 저장해서 유틸해서 활용)
  • timer는 게임이 끝날 때까지 남은 시간이다.(보통 60초)
  • wordLoading은 단어 로딩 유무를 boolean으로 체크한다.(boolean state)

state = {     gameStatus     timer : 60 ... 59 ...      wordLoading : true/false }

• 게임의 상태 -2
  • chancesLeft는 알파벳 선택의 남은 기회이다.(통상적으로 7번의 기회를 줌!)
  • enteredCharacters는 선택한 알파벳을 객체로 저장한다.(예시 : a를 선택, b를 선택 -> {a:true, b:true ...} / true 같은 변수는 의미는 없고 그냥 이 키값이 존재한다 라는 의미정도만 됨. set 같은 의미로 활용한다.)
  • charMap은, 정답 단어를 객체로 저장한다.(예시 : { a:[0,2], b:[1]} 처럼 어떤 알파벳의 위치를 index로 저장 -> charMap 객체를 통해 완전한 단어를 그릴 수 있음)
  • wordArr은 화면에 그릴 단어를 배열로 저장한다.(예시 : ['a', 'b', 'c'] / ['*', '*', '*'])
  • charsLeft는 몇 개의 알파벳을 더 맞추어야 할지의 정보를 저장한다.(사실 charMap에서 파생 가능한 정보라 별도로 만들 필요는 없지만 좀더 쉽게 관리하기 위해 만들어 둠)
• 게임 시작
  • START 버튼을 누르면 게임이 시작된다.
  • 키보드를 누르면, 단어 안에 있는 알파벳인지를 검사한다.
  • 단어 안에 있다면, charsLeft(하나 줄어들고)와 enteredCharacters(알파벳이 추가됨) 등을 변경하고 게임 종료를 검사한다.
  • 단어 안에 있지 않다면, chancesLeft(하나 줄어들고)와 enteredCharacters(해당 알파벳이 추가됨) 등을 변경하고 게임 종료를 검사한다.
  • 시간이 지날 때마다 게임 종료를 검사한다.
  • 모든 상태의 변경 때마다 컴포넌트를 다시 그린다.
• 게임 종료와 재시작
  • 모든 알파벳을 맞추었거나, 시간이 종료되거나, 모든 기회가 끝나면 게임이 종료된다.
  • 게임 종료 시 키보드를 더 이상 누를 수 없도록 한다.
  • 재시작 시 상태를 다시 초기화하며, 그에 맞추어 UI를 그린다.