<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>반응속도</title>
<style>
#screen {
width: 300px;
height: 200px;
text-align: center;
user-select: none;
}
#screen.waiting {
background-color: aqua;
}
#screen.ready {
background-color: red;
color: white;
}
#screen.now {
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="screen" class="waiting">클릭해서 시작하세요</div>
<div id="result"></div>
<div id="rank"></div>
<div id="life">목숨 : 10</div>
<script>
const $screen = document.querySelector('#screen');
const $result = document.querySelector('#result');
const $life = document.querySelector('#life');
const $rank = document.querySelector('#rank');
let starttime
let endtime
let diff
let result = []
let setid
let life = 10;
let able = true
let rank
function restart() {
if (life === 0) {
console.log('됐다')
life = 10;
$screen.classList.remove('ready', 'now')
$screen.classList.add('waiting')
$result.textContent = '목숨초과 입니다 처음부터 다시 시작할게요'
$screen.textContent = '화면이 초록색이 되면 클릭하세요'
$life.textContent = `목숨 : ${life}`
result = []
$rank.textContent = ''
}
}
$screen.addEventListener('click', () => {
if ($screen.classList.contains('waiting')) {
if (life > 0) {
$screen.classList.remove('waiting')
$screen.classList.add('ready')
$screen.textContent = '화면이 초록색이 되면 클릭하세요'
setid = setTimeout(() => {
starttime = new Date()
$screen.classList.remove('ready')
$screen.classList.add('now')
$screen.textContent = '클릭하세요!'
}, Math.floor((Math.random() * 1000) + 2000));
}
}
else if ($screen.classList.contains('ready')) {
clearTimeout(setid)
$screen.classList.remove('ready')
$screen.classList.add('waiting')
$screen.textContent = '너무 성급하시군요. 클릭해서 다시 시작하세요'
life -= 1
$life.textContent = `목숨 : ${life}`
restart()
}
else if ($screen.classList.contains('now')) {
if (able === true) {
able = false
endtime = new Date()
diff = endtime - starttime
result.push(diff)
let ave = Math.floor(result.reduce((a, b) => a + b) / result.length)
$result.textContent = `${diff} ms 평균 : ${ave}`
life -= 1
$life.textContent = `목숨 : ${life}`
rank = result.sort((a, b) => a - b).slice(0, 5)
rank.forEach((el, idx) => {
$result.append(
document.createElement('br'),
`${idx + 1}위: ${el}ms`,
);
})
}
setTimeout(() => {
able = true
$screen.classList.remove('now')
$screen.classList.add('waiting')
$screen.textContent = '클릭해서 시작하세요'
restart()
}, 2000);
}
})
</script>
</body>
</html>반응 속도 측정기이다. 화면 구분으로 대기 준비 실행으로 나눠서 각각 실행된다
준비, 실행 단계에서 restart()함수로 목숨이 0인지 체크하고 0이면 새로시작 0이 아닐시 무시하고 다시 대기 준비 상태에서 목숨과 평균 1~5위순위 기능을 포함하여 진행했다.
@banhogu