주요 내용으로 건너뛰기

5. SIMON-GAME: FINAL

마지막 편

지난 시간에는 틀렸을 때 유저에게 어떻게 알려줄 것인가를 살펴보았습니다.


4. SIMON-GAME: IF WRONG ? - https://gompro.postype.com/post/732275/


이번 시간에는 전부 맞추었을 시 추가 단계를 제공하는 법을 살펴보겠습니다.


UserStory 부터 살펴봐야죠!


2.  Each time I input a series of button presses   correctly, I see the same  series of button presses but           with  an  additional step.

만약 버튼을 순서에 맞게 정확히 누르면, 그 단계의 순서와 함께 추가적인 순서가 제공된다.

(만약 이번 순서가 1-2-3-4 라면 정확히 눌렀을 때 1-2-3-4-7 이런 식으로 순서가 제공되어야 한다는 뜻입    니다.)  


시작해보도록 합시다.


userSeq에 새로운 순서를 추가하는 과정에서 살펴보았듯이 배열을 추가하는 것은 어렵지 않습니다.


updateSeq와 거의 비슷한 느낌으로 만들 수 있죠.


마지막으로 Pads.jsx를 수정해줍니다.

이제 2번 UserStory도 완료됐군요. 점점 끝을 향해 가고 있습니다.


남은 UserStory는 총 3개 입니다. 


6. If I want to restart, I can hit a button to do so, and the game will return to a single step.

만약 다시 시작하고 싶다면, 어떤 버튼을 눌러 첫 단계로 돌아갈 수 있다.


7.    I can play in strict mode where if I get a button press wrong, it notifies me that I have done so,        and  the game restarts at a new    random  series of button presses.

   스트릭트 모드 : 버튼을 잘못 누르면, 그 사실을 유저에게 알려주고 처음으로 돌아가 새로운 순서가 생성      됨.


  8. I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game       starts over.

  20 단계를 클리어하면 유저에게 게임을 클리어했다는 사실을 알려주고, 게임을 다시 시작한다.


8번부터 해볼까요?


8번은 정말 간단합니다. 엔딩조건만 붙이면 끝이죠.


다음은 6번입니다.


초기화 액션부터 만듭시다.


리듀서에 연결하고

 컨테이너에 연결한 뒤

PadsControl 의 onClick 부분만 수정하면 끝!

한 번 게임은 플레이해보셨나요?



여기까지만 가도 정신이 아득해진다... 


직접 플레이하면서 sleep의 간격을 조절하거나 직접 패드들을 꾸며보세요.


혹은 엔딩 에니메이션이나 직접 만든 배경도 좋겠네요.


그리고 이제까지 썼던 코드들을 잘 이해하려고 노력해보세요.


Strict Mode 구현은 여러분들의 손에 맡기겠습니다.


여기까지 따라오느라 수고 많으셨습니다.


SIMON-GAME 편은 여기까지 입니다. 감사합니다.

이전편들부터 다시 보기:


0편 https://gompro.postype.com/post/730099

1편 https://gompro.postype.com/post/730146

2편 https://gompro.postype.com/post/730446

3편 https://gompro.postype.com/post/732228

4편 https://gompro.postype.com/post/732275

이준형 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.