241117 TIL - 개인과제05

기절하는 바람에 하루가 지나서 쓰는 TIL... 개인 과제를 드디어 마쳤다!

 

[ 오늘 한 작업 ]

[bugfix]

1. 교실 씬 클리어 시 7교시로 표시되는 현상 수정

- displaySchool 함수에서 교시 받는 변수 최대치를 6으로 설정

[refactor]

1. gameStart 함수 개편

- 게임광 엔딩처럼 인기쟁이 엔딩도 함수화 후 분리

 

[bugfix]

1. isFailConfess 전역 변수화

- 기존에 Classmate 클래스의 프로퍼티로 참조하던 것을 엔딩 처리 위해 game.js 파일의 전역변수로 바꿈

- 조작은 confess 메서드에서 돼야하니 참조형데이터 꼴로 export

2. 엔딩 분기 전부 gameStart 함수 내부로 이동

- 5가지 엔딩 조건을 모두 스테이지 반복문 다음에 배치

- 중첩 조건문을 통해 분기 구분

- 각 분기 마지막에 return 추가해줌으로써 엔딩 후 startGame 함수가 종료되도록 구현!!!!!!!

 

[update]

1. 오프닝 이벤트, 하교 이벤트에 로비로 기능 구현

- func에 goLobby함수 생성 : isOver[0]을 true로 만들어 스테이지 반복문 나가도록 하고, 새로 만든 isLobby 변수 통해 로비 분기 조건문을 타도록 함

 

[update]

1. 새 게임 기능 구현

- 플레이어, 스테이지, 게임 중단 조건, 연인 명수 초기화

- 스테이지가 1일 때만 오프닝 이벤트 나오도록 조정

2. 계속하기 기능 구현

- 로비로 선택지 골랐을 시 플레이 기록이 남도록 조정

- 로비로 갈 수 있는 기준은 한 스테이지 클리어 후 시점

[fix]

1. 고백 성공 시 자신감 회복 조정

- 100을 더해줌 -> 100으로 만들어줌

2. goLobby 함수에서 isOver 제거 및 endScene 함수에 추가

- 새 게임과 계속하기가 추가됨에 따라 로비로 갈 땐 플레이 기록을 남기고, 엔딩 또는 게임오버가 되면 기록을 초기화하도록 조정

3. 일부 변수 선언 위치 조정 및 export import 조정

- 새 게임 계속하기 기능 추가에 따른 변수 초기화 시점 조정을 위한 변화

 

[update]

1. 실제 구현에 맞게 리드미 수정

2. 가을, 세원, 규민의 이미지 변경

3. 상황별 텍스트 추가 완료 이제 끝!!!!!

 

 

[ 오늘 만난 문제상황 ]

gameStrat 함수 중첩 문제

 막바지에 드디어 해결한 문제이자 일주일 내내 나를 물고 늘어졌던 이번 과제 가장 큰 버그!!

스테이지 클리어에 실패해서 게임오버가 되거나, 클리어를 잘 해서 엔딩을 보거나, 게임이 완료된 이후 재시작을 선택하면 게임이 중첩돼서 실행되는 문제가 있었다. 이벤트에서 출력되는 콘솔 텍스트들이 겹친다거나, 장면 순서가 겹쳐 A->B로 전환돼야할 진행이 A->A->B->B 같은 식으로 두 게임이 동시에 진행되고 있다거나의 문제였다.

 

정상 작동 상황

 처음 의심했던 원인은 바로 await였다. 비동기 작업에 아직 익숙하지 않은 상황이었고, await를 이렇게 남발해놔서 함수가 끝났음에도 불구하고 await의 작업이 남는 걸까? 라고 생각했다. 지금 생각해보면 함수가 끝나지 않았을 뿐인데.... 무튼, 그래서 각 장면이 끝나는 순간마다 게임 중단 조건인 isOver가 true면 스테이지를 진행시키던 while문을 탈출시켜 함수를 끝내도록 유도해봤다!

isOver면 반복문을 나가거라

 하지만 이것만으로는 해결이 되지 않았고, 답답한 마음에 우선 이 문제를 회피했다... 1회차 진행에는 전혀 문제가 없었고, 다른 기능 구현이 아직 한참 남은 상황이었기 때문이다. 하지만 결국 게임의 완성이 다가왔고,  이 문제를 해결해야하는 순간이 왔다. 아직 리팩토링이 되지 않은 상황에서 튜터님과 이 문제에 대해 이야기를 나눠봤는데, 예상했던 원인은 맞았고, await의 작업을 강제 중단하는 방법으로 AbortController 개념을 알게됐다!

 간단히 생각하면 중단하고 싶은 비동기작업들에 어떤 signal들이 심어져있고, abort()가 실행되는 순간 signal들이 중단 신호를 받아 각 비동기 작업이 중단되는 원리였다! 하지만 물론 이것도 실패했다. 내가 원리를 완벽하게 이해하지 못 한 탓도 있었지만, 정말 기본적인 것을 놓치고 있었는데, 바로 함수를 끝내는 방법이었다...

 우선 리팩토링 전 당시에는 게임이 끝나는 조건이 여기저기 산개돼있었다. 히든엔딩 하나는 전역공간에 함수로 있었고, 다른 히든엔딩은 startGame 함수 안에 들어가 있었으며, 게임 오버 또한 함수 내부에 들어가 있었고, 근데 발동은 다른 함수 안에 있고 아주 총체적 난국이었는데, 이를 통합해서 startGame 함수 내부에 다 넣어주었다. 위 사진 하단에 보이는 접혀있는 조건문들이 이 녀석들이다! 게임이 끝나는 조건을 모아둔 후, 함수를 끝내는 방법에 대해 이리저리 탐색하던 중, 어이없게도 아주 잘 알고 있던 한가지를 찾게 되는데, 바로 return이었다...

 하지만 시도해보면서도 긴가민가 했던 게, 위에서 while문 사이사이 break를 넣었던 것처럼, 대신 return을 넣어봤었는데 역시 문제 해결이 안됐었기 때문이다! 이 차이는 아직 명확히 파악이 안 됐다. 이따가 튜터님께 물어봐야징. 무튼, 게임이 끝나는 조건이 한 데 모이니 정말 간단했는데, 조건문의 각 분기마다 마지막에 return을 넣어줘보았다. 그랬더니 게임을 암만 반복해도 startGame()이 뭉치는 현상이 없는 것이었다! 진짜 그 순간 너무 감격스러워 눈물 찔끔 날랑말랑 했는데, 무튼!

 굉장히 간단하고 기본적인 방법으로 문제를 해결할 수 있었다. 아직 온전히 이해하지 못한 await니 Promise니 다 중요한 개념이고 언젠가 돌파해야할 개념이 맞지만, 역시 가장 중요한 건 기초라는 걸 다시금 깨닫게 됐다. 그렇게 가장 큰 문제를 해결하고 나니 나머지 작업은 술술 풀렸고, 그 동안 해결해온 문제들을 응용하게 되는 상황도 꽤 만나며 수월한 마무리를 할 수 있었던 것 같다. 비록 시간 문제로 시도해보고 싶던 걸 모두 구현하진 못 했지만, 그래도 어느 정도 내가 원하는 맛의 게임 하나를 완성해본 경험이 참 좋았던 것 같다. 재밌었다!