javascript]자바스크립트로 반응속도를 체크하는 간단한 웹사이트 만들기

예전에 게임을 한창 재밌게 할 때, 반응속도가 게임의 굉장히 중요한 척도였다.

 

그 게임을 하던 당시 반응 속도를 체크하는 웹 사이트가 있었는데, 상당히 집중해서 재미로 몇 번 했던 기억이 있다.

 

그 기억을 되살려서 해당 기능을 구현하는 간단한 웹사이트를 만들어보기로 했다.

그냥 심심풀이용이다.

 

index.html

0.00MB

일단 해당 파일은 가벼운 파일이니 첨부해놓겠습니다.

 

간단한 스타일링

게임 방식 설명

    1. 화면의 상단에는 간단한 게임의 설명이 있습니다.

    2.아래에는 시작 버튼과 리셋 버튼이 있고, 시작 버튼을 누르면 일정 시간 후, 게임이 시작됩니다.

    3.빨간 영역이 초록색이 되면, 해당 영역을 클릭합니다.

그렇게 되면 반응 속도가 잘 나옵니다. 

 

저의 경우는 약 0.4초가 나왔네요.

 

게임이 완료되었으면 다시 하기 버튼을 클릭해 다시 게임을 진행할 수 있습니다.

 

 

---

코드 설명

 

요소들을 선택할 변수들 선언

 

start 버튼을 클릭하면 랜덤 정수를 생성해서 일정 초 이후 영역을 연두로 바꾸고 시간초를 시작합니다.

setTimeout 메서드는 ms(밀리 초)단위기 때문에 1000을 곱해줍니다.

 

상태 값과 배경이 연두색이면 클릭이 가능하고 영역이 클릭이된 시점을 다시 new Data() 메서드를 사용해 시간을 체크합니다.

 

그리고 텍스트 영역을 만들어 결과 값을 영역에 표시합니다.