반응속도 게임 (html / js)

반응속도 게임을 만드려고 합니다.

절차

프로그래밍 사고

->게임 시작전 화면이 보인다.
->"클릭으로 게임하세요" 문구를 넣어준다.
->게이머가 클릭 한다
->반응속도를 체크하는 대기화면이 나온다.
->2~3초 내에 클릭할 화면이 나온다
->그 때부터 시간을 잰다
->게이머가 클릭한다 / 시간을 잰다
->걸린시간을 계산해서 나타낸다.
->평균값을 나타낸다.

---

코드

• 게임 시작전 화면이 보인다 + "클릭으로 게임하세요" 문구를 넣어준다.

<div id="screen" class="waiting">클릭으로 게임을 시작하세요</div>
<div id="result"></div>
#screen {
  width: 300px;
  height: 200px;
  text-align: center;
  user-select: none;
}
#screen.waiting {
  background-color: aqua;
}

• 게이머가 클릭 한다

screenclass = $screen.classList
$screen.addEventListener('click', () => {
	if (screenClass .contains('waiting')) { // 파랑
	  screenClass .remove('waiting');
	  screenClass .add('ready');
	  $screen.textContent = '초록색이 되면 클릭하세요';
	}
});

• 2~3초 내에 클릭할 화면이 나온다

setTimeout(function () {
  startTime = new Date();
  screenClass.remove('ready');
  screenClass.add('now');
  $screen.textContent = '클릭하세요!';
}, Math.floor(Math.random() * 1000) + 2000);

• 게이머가 클릭한다 + 시간을 잰다

else if (screenClass.contains('now')) { // 초록
  endTime = new Date();
  const current = endTime - startTime;
  records.push(current);
  const average = records.reduce((a, c) => a + c) / records.length;
  $result.textContent = `현재 ${current}ms, 평균: ${average}ms`;
  startTime = null;
  endTime = null;
  screenClass.remove('now');
  screenClass.add('waiting');
  $screen.textContent = '클릭해서 시작하세요';
}

---

더 나아가기

1.초록색 화면이 되기전에 클릭시 '성급했다고 말해주기"

else if (screenClass.contains('ready')) { // 빨강
  clearTimeout(timeoutId);
  screenClass.remove('ready');
  screenClass.add('waiting');
  $screen.textContent = '너무 성급하시군요!';
 }

2.1등 부터 5등 까지 등수 알려주기
records.sort((a,b)=>a-b);
if(records.length>0){
for(let i=0;i<records.length;i++){
$result.append(`${i+1}등 : ${records[i]} `,document.createElement('br'))
if(i===4){
break;
}
}
}

---

화면

---

소스코드(github)
링크텍스트
출처 "ZeroCho TV"
링크텍스트