[코드스쿼드 코코아_개인 프로젝트] GUI 코인 먹기 게임 (2)

Kyu·2020년 12월 6일
0
post-thumbnail

코드 링크 바로가기

게임 목표

  1. 완성된 코인 먹기게임에 장애물을 넣는다.
  2. 장애물은 움직이고 벽에 닿으면 튕겨나간다.
  3. 장애물은 여러개이고 여러 크기로 생성된다.
  4. 장애물에 부딪치면 이름을 입력할 수 있는 텍스트필드가 나온다.
  5. 스코어에 따라 랭킹이 정렬된다

과정

  1. 먼저 자바의 정석 예제를 풀어본다.
    랭킹구현할때 ArrayList에서 score값 만 다른 ArrayList에 불러와서 정렬시켰는데 이걸 어따 써먹어야할지 모르겠음. 그래서 일단 이름,스코어,스코어R 의 값들을 출력시키고 등수를 적기로..!

1. Fixed a problem about crossing the border when generating a coin

코인이 생성될때 while문을 이용해서 border의 좌표를 넘어가면 코인을 재생성하도록 했다.

2. Fixed a player crossing borders

insets 라는 추상클래스를 추가했다. inset는 여백이나 선 같은 게 될 수가 있는 것인데 아직까지 정확히 이해하지는 못했다. 하지만 경계를 설정해줄때 inset를 설정해줘야한다는걸 자바의정석 예제에서 배웠다.

테스트를 하면서 더욱 헷갈렸는데 왜냐면 insets.left, insets.right, insets.bottom이 0의 값을 불러온거에 비해서 insets.top을 설정해줬을때는 상태창 때문인지 모르겠지만 22라는 값을 불러왔기 때문이다.

BOTTOM과 RIGHT의 경계를 설정해줄때 프레임의 폭과 높이에서 insets.right와 insets.bottom을 빼주는데, 앞에서 0의 값을 불러왔지만 0이 아닌 상황이 있어서 일거라고 생각한다. 아직도 이부분이 의아하긴 하다.

그리고 이 insets를 이용해서 선언해준 TOP, BOTTOM, LEFT, RIGHT를 조건문을 이용해서 좌표가 경계를 넘어가지 않도록 했다.

3. Create class Ball to create obstacles

이제 본격적으로 Ball이름의 클래스를 이용해서 공들을 생성해준다. Ball은 x와 y좌표를 받는 생성자를 추가했고, 공들의 속도를 랜덤으로 추가하기 위해서 1부터 5까지의 인트값이 있는 배열도 추가했다.

4. Put "balls" in ArrayList balls

볼들을 담아서 뿌리는 기능을 담당하는 ballGenerator라는 이름의 Thread를 상속받은 클래스를 만들었다. ballGenerator는 좌표값을 랜덤으로 생성하고 실제로 볼을 담을 balls라는 ArrayListe에 얻은 좌표값을 Ball의 파라미터로 넣어서 계속 생성한다. 실제로 계속 생성하면 게임이 진행이 안되므로 3초에 한번씩 생성하도록 했다.

5. Add takeBallsOutFromArray

볼들을 담았으니까 이제 꺼내야한다. for문을 이용해서 나온 볼의 좌표를 변경한다. 예를 들어서, 처음에 볼이 하나 생성 되었을때, 이 메소드는 무한 반복 루프 안에 있으므로, 볼을 담는 3초동안 for문이 계속 돌아가면서 그 다음 볼이 생성될때까지 반복작업으로 계속 이동한다. 그리고 볼이 두개가 되었을때, for문에 의해 하나씩 꺼내지므로 첫번째 볼과 두번째볼이 각각 움직인다. 그리고 계속 볼이 생성되면서 같은 작업이 반복되고 각각의 볼들이 움직이는 것을 볼 수가 있다.

그리고 이 for문 안에 벽에 닿으면 튕겨져나가는 효과를 나오게하도록 이전에 선언한 TOP, BOTTOM, LEFT, RIGHT를 이용해서 조건문을 준다.

6. Fixed a problem of generating balls that didn't work

앞에서 실제로 화면에 그리는 것은 paint()에서 한다. 똑같이 for문을 이용해서 balls라는 ArrayList를 모두 그려준다.

7. Fixed ball's random speed that didn't work

앞에서 사실 공의 속도를 랜덤으로 뺴내도록 생성자에 그 로직을 넣었었는데 좌표가 들어가는 생성자에 넣었어야했는데 파라미터가 없는 생성자에 넣었었다. 그걸 고쳤다.

8. Add checkPlayerNBallBumped

