[1人 프로젝트] 미니게임 사이트 4회차

반응속도 측정

🎉 성과

완성한 부분

반응속도 측정하는 게임을 만들었다.

 

완성한 이유

JavaScript으로 구현 가능한 간단한 게임을 찾던 도중, 제일 재밌어 보이는 것이 반응속도 측정하는 게임이었다.

 

---

 

 

✨ 느낀 점

🧡 좋았던 점

새로운 배포사이트 사용

Netlify, AWS 다음으로 GitHub Pages 를 이용해 배포하였다. 간단한 웹사이트를 올리기에 딱인거 같다.

👍 알게 된 점

평균 구하기

평균 구하기

평균 구하는 방법을 파이썬 알고리즘을 수없이 풀면서 간단하다고 생각했다. 간과한 것이 새로 변수가 추가되면 다시 평균을 구하는 것이어서 어려움을 겪었다. reduce() 함수는 매개변수로 함수를 넣어 사용한다. reduce함수는 기존에 있는 값에 새로운 값을 계속 더할 수 있게 도와준다. 그래서 내가 반응속도를 측정하여 얻은 새로운 값을 계속 더할 수 있게 도와준다.

배열.reduce((누적값, 현잿값) => 새로운누적값

 

소수점 아래 숫자 구하기

~ 자리 소수점 구하기는 .toFixed()를 이용한다.

toFixed를 붙이면 해당 숫자의 소수점 아래 숫자까지 표현해준다. toFixed(3)은 소수점 3자리까지 보여준다. (예시 : 1.123)

 

시간 구하기

파란색이 나타났을때부터 클릭까지 시간 측정

시간은 new Data()를 이용해 터치 시작시간과 터치했을때의 시간을 빼주면 반응시간을 측정할 수 있다.

 

클래스 안에 특정 문자 확인, 교체

classList는 클래스를 제어를 도와준다.

display.classList.contains('클래스명')는 클래스명이 display안에 클래스가 있는지 확인
display.classList.replace('기존 클래스명', '교체할 클래스명')는 기존 클래스명을 교체할 클래스명으로 바꿔준다.

또 toggle이라는 것도있는데 새로 클래스를 추가해준다. 

 

❗ 보완할 점

1. hover 효과

hover하면 글자가 바뀌게 하자

JavaScript 없이 html과 css로만 만든다면 hover를 쉽게 구현이 가능할 텐데 JavaScript도 화면에 영향을 주기 때문에 생각할 것이 많아져 시간이 많이 지체되었다. 나중에 수정 작업을 할 때 구현하기로 생각했다.