개인과제) 오늘 한 작업
Commit01 : [add] 이미지 파일 추가
[add] 1. 플레이어, 장애물, 아이템 이미지 추가
Commit02 : [add] Boss 추가 [fix] 게임 요소들 조정
[add]
1. Boss.js 파일 추가
- Boss 클래스 관리 위함
- 필요 속성들 조정
2. 이미지 추가
- Boss 및 Backgroud 이미지
- 수정된 작은 제리 이미지
[fix]
1. Boss 추가에 따른 요소들 조정
- index.js에서 Boss 관련 변수 추가, 인스턴스 생성, 메서드 실행 등 추가
2. 게임 요소들 속성 조정
- 등장 위치 및 크기 조정
Commit03 : [add] Stage 클래스 추가 [fix] 관련요소 수정
[add]
1. Stage.js 파일 생성
- Stage 클래스 관리 위함
- 필요한 속성 및 메서드 추가
- index.js 파일에 적용
[fix]
1. 아이템 관련 수정
- 아이템 획득 시 점수 얻기 구현(아직 고정값)
2. 점수 관련 수정
- 시간에 따라 증가하지 않도록 수정
- 점수에 따라 스테이지 승급하지 않도록 수정
3. 리드미 일부 수정
Commit04 : [fix] 아이템 연관 속성 수정
[fix]
1. 아이템 데이터테이블 파일들 수정
- id, score 값 수정 및 데이터 개수 맞춤
2. Item 및 ItemController 클래스 개편
- 스테이지마다 다른 코인 등장
- 등장 간격 고정
- 등장 y좌표 최적화
3. 별 획득 효과 일부 구현
- 점수 대폭 획득
- 획득 시 일정 프레임 무적
개인과제) 오늘 만난 문제 상황
Problem01 : 별이 안 나온다!!!
[상황 설명]
기본적으로 점수를 획득하는 코인 말고, 특수 효과가 있는 아이템을 하나 쯤은 구현하고 싶었다!!
슈퍼마리오의 별 개념을 그대로 가져와서 ^_^, 획득 시 일정 프레임 동안 충돌을 무시하는 아이템을 목표로 작업 착수!
기존에 존재하는 Item과 ItemController 클래스로 어렵지않게 구현할 수 있었는데,
문제는 별이 당최 등장할 생각을 안 하는 것이다!!
[해결 과정]
아이템이 등장하는 로직은 위 사진과 같다!! 우선 기존에 없던 별 등장 간격 관련 속성을 만들어 넣어주었고!
stage 값은 item[id]와 동일한데 별의 아이드는 6으로, 최대가 5스테이지인 이 게임의 예외적인 존재였당
그래서 createItem() 메서드에 상수 6을 넣어주었고, deltatime에 따라 간격도 감소하고,
등장하면 올바르게 인터벌도 초기화해줬다!! 근데 왜 안 나오니!!
오늘도 테스트를 위해 데려온 콘솔로그 씨(4세)... 테스트를 위해 별과 코인의 인터벌을 동일하게 부여했다!
이러면 조건문에 선행하는 게 별 조건이니까 별만 나오겄지!!
보시다시피 잘 등장하고, 콘솔도 무쟈게 찍힌다!! 그렇담 로직 흐름 자체에 문제는 없단 것이니!!
변수 값이나 조건 등을 살펴보기로 했다!!
깨달았다!!! setNextItemTime 메서드는 아이템이 등장하면 그 인터벌을 초기화 시켜주는 기능을 담당한다!
그런데 그 내부에서 별도 초기화하고, 코인도 초기화하니, 인터벌이 더 긴 별은 나올래야 나올 수가 없었던 것!!
그래서 메서드를 이렇게 바꾸어 보았다!!
이러면 별이 등장할 때만 초기화되겠지? 라고 부푼 꿈을 안고 게임을 실행하자...
그 동안 안 나왔던 녀석들이 많이 참았는지 우수수수 튀어나오기 시작했다!!ㅋㅋㅋㅋㅋㅋㅋ
살짝 지칠랑말랑 하던 타이밍이었는데 덕분에 즐거워져서 힘이 나더라...
우선 사이가 너무 좋은 코인과 별 두 녀석을 분리를 해주었고!
계산한 간격 대로 따로 등장해주기 시작했는데, 또다른 문제가 발생했다??!!
바로 별이 등장할 시점에 게임오버될 시, 이어지는 게임 시작하자마자 별이 등장하는 문제였다!!
원인은 이 곳이었다! starInterval의 기본값은 null인데, 대소 비교 연산자들은 느슨한 비교를 해버리는 바람에,
null과 0이 같다고 판단해버려 시작하자마자 별을 뱉었던 것이다!! 그럼 다른 falsy한 값들도 같은 결과를 뱉겄지?
이렇게 엄격하게 비교하는 절차를 추가해줌으로써 내 숙원을 이룰 수 있었다!!
그런데 추가하고 보니 별이 너무 사기다... 그치만 자주 보고 싶은 걸.... 등장 간격 또는 효과 유지 시간 조정을 고려해보자!!
추가로 알게 된 것
아 배열 관련 메서드들에서 findIndex 매개변수에 음수를 넣어서 뒤에서 부터 찾곤 하잖아?
그게 나는 뒤에서부터 앞으로 작업을 하는 줄 알았는데, 시작 위치 정할 때만 뒤에서부터 찾는 거고,
작업 수행은 정방향대로 한다네? 그니까 만약 findIndex에 -1을 넣으면, 맨 마지막 요소 하나 체크하고 마는 거지!!
그리고 lastIndexOf() 메서드의 존재를 잊지 말자..... 이거 하나 기억 못 해서 엄청난 고생을 했다!!
왜 indexOf()든 find()든 다 첫 등장 하나만 찾는 겨!!! 무튼 오늘의 회고 끝!
"음수 인덱스는 배열의 끝부터 거꾸로 셉니다. 즉, fromIndex < 0이면, fromIndex + array.length가 사용됩니다. 그러나, 이 경우에도 배열은 여전히 앞에서 뒤로 검색됩니다."
'TIL&WIL' 카테고리의 다른 글
| 241218 TIL - reduce(), concat(), 개인과제03 (3) | 2024.12.18 |
|---|---|
| 241217 TIL - 개인과제02, shift() (1) | 2024.12.17 |
| 241212 TIL - 개인과제 기획 (0) | 2024.12.12 |
| 241211 TIL - splice(), Node.js 내장 모듈, meta data, ESM, (0) | 2024.12.11 |
| 241210 TIL - Promise.all, 터미널기본명령어, UTF, 트러블슈팅 (0) | 2024.12.10 |
