🚀 Start

랜덤으로 변하는 패드에 맞춰 빠르게 클릭을 하는 게임이다. 추가적으로 난수 생성, 색깔에 따른 클릭제한, 클릭시 타이머, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.

✔️ 난수 생성

유저가 패드를 언제 누를지 시간을 랜덤으로 지정.

1️⃣ setTimeout() : 주어진 시간 이후에 함수 또는 지정된 코드가 실행되게 타이머 설정
2️⃣ getTime(): 지정된 날짜의 시간에 해당하는 숫자 값을 밀리초로 반환
4️⃣ Math.floor(Math.random() * 1000) + 2000): 약 2~3초로 랜덤 지정

  const timeout = useRef<number | null>(null);
  const startTime = useRef(0);
	...
  const onClickScreen = useCallback(() => {
 		...
       timeout.current = window.setTimeout(() => {
        ...
       startTime.current = new Date().getTime();
      }, Math.floor(Math.random() * 1000) + 2000);
    
  ),[state]}
...

✔️ 패드 클릭 제한

만약 초록색 패드가 나오기 이전에 클릭할시.

• clearTimeout : 이전에 설정한 시간 제한을 취소

const onClickScreen = useCallback(() => {
...
else if (state === 'ready') {
    if (timeout.current) {
        clearTimeout(timeout.current);
      }
      setState('waiting');
      setMessage('초록색에 누르시라고요😐 Click👆');
  
...
},[state])  

✔️ 반응속도 체크

const onClickScreen = useCallback(() => {
...
else if (state === 'now') {
 endTime.current = new Date().getTime();
      setState('waiting');
      setMessage('클릭하여 시작하세요.👆');
      setResult(prevResult => {
      return [...prevResult, endTime.current - startTime.current];
     }      
}, [state]);

🖥 실제 구현 화면