UI
Web ver
mobile ver
게임 상세 설명
- 두개의 박스가 있고 이것은 각각 사용자와 AI게임박스이다.
- 게임박스 아래에 버튼3개가 있다.(가위, 바위, 보)
- 사용자는 세개의 버튼 중 하나를 선택한다.
- 사용자의 게임박스에는 사용자가 선택한 버튼의 이미지가 나온다.
- 동시에 AI게임박스에는 세개의 패중 하나가 랜덤으로 나온다.
- 두 박스 아래에 승패의 결과가 나온다.
- 게임박스는 이기면 파랑, 지면 빨강, 비기면 초록색으로 테두리 색이 변한다.
Teck Stack
리액트, css, html, JavaScript
코드 정리
AI 게임박스에 랜덤 아이템 출력하기
**주요 함수: Object.keys();, Math.random(); useState();
먼저 위의 코드는 아이템을 랜덤으로 나오게 하기위함이다. 사용자의 상대인 AI의 게임박스에 가위, 바위, 보 중 랜덤으로 나올 수 있어야 한다. choice에 있는 아이템 중 img가 랜덤으로 출력되어야 한다. 나는 Object.key()함수를 통해 객체의 키값만 뽑아 배열로 반환 시켜보았다. 콘솔 창을 열어 결과를 확인해보니 아래의 사진 처럼 아이템들이 배열로 반환되었다.
결과를 확인하고 이 배열의 요소 중 하나가 랜덤으로 어떻게 화면에 보일 수 있을지 고민해보았다. 랜덤으로 컴퓨터가 0, 1, 2중 선택할 수있어야 한다. 랜덤을 생각해보니 가장 먼저 Math.random()가 떠올랐다. 0~1사이의 소수점 자리 수 중에 램덤으로 반환해주는 함수이다. 이 함수를 이용해 랜덤 수를 뽑아 해당 수에 만들어 놓은 배열의 길이를 곱하면 0.2334..., 1.251651..., 2.156151...이렇게 수가 뽑아지는 데 여기서 Math.floor()를 통해 소수점자리를 버리고 정수를 뽑게된다. 그럼 본인이 원하는 0, 1, 2 중에 랜덤으로 아이템을 고를 수 있다. 이제 랜덤으로 뽑은 아이템이 화면에 나와야 사용자가 확인할 수 있다. 나는 useState()을 사용했다.
const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);function App() {
const [computerSelect,setComputerSelect]=useState(null);
const play = (userChoice)=>{
let computerChoice = randomChoice();
setComputerSelect(computerChoice);
};사용자가 선택한 후에 AI화면에 아이템이 나와야 함으로 useState의 초기값은 null로 해준다. 랜덤으로 뽑은 배열 아이템 함수를 computerChoice에 넣어주고 상태값 갱신함수(setComputerSelect())에 computerChoice을 넣어준다.
이렇게 하면 AI게임 박스에서 랜덤 아이템 이미지가 나오게 된다.
사용자의 선택에따라 AI게임박스에 랜덤으로 아이템이미지가 나오고 있다.
승패결과 알려주기
승패 결과를 화면에 출력하기 위한 코드이다.
먼저 승패를 결정하는 로직을 살펴보자.
user == computer Tie user == rock , computer == scissors user Win user == rock , computer == paper user lose user == scissors , computer == paper user Win user == scissors , computer == paper user Win user == scissors , computer == rock user lose user == paper , computer == rock user Win user == paper , computer == scissors user lose
사용자입장에서의 승패는 위의 로직과 같다. 이것을 구현하기 위해 if문, 삼항연산식을 이용하였다. 코드는 로직 그대로 입력하였고 결과는 정상적으로 출력되었다.
번외)
나는 승패결과에 따라 테두리색에 변화를 주었는데 이기면 파랑색, 지면 빨강색, 비기면 초록색으로 테두리색이 바뀐다. 이것은 게임박스 div에 클래스네임을 result(승패결과)로 지정해주어 css를 통해 border를 지정해주었다.
프로젝트를 마치며
리액트를 공부하고 처음으로 만든 토이 프로젝트이다. 이 프로젝트를 진행하면서 사용성에 대해 섬세하게 고민하게 되었다. 예를 들면 가위바위보 버튼에 호버효과를 주어 어떤 버튼에 마우스를 올리고 있는지 사용자에게 알려주고 승패결과를 색깔별로 다르게 출력하여 결과를 확실히 전달해주었다. 또한 이 프로젝트를 진행하면서 함수 사용의 폭이 넓어졌다. 원래 알고있었던 함수(Math.floor 혹은 Math.random이라던지)를 이론적으로만 알았지만 직접 해당 함수를 사용해보면서 아 이런 상황에서도 사용할수있구나 하고 느꼈다. 개발 공부를 하고 앞으로 다양한 프로젝트를 진행하기 앞서 좋은 마음가짐을 얻었다.
함수를 폭넓고 다양하게 사용해보자!
