🐱 #6 React.js - 가위바위보 게임

🧩 가위바위보 게임

React로 구현한 가위바위보 게임이다.

가위바위보게임 페이지
github

1. Let's play 버튼을 눌러 게임을 시작한다.
2. 유저가 가위, 바위, 보 중에 하나를 선택하면
3. 컴퓨터는 랜덤으로 가위, 바위, 보 중에 하나를 나타낸다.
4. 유저나 컴퓨터중 이겼다면 테두리와 글자가 녹색으로 졌다면 빨간색 비겼다면 보라색으로 변경된다.

🏃‍♂️ Let's play 버튼 호버 채워지는 css

• JAVASCRIPT

<button className='playBtn' onClick={() => show()}>Let's play??</button>

• CSS

.playBtn{
  width: 150px;
  height: 50px;
  border: 3px solid white;
  border-radius: 20px;
  background: none;
  margin-top: 50px;
  cursor: pointer;

  color: white;
  font-size: 20px;
  
  position: relative;
  z-index: 1;
}
.playBtn:hover{
  color: black;
  background-color: white;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.playBtn:after {
  content: "";
  border-radius: 20px;
  width: 0%;
  height: 100%;
  top: 0;
  position: absolute;
  left: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  background: #ffffff;
}
.playBtn:hover:after {
  width: 100%;
  z-index: -1;
}

🏃‍♂️ Let's play 버튼을 눌러 게임 시작

• JAVASCRIPT

  const show = () => {
    let bg = document.querySelector(".backGround");
    bg.classList.add("active")
  };

 <button className='playBtn' onClick={() => show()}>Let's play??</button>

• CSS

.active{
  transform: scale(0);
  transition: 1s;
}

Les's play 버튼을 누르면 active라는 클래스가 추가 되게 만들었다.
active는 transform에 scale을 0으로 줘 크기를 줄이고 transition으로 시간 1s을 줬다.

🏃‍♂️ 가위, 바위, 보를 선택해 게임시작.

🏃‍♂️가위, 바위, 보 버튼

🧩 이미지 출력(user)

const choice = {
    rock: {
      name: "Rock",
      img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpSJwo%2FbtqXJV1lACE%2Fnx5XrxkCLWXh9UsnoS8vbK%2Fimg.png"
    },
    paper: {
      name: "Paper",
      img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmjB2s%2FbtqXHhp6kpG%2FTH14W4U612SxKo9uuR2sB0%2Fimg.png"
    },
    scissors: {
      name: "Scissors",
      img: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHfURw%2FbtqXKvOTNWK%2FgWTwPXEg9QzSV0ilOuwuak%2Fimg.png"
    }
  }

먼저 가위, 바위, 보에 대한 객체을 만든다.

<div className='btn-style'>
        <button onClick={() => play("scissors")}><FontAwesomeIcon icon={faHandScissors} className="font" /></button>
        <button onClick={() => play("rock")}><FontAwesomeIcon icon={faHandBackFist} className="font" /></button>
        <button onClick={() => play("paper")}><FontAwesomeIcon icon={faHand} className="font" /></button>
</div>

버튼 이벤트가 발생하면 play()함수를 콜백한다, ()=> 이것이 콜백하는 것이다. 콜백하면서 play()함수 안에 있는 내용도 같이 콜백한다.

const play = (userChoice) => {

};

play()함수안에 있는 내용을 userChoice라는 매개변수로 받는다.
console.log(userChoice)를 출력하면 버튼을 누르면 play("내용") 함수 안에 있는 내용이 userChoice매개변수에 저장된다.

이제 play() 버튼을 눌렀을 때 사용자가 선택한 가위, 바위, 보 이미지가 나와야 한다. 여기서 부터 state를 작성한다.

const [userSelect, setuserSelect] = useState(null);
const play = (userChoice) => {
	setuserSelect(choice[usserChoice]);
};

setuserSelect(choice[usserChoice]); 은 setuserSelect는 변경할 내용을 입력 해주는 것이다. choice라는 배열의 userChoice라는 매개변수에 저장된 값을 인덱스값으로 할당 해주는 것이다. 가위 버튼을 선택하면 Scissors라는 객체가 setuserSelect에 저장된 것이다. 그럼 이 저장된 값을 써야한다.

return (
    <div className='container'>
      <div className='wrap'>
        <Box name="You" item={userSelect}/>
        <Box name="Computer"/>
      </div>
    </div>
  );

item={userSelect} Box 컴포넌트에 item 이라는 속성 값을 userSelect로 지정 해주는 것이다.

❌ 위 코드를 실행한다면 에러가 뜰 것이다.

이 에러가 뜬 이유는 위 코드를 보면 "You" 라는 박스에는 item속성이 저정되어 있는데 "computer"에는 item 속성이 지정되지 않았다. 그래서 Box컴포넌트는 "You"를 그릴 때는 문제가 되지 않지만 "computer"를 그릴 때는 문제가 되는 것이다.

그러한 이유로 잠시 "computer" 박스는 주석을 달아야 한다.

item={userSelect} 속성을 지정했다면 Box.js로 넘어간다.

• Box.js

import React from 'react'

const box = (props) => {
  return (
    <div className=box>
        <h1>{props.name}</h1>
        <img src={props.item && props.item.img} alt="" />
        <p>{result}</p>
    </div>
  )
}

export default box

이미지 값의 props를 사용해 할당 해준 것이다. 근데 왜 img할당 할 때 <img src={props.item && props.item.img} alt="" /> 다른 코드와 다른가?

그 이유는 <img src={props.item.img} alt="" /> 이렇게만 쓰면 마찬가지로 에러가 뜬다.

에러가 뜬 이유는 위 state에서 const [userSelect, setuserSelect] = useState(null);에 null값을 준 것이다. 그럼 컴퓨터 입장에선 null을 받아 UI를 그릴 수 없는 것이다. 그래서 이 문제를 해결하기 위해 조건부 렌더링을 하는 것이다.

<img src={props.item && props.item.img} alt="" />
props.item에 값이 있을 때(null 이 아닐 때)만, props.item.img값을 보여준다.

🧩 이미지 출력(computer)

  const randomChoice = () => {
    let itemArray = Object.keys(choice);
    let randomitem = Math.floor(Math.random() * itemArray.length);
    let final = itemArray[randomitem];

    return choice[final];
  };

똑같이 위에 배열이 만들어져 있는 상태로 시작한다. 컴퓨터가 랜덤으로 이미지를 선택해 UI에 출력해야 한다. 일단 먼저 randomChoice 함수를 먼저 만든다.

let itemArray = Object.keys(choice); itemArray라는 변수에 choice객체를 배열로 만들어주는 것이다.

let randomitem = Math.floor(Math.random() * itemArray.length); randomitem이라는 변수에 Math.random()라는 함수에 itemArray배열에 길이만큼 곱하고 Math.floor() 내장함수를 써서 뒤에 소숫점을 다 없애 할당한다.

let final = itemArray[randomitem]; final이라는 변수에 itemArray변수에 randomitem변수에 저장된 인덱스 값을 할당한다.

이것을 return choice[final]; return해 choice 객체 값에 넣는 것이다.

randomChoice() 함수를 다 작성하였다면 play() 버튼에 함수를 써야한다.

const [computerSelect, setcomputerSelect] = useState(null);

 const play = (userChoice) => {
    setuserSelect(choice[userChoice]);

    let computerChoice = randomChoice();
    setcomputerSelect(computerChoice);
  };

computerChoice라는 변수에 randomChoice()함수를 할당하고 setcomputerSelect에 computerChoice를 지정하고 아까 주석을 했던 "Computer" 컴포넌트 박스에도 item값을 설정한다.

return (
    <div className='container'>
      <div className='wrap'>
        <Box name="You" item={userSelect}/>
        <Box name="Computer" item={computerSelect}/>
      </div>
    </div>
  );

🧩 결과 출력(win, lose, tie)

const [result, setResult] = useState("");

const play = (userChoice) => {
    setuserSelect(choice[userChoice]);

    let computerChoice = randomChoice();
    setcomputerSelect(computerChoice);

    setResult(randomPic(choice[userChoice], computerChoice));
  };

const randomPic = (user, computer) => {
    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";
  };

승패를 가리기 위해 randomPic 이라는 함수를 만든다. 그리고 const [result, setResult] = useState(""); state를 지정하고 setResult(randomPic(choice[userChoice], computerChoice));
randomPic(유저값, 컴퓨터 선택 값)을 전달한다.

전달 된 값을 const randomPic = (user, computer) 매개변수로 받고 if문을 써서 user.name 이 computer.name이 같으면 TIE를 출력하고 같지 않다면 if문 안에 또 if를 쓴다. 삼항 연산식을 쓴 것이다.

무슨 말이냐면 user.name과 computer.name이 같지 않아?? 같지 않다면 user.name이 Rock과 같아?? 같다면 computer.name이 Scissors와 같아?? 같다면 Win을 출력하고 같지 않다면 Lose를 출력해! 이뜻이다.

함수를 설정을 다했다면 play()함수를 실행할 때 도 값이 전달되어야 한다.

return (
    <div className='container'>
      <div className='wrap'>
        <Box name="You" item={userSelect} result={result}/>
        <Box name="Computer" item={computerSelect} result={result}/>
      </div>
    </div>
  );

Box컴포넌트에 result={result} 값을 넣어주고 box.js에도 result 값을 넣어준다.

return (
    <div className={`box ${result}`}>
        <h1>{props.name}</h1>
        <img src={props.item && props.item.img} alt="" />
        <p>{props.result}</p>
    </div>
  );

❌ 하지만 여기서 문제가 생긴다. reuslt값을 넣어주면 결과는 나오겠지만 user와 computer가 동시에 같은 결과가 나올 것이다. 그렇다면 이것을 해결해주기 위해 또 if문을 써야한다.

    let result;

    if(props.name === "Computer" &&
        props.result !== "Tie" &&
        props.result !== ""
    ){
        result=props.result === "Win"? "Lose":"Win";
    } else {
        result=props.result;
    }

  return (
    <div className={`box ${result}`}>
        <h1>{props.name}</h1>
        <img src={props.item && props.item.img} alt="" />
        <p>{result}</p>
    </div>
  )

result라는 변수를 지정해주고 props.name이 computer와 같거나 props.result가 Tie가 아니거나 비어있을 때 props.result가 win이랑 같아?
같다면 Lose를 출력해주고 같지않다면 Win을 출력해줘!!

근데 위 조건과 맞지 않다면 그냥 props.result;를 출력해줘

작성한 if문을 result변수에 담고 <p>{result}</p>에 result 변수를 선언하면 유저가 이기면 컴퓨터는 지고 유저가 지면 컴퓨터가 이기는 결과가 나타나는 것이다.

🧩 결과(win, lose, tie)에 따른 박스 색 변경

  return (
    <div className={`box ${result}`}>
        <h1>{props.name}</h1>
        <img src={props.item && props.item.img} alt="" />
        <p>{result}</p>
    </div>
  )

Box컨포넌트의 className에 동적인 result값으로 클래스를 지정해주고 CSS를 작성해준다.

.Win{
  border: 10px solid green;
  color : green;
  transition: 1s;
}
.Lose{
  border: 10px solid red;
  color : red;
  transition: 1s;
}
.Tie{
  border: 10px solid purple;
  color : purple;
  transition: 1s;
}

다음에는 더 심화적으로 노력해서 만들어야지