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

<알고리즘(순서)>

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

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

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

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

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

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

 

UI에 보여주려면 state라는 컴포넌트를 만들어야 한다.

const [computerSelect, setComputerSelect] = useState(null)

computer을 위한 state를 만든다.

초기값은 null

 

<Box title="Computer" item={computerSelect}/>

item에는 computerSelect를 넘겨준다.

(이제 computer Box에도 item이라는 속성이 들어간다!)

 

유저가 아이템을 선택할 때 랜덤한 값을 선택한다.

유저가 아이템을 선택하는 순간은 언제? play()라는 함수! 

play()라는 함수안에서 computer가 랜덤하게 값을 선택하게 해주도록 할것임

랜덤선택하는 함수를 따로 만들어 줄게요

 

function App() {
  const [userSelect, setUserSelect] = useState(null)
  const [computerSelect, setComputerSelect] = useState(null)
  const play=(userChoice)=>{
    setUserSelect(choice[userChoice])
    let computerChoice = randomChoice()
  }
  const randomChoice=()=>{ //randomChoice라는 함수를 만든다.
    
    let randomItem = Math.random()
    console.log("random value", randomItem)

  }

computerChoice는 randomChoice라는 함수를 실행한 값의 결과값을 computerChoice라는 어떤 변수 안에 넣어준다. 

 

컴퓨터에서 랜덤으로 값을 받을 수 있는 방법이 뭐가 있지?

Math.random() : 랜덤한 숫자값을 받아올 수 있다. - 0~1 사이에 랜덤한 값을 반환한다.

 

 

random value 0.3330393760897159

 

random value 0.8317747297126525

random value 0.02762013988010048

우리가 받을 수 있는 건 숫자일 뿐 .. 근데 숫자가 어떻게 가위바위보랑 연결이 될까?

- 이런게 알고리즘 문제!((나중에)외워두면 좋다)

<해결>

이 아이템과 숫자를 연결짓는 방법은... 배열!

 

배열에 아이템이 들어가 있으면... [가위,바위,보]

여기에 인덱스 번호가 자동으로 부여된다.,,, [0,1,2] -> 인덱스번호는 숫자니까 Math.random()을 통해서 random한 인덱스값을 가져올 수 있다. 이 값을 통해서 인덱스 번호 아래에 있는 아이템을 가지고 온다.

"0,1,2 - 이 값을 Math.random()으로 가져온다"

 

먼저, 객체를 배열화 시키자!

 

App.js

확대함

객체의 키값이 배열의 아이템으로 들어감!

 

Object.keys() :객체에 있는 키 값(rock,scissors,paper)만 뽑아서 array로 만들어 주는 함수

 

여기까지!

일단 객체를 array로 바꾸는것 완료!