241212 TIL - 개인과제 기획

개인 과제 기획 러프

< 소재 >

: 플레이어는 Tom, 보스는 Jerry, 쫓아오는 제리를 피해 도망가는 컨셉

: 도망을 방해하는 장애물들이 존재하고, 아이템을 통해 점수를 얻거나, 도망에 이로운 효과 받음

: 이미지 파일을 어찌 할지 고민이다... 기존 파일 편집하는 게 사이즈 안 망가지고 좋을 거 같긴 한데

 

< 기능 > 

: 점프 말고, 방향키로 조작, 상하 조작만 가능

: 장애물 아래, 위, 중간 안전 나오고, 부딪히면 게임 오버가 아니라 잠시 감속

: 뒤에서 뭐가 쫓아오고, 얘에 부딪히면 게임오버

: 스테이지는 시간 경과에 따라 바뀌는데, 스테이지 바뀔 때 화면에 1초 정도 "Stage N" 이런 메세지 띄우기코

: 아이템 먹을 때마다 점수 획득, 아이템은 장애물 길 따라 생성

: 5 스테이지 클리어 시 종료

: 스테이지 오를 때마다 난이도 업? <- 어떻게 구현할까나 그냥 지금도 속도 빨라지니까.....라고 하면 안 되겠죠?

   장애물 충돌 시 감속 정도 높여주면 되겄다!!!!!!!

: 스테이지 오를 때마다 아이템 승급, 아이템 주는 점수 증가

: 랜덤으로 몇 초 동안 장애물 통과하는 아이템? 슈퍼마리오 별 같은 거

 

프로젝트 진행 단계

1. 패킷 구조 설계

소켓에 담겨 주고 받게 될 데이터의 내용물 설정. 그대로 가면 될 거 같음...?

패킷 구조 예시!!

2. 기능 기획 및 설계

어떤 기능들을 구현할 것이고, 코드 수정을 어떻게 할 것인지 최대한 상세하게 정리

 

3. 데이터 테이블 설계

데이터베이스 사용 대신 assets 폴더의 json 파일들로 데이터 관리

필요한 데이터 및 데이터들의 속성 구상해 파일 생성!!

 

4. 기능 구현

5. 디버깅 및 리팩토링

6. 배포

 

필요 기능 설계

< 점수 >

1. 시간에 따라 증가하는 것이 아닌, 코인을 먹어야 증가하는 방식으로 변경

• gameLoop() 함수의 (4 a) 부분에서 score.update(deltaTime) 제거

< 스테이지 >

1. 다섯 단계만

• stage.json의 data 배열 요소 개수 5개로 조정
• 스테이지 클리어 관련 함수와 조건 구현
• 뭐 스테이지 종료 시간이랑 현재 스테이지 아이디 비교하는 조건하면 될 듯?
• 클리어도 서버에서 유효한 클리어인지 검증
• gameLoop 함수 내부에 삽입

2. 시간 경과에 따라 변경

• stage.json에서 "score" 속성 제거 후 "clearTime" 속성 추가 (예시!!)
• 유효한 시간에 스테이지가 바뀐 건지 서버에서 검증

3. 스테이지 변경 시 화면에 변경 메세지 출력 "Stage N"

• 지금 index.js에 있는 showGameOver()나 showStartGameText() 함수 응용하면 될 듯
• 스테이지 변경 시 showStageUp() 뭐 요런 느낌의 함수 실행하도록
• 텍스트는 1초 정도 떠있으면 될 듯?
• 함수 내부에서 fontSize 및 x, y 변수 값 수정해서 화면 안 가리도록 조정
• 상단 중앙에 오면 될 듯?
• 아니면 상시로 떠있도록 하고, 스테이지 변경 시 잠깐 "Next Stage" 이런 메세지 출력하고
  상시 떠있는 메세지를 수정하는?

< 플레이어 >

1. 점프 only 조작에서 방향키 조작으로 변경

• 키 입력에 따라 player 인스턴스의 y속성이 변경되도록 조정?

2. 플레이어 이동속도 속성 추가

