주요 내용으로 건너뛰기

4. SIMON-GAME: IF WRONG ?

유저가 잘못된 버튼을 눌렀을 때

저번 시간에는 자동 재생 파트까지 했습니다. 


3. SIMON-GAME: AUTO PLAY - https://gompro.postype.com/post/732228/


이제 몇 개의 UserStory가 남았나요?


1. I am presented with a random series of button presses.

버튼을 누르는 순서는 무작위로 생성된다. (매번 정해진 순서로 플레이하는 것이 아님 )


 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 이런 식으로 순서가 제공되어야 한다는 뜻입    니다.)  


3.   I hear a sound that corresponds to each button both when the series of    button presses plays, and          when I personally press a button.

효과음은 내가 버튼을 눌렀을 때뿐만 아니라 자동으로 순서가 재생될 때도 나와야한다.


4.   If I press the wrong button, I am notified that I have done so, and    that series of button presses            starts  again to remind me of the   pattern  so I can try again.

만약 잘못된 버튼을 누르면, 그 사실을 유저에게 알려주고 처음부터 순서를 재생하여 유저가 다시 시도할    수 있게끔 한다.


5. I can see how many steps are in the current series of button presses.

이번 단계를 마치려면 몇 번 버튼을 눌러야하는지 알 수 있다.


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 단계를 클리어하면 유저에게 게임을 클리어했다는 사실을 알려주고, 게임을 다시 시작한다.


다섯 개가 남았군요.


이번 시간에는 


   4.   If I press the wrong button, I am notified that I  have done so, and    that series of button presses            starts   again to remind me of the   pattern  so I can try again.

   만약 잘못된 버튼을 누르면, 그 사실을 유저에게 알려주고 처음부터 순서를 재생하여 유저가 다시 시도할    수 있게끔 한다.


4번을 구현해보도록 하겠습니다.


그 전에 한 번 start 버튼을 눌러서 현재 상태를 확인해보죠.



현재 상태


일단 

1. 유저가 누른 순서를 저장할 수 있어야하고,

2. 그 저장된 순서를 단계별로 비교할 수 있어야하고,

3. 틀렸다면 단계와 저장된 순서를 초기화하고, 틀린 사실을 알려주고나서,  다시 해당 순서를 재생해주어    야며,

4. 반대로 만약 전부 맞다면 다음 순서를 제공할 수 있어야 합니다.


UserReducer로 갑시다!


총 세 가지 상태를 추가했습니다.


첫 번째는 단계를 나타내는 step(배열의 인덱스는 0부터 시작하기 때문에 -1로 설정),

두 번째는 유저가 누른 순서를 저장할 userSeq 배열,

세 번째는 유저의 상태를 나타내는 user 문자열 


여기서 user는 세 가지 상태를 가집니다.

아직 플레이를 하지 않은 not played

잘못된 버튼을 누른 failed to pass steps

맞는 버튼을 누른 passed some steps


이제 요 세 가지 상태를 어떻게 활용할 지 살펴봅시다.


1. 유저가 누른 순서를 저장할 수 있어야하고,


이 요구사항부터 구현해봅시다.


순서를 저장하는 건 쉽습니다. 간단히 해당 패드를 눌렀을 때 userSeq에 push 하기만 하면 끝이죠.


2. 그 저장된 순서를 단계별로 비교할 수 있어야하고,


하지만 단계별 비교가 필요하기 때문에 if 를 이용해 비교를 먼저 수행해야 합니다.


3. 틀렸다면 단계와 저장된 순서를 초기화하고, 다시 해당 순서를 재생해주어야며,


그리고 틀렸을 때는 초기화된 배열과 단계를 반환해야 하죠.


updateUserSeq 함수는 요구조건을 전부 충족합니다.


액션을 먼저 작성하고


다음엔 리듀서를 작성하죠.


액션을 컨테이너에 연결한 뒤~



실행해봅시다~~



 not played!
passed some steps
failed to pass steps

   깔끔하네요. 


이제 유저가 어떤 순서로 눌렀는지 또 맞았는지 혹은 틀렸는지를 손쉽게 파악할 수 있게 되었습니다.


   계속해서 


3. 틀렸다면 단계와 저장된 순서를 초기화하고, 틀린 사실을 알려주고나서,  다시 해당 순서를 재생해주어    야며,

4. 반대로 만약 전부 맞다면 다음 순서를 제공할 수 있어야 합니다.


이 3,4 번을 해결해봅시다.


틀렸다는 사실을 알려주기 위해 코드펜의 예제에서는 작은 스크린에 !! 표시를 짧게 띄웠습니다.


우리도 이걸 가지고 와서 단계를 알려주는 Steps 컴포넌트에서 틀릴 때마다 느낌표를 보여주게 설정해보    죠.


   user를 가져온 뒤

   단계를 나타내는 부분에 만약 user 가 통과하지 못했다면 느낌표 두 개를, 아니라면 단계를 보여주게 바꿨    습니다.


결과는요?

틀렸군요..
그렇다고 하네요.

이제 재도전의 기회(?)만 주면 끝이군요.


그 전에 조금 정리를 하면 좋을 것 같네요.


이제 플레이해보세요.


틀렸을 때 잘 재생되나요? 좋아요!


   4.   If I press the wrong button, I am notified that I  have done so,  and    that series of button presses            starts   again to  remind me of the   pattern  so I can try again.

   만약 잘못된 버튼을 누르면, 그 사실을 유저에게 알려주고 처음부터 순서를 재생하여 유저가 다시 시도할    수 있게끔 한다. 


이 녀석도 해결된 것 같군요.


다음 시간에는 추가적인 순서 제공 편을 진행하겠습니다.


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

댓글

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