[React Exam 39] 가위바위보 게임 만들기

 

ScissorsRockPaper.png

0.21MB

 

위의 이미지를 src/images 폴더 안에 넣습니다.

 

ScissorsRockPaperGame.css 파일을 다음과 같이 만듭니다.

/* 한장 이미지 크기 : 150 * 128 전체 이미지 크기 : 450 * 384 */ .rps {     width: 150px;     height: 128px;     margin: 2px;     background-image: url('./images/ScissorsRockPaper.png');     background-repeat: no-repeat;     display: inline-block; }

 

ScissorsRockPaperGame.js 파일을 다음과 같이 만듭니다.

import { useEffect, useRef, useState } from 'react'; import './ScissorsRockPaperGame.css' import Button from 'react-bootstrap/Button'; import 'bootstrap/dist/css/bootstrap.min.css'; const ScissorsRockPaperGame = ({ image_num = 0 }) => {     const [imageNumber, setImageNumber] = useState(image_num);     const [isPlay, setIsPlay] = useState(true);     const [value, setValue] = useState(0);     const interval = useRef(1);     let count = useRef(0);     let style = { backgroundPosition: `${imageNumber * -150}px ${value * -128}px` }     useEffect(() => {         interval.current = setInterval(() => {             setValue(count.current);             count.current = ++count.current % 3;         }, 200);         setIsPlay(true);         return () => {             clearInterval(interval.current);             setIsPlay(false);         };     }, []);     let clickHandler = (e) => {         if(isPlay){             clearInterval(interval.current);             setIsPlay(false);             interval.current = 0;             let my = ['가위', '바위', '보'].indexOf(e.target.title);             console.log(value + " : " + my)             let result = "비겼다";             if (value === 0) { // 가위                 if (my === 1) result = "이겼다";                 if (my === 2) result = "졌구나";             } else if (value === 1) { // 바위                 if (my === 2) result = "이겼다";                 if (my === 0) result = "졌구나";             } else { // 보                 if (my === 0) result = "이겼다";                 if (my === 1) result = "졌구나";             }             result = `컴퓨터 : ${['가위', '바위', '보'][value]}\n사용자 : ${['가위', '바위', '보'][my]}\n결  과 : ${result}`             alert(result);         }     }     let buttonClickHandler = (e) => {         switch (e.target.id) {             case "btn1":                 if(!isPlay){                     interval.current = setInterval(() => {                         setValue(count.current);                         count.current = ++count.current % 3;                         setIsPlay(true);                     }, 200);                 }                 break;             case "btn2":                 setImageNumber((val) => (val + 1) % 3);                 // console.log('이미지 번호 : ' + imageNumber);                 break;             default:                 break;         }     }     return (         <div style={{ width: "500px", textAlign: "center" }}>             <div className='rps' style={style}></div>             <div>                 <div className='rps' style={{ backgroundPosition: `${imageNumber * -150}px 0px`, cursor: "pointer" }} title="가위" onClick={clickHandler}></div>                 <div className='rps' style={{ backgroundPosition: `${imageNumber * -150}px -128px`, cursor: "pointer" }} title="바위" onClick={clickHandler}></div>                 <div className='rps' style={{ backgroundPosition: `${imageNumber * -150}px -256px`, cursor: "pointer" }} title="보" onClick={clickHandler}></div>             </div>             <div>                 <Button variant="outline-success" onClick={buttonClickHandler} id="btn1">다 시 하 기</Button>                 {` `}                 <Button variant="outline-success" onClick={buttonClickHandler} id="btn2">이미지 변경</Button>             </div>         </div>     ); } export default ScissorsRockPaperGame;

 

App.js 파일을 다음과 같이 만듭니다.

import ScissorsRockPaperGame from "./ScissorsRockPaperGame"; const App = ()=>{     return <ScissorsRockPaperGame/> } export default App;

 

index.js 파일을 다음과 같이 만듭니다.

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.querySelector("#app")); root.render(     <React.StrictMode>         <App/>     </React.StrictMode> );

 

index.html  파일을 다음과 같이 만듭니다.

<!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <div id="app"></div> </body> </html>

 

실행 결과 입니다.