[React + Node 같이 때려잡기] (2) 리액트 가위바위보 게임

프로젝트 구축

 

 

리액트 가위바위보 게임

 

 

 

Box 2개 만들기(나 버전, 컴퓨터 버전)

src 아래에 component 폴더 만들고 Box.js 만들어줌

컴포넌트 생성 단축키 : 

• 컴포넌트 만드는 단축키 : rafce
• 단축키가 안나올 경우 설치 extention

• 컴포넌트 만들시 주의사항:
  • 컴포넌트 이름은 반드시 대문자로 시작
    리액트가 컴포넌트와 일반 HTML태그(<div>,<p>등..)을 구별하는 방법은 태그가 대문자로 시작하는지 여부이다 따라서 소문자로 시작을 하면 일반 HTML태그로 분류해버리기 때문에 반드시 첫 글자는 대문자로!

 

App.js / Box.js / App.css 코드

(1) 유저가 선택할 수 있는 가위, 바위, 보 버튼

(2) 유저가 선택한 가위, 바위, 보 이미지가 보여지는 UI 세팅

(3) 컴퓨터 출력 가위, 바위, 보 이미지가 유저 클릭할 때마다 랜덤하게 UI 세팅

 

App.js

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

const chioce = {
	rock: {
		name: 'Rock',
		img: "https://us.123rf.com/450wm/grgroup/grgroup1705/grgroup170505604/78932529-%EB%B0%94%EC%9C%84-%EB%B2%A1%ED%84%B0-%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8-%EB%A0%88%EC%9D%B4-%EC%85%98%EC%9D%98-%EB%8D%A9%EC%96%B4%EB%A6%AC%EC%99%80-%EC%BB%AC%EB%9F%AC-%EB%B0%B0%EA%B2%BD.jpg",
	},
	scissors: {
		name: 'Scissors',
		img: "https://static.vecteezy.com/system/resources/previews/003/240/783/original/scissor-illustration-in-flat-design-vector.jpg",
	},
	paper: {
		name: 'Paper',
		img: "https://llllline.com/images/thumbs/0000017701_hand-palm-graphic-ai-vector_800.jpeg",
	},
}
function App() {

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

	const play = (userChoice) => {
		setUserSelect(chioce[userChoice]);
		let computerChoice = randomChoice();
		setcomputerSelect(computerChoice);

	}

	const randomChoice = () => {
		let itemArray = Object.keys(chioce); //객체에 키값만 뽑아서 배열로 만들어주는 함수
		let randomItem = Math.floor(Math.random() * itemArray.length);
		let final = itemArray[randomItem];
		return chioce[final];
	}
	return (
		<div>
			<div className='main'>
				<Box title="You" item={userSelect} />
				<Box title="Computer" item={computerSelect} />
			</div>
			<div className='main'>
				<button onClick={() => play('scissors')}>가위</button>
				<button onClick={() => play('rock')}>바위</button>
				<button onClick={() => play('paper')}>보</button>
			</div>
		</div>
	);
}

export default App;

 

Box.js

import { React } from 'react';

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

	);
}

export default Box;

App.js

.box {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

.item-img {
	width: 400px;
}

.main {
	display: flex;
	justify-content: center;
}

 

승자 가리기

App.js

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

const chioce = {
	rock: {
		number: 0,
		name: 'Rock',
		img: "https://us.123rf.com/450wm/grgroup/grgroup1705/grgroup170505604/78932529-%EB%B0%94%EC%9C%84-%EB%B2%A1%ED%84%B0-%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8-%EB%A0%88%EC%9D%B4-%EC%85%98%EC%9D%98-%EB%8D%A9%EC%96%B4%EB%A6%AC%EC%99%80-%EC%BB%AC%EB%9F%AC-%EB%B0%B0%EA%B2%BD.jpg",
	},
	scissors: {
		number: 1,
		name: 'Scissors',
		img: "https://static.vecteezy.com/system/resources/previews/003/240/783/original/scissor-illustration-in-flat-design-vector.jpg",
	},
	paper: {
		number: 2,
		name: 'Paper',
		img: "https://llllline.com/images/thumbs/0000017701_hand-palm-graphic-ai-vector_800.jpeg",
	},
}
function App() {

	const [userSelect, setUserSelect] = useState(null);
	const [computerSelect, setcomputerSelect] = useState(null);
	const [result, setResult] = useState("");
	const [computerResult, setComputerResult] = useState("");

	const play = (userChoice) => {
		setUserSelect(chioce[userChoice]);
		let computerChoice = randomChoice();
		setcomputerSelect(computerChoice);
		setResult(judgement(chioce[userChoice], computerChoice));
		setComputerResult(computerJudgement(chioce[userChoice], computerChoice));
	}

	const judgement = (user, computer) => {
		if (user.number == computer.number) {
			return "Tie";
		} return user.number > computer.number ? "Win" : "Lose";
	}

	const computerJudgement = (user, computer) => {
		if (user.number == computer.number) {
			return "Tie";
		} return user.number > computer.number ? "Lose" : "Win";
	}



	const randomChoice = () => {
		let itemArray = Object.keys(chioce); //객체에 키값만 뽑아서 배열로 만들어주는 함수
		let randomItem = Math.floor(Math.random() * itemArray.length);
		let final = itemArray[randomItem];
		return chioce[final];
	}
	return (
		<div>
			<div className='main'>
				<Box title="You" item={userSelect} result={result} />
				<Box title="Computer" item={computerSelect} result={computerResult} />
			</div>
			<div className='main'>
				<button onClick={() => play('scissors')}>가위</button>
				<button onClick={() => play('rock')}>바위</button>
				<button onClick={() => play('paper')}>보</button>
			</div>
		</div>
	);
}

export default App;

Box.js

import { React } from 'react';

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

	);
}

export default Box;