플레이어와 볼이 충돌하는 로직을 구현하기 위한 원의 중심좌표를 구하는 로직을 이 메소드에 넣었다. 사실 내가 하려고했던것은 원 둘레의 좌표에 부딪치면 볼이 부딪친다는 것이었는고 원의 중심좌표가 필요하다고 생각해서 이런 로직을 넣었다. 근데 결론적으로 원이아니라 원을 사각형으로 인식한거 같다. 그래서 중심좌표도 사실 필요가 없었지만..이걸 하면서 느낀건 간단한 게임을 만들어도 수학은 필요하구나 하고 느꼈다.

9. Stop game when a player bumped to a ball

코인과 플레이어가 부딪치는 로직과 똑같이해서 조건문을 달고, 필요한 메소드들을 무한 루프시키는 while문을 종료시키도록 했다.

10. Add reset when it ends

게임이 끝나면 리셋하도록 바꾸었다. 사실 리셋시키는 것도 굉장히 어렵게 생각했었다. 메인스레드를 멈추고 어떻게 다시시작할지에 관한 키워드들로 구글링 했었는데 결과를 찾을 수가 없었다. 그러다가 setVisible(false)를 주고 dispose()라는 메소드를 쓰는것을 찾을 수 있었다. dispose는 해당 프레임을 종료시키는 것이었는데 GUI에서는 꼭 알아두어야 할 메소드였다. 그렇게 한뒤에 다시 new 연산자를 써서 GameFrame 클래스를 실행시킨다.

11. Add GameOverFrame including a method reset()

처음 생각했던 게임이 생각보다 진도가 빨리나가서 랭킹을 구축하기로 했다. 일단 게임오버가 되면 다른 프레임으로 넘겨야겠다 생각하고 그 프레임으로 reset()을 옮겼다. 이렇게 다른 프레임의 클래스를 만들어야겠다고 생각한것도 단지 dispose()라는 메소드를 알게되서였다. 이거 하나가 내 생각을 엄청 확장시켰다.

12. Add Ranking and basic structure

랭킹 프레임을 추가했다. GameOverFrame에서 FileIO로 입력을 받아서 텍스트에 저장한뒤에 랭킹프레임에서 출력하려 했다. 기본적인 구조만 세우고 일단 커밋한 상태.

13. Add FileInput for ranking system

GameOverFrame에 입력받은 플레이어 이름과 스코어 스코어R이 텍스트파일에 저장하고 Ranking 클래스르 생성한다.

14. Add titles for ranking

랭킹 출력할 때 좌표의 기준이 될 타이틀들 먼저 좌표를 찍어 생성한다.

15. Add Name, Score, ScoreR generator that prints them on the frame in alignment

일단 화면에 출력할 상수 좌표값들을 가독성을 위해 fianl int로 전부 바꿨다. 그리고 이름, 스코어, 스코어R 별로 화면에 출력하는 메소드들을 따로 만들어주었다. 여기까지 생각해내는데에도 시간이 많이걸렸다. 머릿속이 너무 복잡했다. 이렇게 만들게 도와줬던건 절차대로 생각하는 것이었다. 내가 만들려고 하는 것을 작은 절차 단위로 쪼개서 생각했고 그렇게 하니까 길이 보였다.

16 . Figured out that 'y' was rank and I changed variables' name to clarify

파라미터로 줬던 int y가 변수이름이 헷갈리게 만들 수 있어서 계속 지켜보다가 결국에 이 y가 하는 역할이 랭킹1, 2, 3, ... 대로 다른 메소드들이 변하는 것을 알아냈다. 가독성을 위해 y를 rank로 바꾸니 다른 여러 변수들도 의미를 명확히 해야겠다는 생각에 전부 바꾸었다. 다음부터는 처음부터 변수이름을 명확히 하도록 노력해야겠다.

17. Print rank in order

저장되어 있는 플레이어 정보들을 불러와서 "score"만 따로 빼내서 다른 배열에 저장한다. 그 배열을 오름차순(내림차순)으로 정렬한다. 이때 변수타입의 문제로 총 3번의 for문을 만들게 되었다.

18. Fianl result

자잘한 것들 일부 변경하고, 마지막으로 정렬된 랭킹 앞에 숫자를 붙이는 메소들을 불러내면서 랭킹 기능 구현을 완료했다.


1편
https://velog.io/@kyukim/%EC%BD%94%EB%93%9C%EC%8A%A4%EC%BF%BC%EB%93%9C-%EC%BD%94%EC%BD%94%EC%95%84%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-GUI-%EC%BD%94%EC%9D%B8-%EB%A8%B9%EA%B8%B0-%EA%B2%8C%EC%9E%84-1

profile
TIL 남기는 공간입니다

0개의 댓글