[React] React로 가위 바위 보 게임 만들기 1

React로 가위바위보 게임을 만들어 보자

예상 결과물

게임 규칙

아래 가위 바위 보 버튼을 클릭하여  랜덤한 값을 내는 컴퓨터를 이기면 되는 것이다. 

 

이 게임을 만들기 전 어떤 내용이 들어가야 하는지 알아보자.

1. 박스 2개가 있어야 하며 그 안에는 컴퓨터와 유저를 구분해주는 텍스트와 사진, 결과가 있다.
2. 그 아래에는 가위 바위 보 버튼이 위치한다.
3. 버튼을 클릭하면 클릭한 값이 유저 박스에 보여진다.
4. 컴퓨터는 랜덤하게 아이템 선택이 된다.
5. 3번, 4번의 결과를 통해 누가 이겼는지 승패를 결정한다.
6. 승패 결과에 따라 박스 테두리의 색이 바뀐다.(ex. 승: 초록, 패: 빨강, 무: 검정)
7. 이긴 횟수, 비긴 횟수, 진 횟수를 UI에 보여준다.
8. 리셋 버튼을 누르면 UI에 보여줬던 횟수가 0으로 초기화 된다. 

---

1. 박스 2개와 버튼 만들기

우리는 유저와 컴퓨터 2개의 박스를 만들어야 한다.

예상 결과물의 박스를 보면 내용은 다르지만 같은 구조인 것이 보인다.

그렇기 때문에 박스를 컴포넌트로 만들어 주어야 한다.

 

왼쪽박스는 You가 오른쪽박스는 Computer가 출력되어야 하기때문에 

값을 props로 전달해 주어야 한다.

 

그리고 박스 아래에는 3개의 버튼이 위치한다.

 

App.js

import logo from "./logo.svg";
import "./App.css";
import Box from "./component/Box";

function App() {
  return (
    <>
    <div className="main">
      <Box title="You" />
      <Box title="Computer"/>
    </div>
    <div className="main">
      <button className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/scissors.png" /></button>
      <button className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/rock.png"/></button>
      <button className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/paper.png"/></button>
    </div>
    </>
  );
}

export default App;

Box.js (박스 컴포넌트)

import React from "react";

const Box = (props) => {
  return (
    <div className="box">
      <h1>{props.title}</h1>
      <img className="item-img" src="https://cdn.pixabay.com/photo/2014/03/25/15/26/rock-paper-scissors-296853_1280.png" />
      <h2>WIN</h2>
    </div>
  );
};

export default Box;

App.css

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.box{
    width: 500px;
    border: 3px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box:first-child{
    margin-right: 30px;
}
.item-img{
    width: 400px;
}

.btn img{
    width: 70px;
}

.btn{
    background-color: white;
    border: none;
    padding:0;
    border-radius: 100%;
}

여기까지 결과

---

2. 아이템 선택하기

본격적인 게임 로직을 만들기 전에

아이템 별로 클릭을 하면 가위사진, 바위사진, 보사진이 나와야 하기 때문에

사진과 이름을 저장해 놓을 객체를  App.js의 App()위에 생성해야한다.

const choice={
  rock:{
    name: "Rock",
    img:"https://cdn.pixabay.com/photo/2014/03/25/15/26/rock-paper-scissors-296854_960_720.png" 
  },
  scissor:{
    name:"Scissor",
    img:"https://cdn.pixabay.com/photo/2014/03/25/15/26/rock-paper-scissors-296853_1280.png"
  },
  paper:{
    name:"Paper",
    img:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvciv57AXv5krjeGZ2dBEtESuvSk33dpvT_-AebVrCx5Flo2ME_F-r9vw7Ayqdx9oq10s&usqp=CAU"
  }
}

 

이제 아이템을 선택하면 박스 안에 그 사진이 나오도록 만들어 줄 차례이다.

그러기 위해서는 버튼에 클릭 이벤트를 사용해야 한다.

버튼에 onClick={play}로 play 함수를 실행시키는 코드를 추가해 주는데

여기서 가위 바위 보를 구별해주기 위해 매개변수를 함께 넣어줬다.

여기까지의 코드가 잘 작동되는지 console에 찍어보자.

// 생략

function App() {
  const paly=(userChoice)=>{
    console.log("선택", userChoice)
  }
  return (
    <>
    <div className="main">
      <Box title="You" />
      <Box title="Computer"/>
    </div>
    <div className="main">
      <button onClick={()=>paly("scissors")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/scissors.png" /></button>
      <button onClick={()=>paly("rock")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/rock.png"/></button>
      <button onClick={()=>paly("paper")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/paper.png"/></button>
    </div>
    </>
  );
}

// 생략

선택이 잘 되는 것을 볼 수 있다.

 

이제 박스 안에 사진이 나오게 하기 위해서 state를 사용해야한다.

(state는 계속해서 UI를 업데이트 할 때 사용하기 때문에)

그리고 에러때문에 잠시 컴퓨터 박스 컴포넌트는 주석처리 해주었다.

 

App.js

import { useState } from "react";
import "./App.css";
import Box from "./component/Box";

const choice={
  rock:{
    name: "Rock",
    img:"https://cdn.pixabay.com/photo/2014/03/25/15/26/rock-paper-scissors-296854_960_720.png" 
  },
  scissors:{
    name:"Scissor",
    img:"https://cdn.pixabay.com/photo/2014/03/25/15/26/rock-paper-scissors-296853_1280.png"
  },
  paper:{
    name:"Paper",
    img:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvciv57AXv5krjeGZ2dBEtESuvSk33dpvT_-AebVrCx5Flo2ME_F-r9vw7Ayqdx9oq10s&usqp=CAU"
  }
}
function App() {
  const [userSelect, setUserSelect] = useState(null);

  const paly=(userChoice)=>{
    setUserSelect(choice[userChoice])
  }
  return (
    <>
    <div className="main">
      <Box title="You" item={userSelect} />
      {/* <Box title="Computer"/> */}
    </div>
    <div className="main">
      <button onClick={()=>paly("scissors")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/scissors.png" /></button>
      <button onClick={()=>paly("rock")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/rock.png"/></button>
      <button onClick={()=>paly("paper")} className="btn"><img src="https://nehalhazem.github.io/rockPaperScissors.io/img/paper.png"/></button>
    </div>
    </>
  );
}

export default App;

Box.js

import React from "react";

const Box = (props) => {
  return (
    <div className="box">
      <h1>{props.title}</h1>
      <img className="item-img" src={props.item && props.item.img} />
      <h2>WIN</h2>
    </div>
  );
};

export default Box;

결과

각기 다른 버튼을 클릭할 때마다 다른 사진이 잘 나오는 것을 확인할 수 있다.

 

이후 로직은 다음 글에서 생성해보자.