1. 가위바위보 게임 (10)

<알고리즘(순서)>

1. 박스 2개 (타이틀,사진,결과)

2. 가위 바위 보 버튼이 있다.

3. 버튼을 클릭하면 클릭한 값이 박스에 보인다.

4. 컴퓨터는 랜덤하게 아이템 선택이 된다.

5. 3,4의 결과를 가지고 누가 이겼는지 승패를 따진다.

6. 승패 결과에 따라 (박스의) 테두리 색이 바뀐다. (이기면 - 초록, 지면 - 빨강, 비기면 - 검정)

 

게임의 핵심은?

둘이 아이템을 선택했으면 누가 이겼는지 승패를 말해줘야 할거 아니야!

그 로직을 해보자~

choice[userChoice] // 내가 선택한 값(객체)
computerChoice // 컴퓨터가 선택한 값(객체)

 

이 두개를 알 수 있다.

이 두개를 가지고 승패를 따져보자!

 

App.js

 

App.js

Box.js

 

WIN이라는 값 대신에 다이나믹하게 props.result로 보여준다.

App.js

judgement:판단하다

judgement() = 판단하는 함수 를 만들어주자

두가지 값을 전달해준다/보내준 - 유저(내)가 선택한 값 , 컴퓨터가 선택한 값

choice[userChoice] // 내가 선택한 값(객체)
computerChoice // 컴퓨터가 선택한 값(객체)

 

" const judgement = () => {} " 로 judgement라는 함수를 만들어준다.

()안에는 매개변수로 (user,computer)이 두 값을 넣어준다.

user가 어떤 값을 가지고 있는지 프린트해주고 computer가 어떤 값을 선택했는지 프린트해보자!

 

 

 

 

<게임 로직>

 

// user == computer tie(비긴거지)

// user == rock, computer == "scissors" user 이긴거지

// user == "rock" computer == "paper" user 진거지

// user == "scissors" computer == "paper" user 이긴거지

// user == "scissors" computer == "rock" user 진거지

// user == "paper" computer == "rock" user 이긴거지

// user == "paper" computer == "scissors" user 진거지

 

지름길은 없다. 하나하나 케이스 바이 케이스로 할거야 ㅎ

 

 

App.js

 

if(user.name == computer.name){
      return "tie"
    }else if(user.name="Rock"){
      if(computer == "Scissors"){
        return "win"
      }else {
        return "lose"
      }
    }

이걸 간단히~

 

삼항 연산식!!!

  if (user.name == computer.name) {
    return "tie";
  } else if (user.name == "Rock")
    return computer.name == "Scissors" ? "win" : "lose";
  else if (user.name == "Scissors")
    return computer.name == "Paper" ? "win" : "lose";
  else if (user.name == "Paper") 
    return computer.name == "Rock" ? "win" : "lose";

 

<결론>

값을 return한다.

이겼는지 졌는지 string값을 return한다.

 

judgement(choice[userChoice],computerChoice)

~의 값이 string값을 리턴하면 setResult()함수에 ~의 리턴 를 넣어줄 수 있다.

 

<오류>

나와 컴퓨터의 결과값이 같다.

왜냐하면, 지금 현재 결과값이 유저(내) 위주잖아요?

컴퓨터입장에서는 이긴건데 진걸로 나왔다.

 

=

내가 비겼으면 컴퓨터도 비겨야되고

내가 이겼으면 컴퓨터는 져야되고

내가 졌으면 컴퓨터는 이겨야되고.... 

==> 이 로직까지 추가해야 완성된것임!!!