react_up down 간단한 웹 게임 만들기!

up_and_down_game

게임즐기기!!

미니 프로젝트 목표

React에서 useState와 input값에 대한 이해를 향상 시키고 렌덤함수와 setTimeout를 응용해서 간단한 웹 게임 구현하기!

미니 프로젝트 내용

리엑트를 활용한 up down 간단한 웹 게임 입니다.

사용 스택

react, html, css

기능 및 시연 영상

1. 1부터 30까지의 임의 수를 맞추는 게임 입니다.
2. 정답을 맞추면 셋타임아웃을 통해 새로운 렌덤 숫자가 생성됩니다.

코드

import React,{useState} from 'react'
import './App.css';

function App() {
const [status, setStatus] = useState('1~30 사이의 숫자를 맞춰보세요!');
const [answer, setAnswer] = useState(0);
const [righyAnswer, setRightAnser] = useState(Math.ceil(Math.random()*30));


function returnFunc(e){

  e.preventDefault();
  if(+answer === righyAnswer){
    console.log(answer)
    setStatus("정답!!!")
    setTimeout(function(){
      resetFunc();
    }, 2000)

  }else if(answer < righyAnswer){
    setStatus("업 ▲")
  }else{
    setStatus("다운 ▼")
  }
}

// 게임 리셋 후 또 다른 렌덤 숫자 생성, 
// 텍스트 상태 변경
// 현재 input 초기값 설정
function resetFunc(){
  setRightAnser(Math.ceil(Math.random()*30))
  setStatus("한번더! 1~30 사이의 숫자를 맞춰보세요!")
  setAnswer(0);
}


// input 값을 가져올수 있는 함수
function changeAnswer(e){
  setAnswer(e.target.value);
}


  return (
    <div class="background-card">
       <form onSubmit={returnFunc}>
      <h1>Up and Down</h1>
      <p>{status}</p>
      <input 
      type="number"  max="30" min="1"
      value={answer} onChange={changeAnswer} />
      <button>확인</button>
      </form>
    </div>
  );
}

export default App;

자바스크립트의 기본적 지식만 있다면 리엑트로 충분히 간단한 게임을 만들수 있습니다!