• 방향키 조작에서 입력 한 번마다 이동되는 좌표 값을 줄이면 되려나?
• 아님 이동속도 속성을 추가해서 얘로 좌표 값을 나누든 빼든 연산을...
• 예를 들어 this.moveSpeed의 기본값이 10이고, moveY() 메서드에서 키 입력 시
  this.y += N * this.moveSpeed를 해주고 있다 가정하면,
  이동속도 값을 5로 줄여버렸을 때 비슷하게 구현이 되겄지요...?

< 장애물 >

1. 등장 위치가 다른 세 유형으로 개편

• 이미 index.js의 CACTI_CONFIG 변수에 모양이 다른 세 유형이 들어가 있음
• 유형 별로 width와 height를 다르게 지정해주고 있는데, 이걸 통일하고 y값을 지정해주면 될 듯?
• 문제는 위 아래 동시에 나오는 녀석인데, 예전 르탄이 달리기 어케 했었는지 함 보자...

2. 충돌 시 게임 오버가 아니라 플레이어 일정 시간 감속

• Cactus.js 파일에서 collideWith() 메서드 조정
• index.js 파일에서 gameLoop 함수의 (4 b) 게임 오버 조건에서 충돌 조건 빼기
• gameLoop  함수에서? 장애물 충돌 시 플레이어 이동속도 일정 프레임 감소 하도록?
• 스테이지에 비례해서 감속 정도 심화, stage.id에 따라 이속 하락폭을 늘려주면 되겄죠?
• 문제는 플레이어 이동속도가 없네.... Player.js 파일에서 클래스 속성 추가...?

< 아이템 >

1. 아이템 획득 빈도 서버에서 검증

• 검증 관련 데이터가 item.json의 테이블에 추가돼야 함
• 예를 들어, 10초 간격으로 생성되는 아이템을 5초에 한 번 획득하면 어뷰징!!

2. 코인과 별 두 종류로 구현?

• 지금도 ITEM_CONFIG 변수로 유형이 구분돼있긴 함
• 스테이지별 등장 코인 다섯 종류와, 별 한 종류?

3. 코인 구현

• 획득한 코인과 설정된 등장 스테이지가 일치하는지 서버에서 검증
• 코인은 점수 획득처, 스테이지 오를 때마다 이미지와 획득 점수 변하도록
• 코인 생성은 장애물 유형에 따라 변화

4. 별 구현

• 별은 획득 시 일정 프레임 동안 장애물 충돌 무시, 점수 대량 획득
• starDuration 이런 변수 두고 gameLoop 함수 돌 때마다 1씩 더함
• starCheck 이런 변수로 true면 장애물 충돌 시 감속 X, false면 감속 O
• starDuration이 특정 숫자 달성하면 (루프 몇 회 돈 이후엔), starCheck = false 
• starCheck 기본값은 당연히 false
• 별 먹은 상태로 장애물 충돌할 때마다 서버에서도 검증을 해줘야 할 듯?
• 설정된 프레임 이상으로 별 상태가 유지되고 있지 않은 지 등등

< 보스 >

1. 관련 클래스 생성 모듈과 컨트롤러 모듈 추가

• 기존 Cactus.js와 CantiController.js 참고
• 고정 x, y좌표 (화면 좌측) 이라 보다 간단할 듯
• 화면 속도에 비례해 쫓아오도록, 말이 이렇지 그냥 배경 그리면서 같이 그려주기만 하면 됨
• 프레임마다 입 벌렸다 닫았다, 팩맨 느낌으로 이미지 둘 준비

2. 플레이어와 충돌 시 게임오버

• Boss 클래스에 collideWith 속성 구현
• gameLoop 함수의 (4 b) 게임 오버 조건에 추가

 

기능 구현 순서

스테이지 개편 → 플레이어 개편 →  장애물 개편 → 보스 추가 →  아이템 개편

 

추가 아이디어

장애물은 작은 쥐들이 튀어오름 -> 타이밍에 맞춰서 뛰지 않거나, 뛰거나

그치만 이런다면 방향키 조작이 아니라 그대로 점프로 조작해야할 듯

-> 오히려 구현이 쉬울지도?!