행맨 게임 만들기 2 - 행맨 게임 로직과 초기 앱 구성하기 1 : 행맨 게임 상태 그리기

이어서 행맨 게임 로직에 대해서 학습해보고 본격적으로 게임을 만들어보는 실습을 진행해보겠다.

---

 
 
 
 

이론 4 - 행맨 게임 코드 구조 : 게임 로직

 

 
 
 
 
 

 
자바스크립트에서는 enum이 없으므로 이들을 별도의 객체에서 저장해 유틸에서 활용한다. 타이머는 60초 정도로 정하고 있다.
 
 
 
 
 

true는 특별한 의미는 없고 키 값이 존재한다는 것이다. 처음에는 별로 저장되었다가 단어를 하나씩 맞출 때마다 베일이 벗겨지는 정보가 wordArr이다.
 
 
 
 
 

 
 
 
 
 

---

 
 
 
 
 
 

실습 1 - 초기 앱 구성하기

 

 

---

 
 
 
 

문제 풀기

 

1. 앱 실행하기

 

 
수업 영상에는 행맨 이미지가 보이는데 여기서는 아무것도 보이지 않았다. 이제 코드를 작성하며 게임을 하나씩 만들어보기로 하자.

---

 
 
 
 

2. 행맨 이미지 컴포넌트 살펴보기

행맨 이미지를 그리는 컴포넌트 파일이다.
 

 
여기서 살펴보면 HangmanImage 함수가 있다. 이미지는 chancesLeft에 따라 동작하는데 이것은 최대 7개까지 있고 아무런 기회가 없다면 0, 하나도 틀리지 않았다면 7이 된다. 0인 상태에서는 행맨 이미지가 나오는 것이다.
 
 
 

 
이제 행맨 이미지가 나왔다. 만약 5의 상태라면 어떻게 될까?
 
 
 
 
 

 
이렇게 이미지가 그려진다. 다시 처음 상태로 되돌리려면 changesLeft를 적는다. 

---

 
 
 
 
 

3. App 파일

전체 코드는 이렇게 된다.
 

---

 
 
 
 
 

4. state.js에서 상태 조작 함수 추가

이 코드에서 상태 조작 함수를 추가해보겠다.
 

---

 
 
 
state를 받아서 기존 chancesLeft에서 1을 줄인다.

---

 
 
 
 
 

5. component에서 시작 버튼 조정하기

onClickStart 버튼을 받고, 시작 버튼의 이벤트 리스너를 등록한다.
 

 

 

 
버튼 박스에서 onClickStart를 랜덤으로 받는다.

---

 
 
 
 
 

6. app 파일에서 decreaseChancesLeft 함수 호출하기

처음에 등록했던 decreaseChancesLeft를 사용하되 이것은 단순히 상태를 변경하고 랜덤 함수를 호출하는 것이다. changeState에서 콜백 함수를 받는다.

---

 
 
 
 
 

7. app 파일에 임포트하기

앞서 만들었던 함수를 app.js 파일에 임포트한다.

 
이제 여기까지 작성한 내용을 실행해보기로 하자.

---

 
 
 
 
 

8. 상태 표시한 것까지 실행하기

앱을 실행해보면 다음과 같다.
 

 
 
 
 
 

 
 
 
 
 
 

 
 
 
 
 
 

 
 
START를 누를 때마다 행맨이 조금씩 만들어지고 있다. 하지만 보니까 Chances의 숫자가 변경되지 않다. 이제 이 부분을 변경해볼 것이다.

---

 
 
 
 
 

9. component 파일에서 인자로 받기

chancesLeft를 인자로 받고, innerText의 Chances를 이것으로 바꾼다.

 
 
 
ButtonBox에도 이 내용을 추가한다.

---

 
 
 
 
 

10. 앱 실행하기

다시 앱을 실행하면 chances가 줄어드는 것을 볼 수 있다.
 

 
 
 
 
 

---

 
 
 
 

학습을 마치고

실습 파일이 무척이나 길어서 아직 하나의 실습에서 절반도 영상을 시청하지 못했다. 나머지 부분은 다음 포스트에서 진행하려고 한다. 이번 실습 프로젝트는 관심도 많이 있고 꼭 만들고 싶은 프로젝트이기도 해서 공부하는 시간이 정말 즐거웠다. 코드도 선생님이 추가하고 수정하는 것은 모두 하나씩 적고 학습일지에 써보았다. 나중에 한번에 다 작성한 후에 붙여넣으면 알아보기 힘들기 때문이다.
이제 게임이 차츰 진행되는 것도 보게 될 것 같다.