타자.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
div {text-align: center;}
#header {
background: pink;
color: #fff;
line-height: 80px;
font-size: 36px;
}
#text {
color: pink;
font-size: 62px;
padding: 30px;
}
p {
padding: 10px;
}
input {
line-height: 40px;
width: 200px;
}
button {
line-height: 40px;
width: 200px;
}
</style>
</head>
<body>
<div id="header">
타자게임
</div>
<div>
<div id="text">
display
</div>
<p><input type="text" id="inputText"></p>
<p>남은시간 : <span id="time">0</span>초 점수 : <span id="score">0</span>점</p>
<p><button id="gameBtn">게임시작</button></p>
</div>
<script>
let displayText = document.querySelector('#text');
let inputWord = document.querySelector('#inputText');
let scoreDisplay = document.querySelector('#score');
let timeDisplay = document.querySelector('#time');
let btn = document.querySelector('#gameBtn');
let score = 0;
let time = 20;
let isPlaying = false; // 게임중인지
let timeInterval; // 담아줄 변수
// 글자배열
let texts = ['display', 'float', 'background', 'color', 'position', 'clear', 'flex', 'textlign', 'top'];
// 0~9 까지 랜덤한 값이 들어가게 만들기 ★
let randomNum = Math.floor(Math.random()*10);
displayText.innerHTML = texts[randomNum];
// 게임시작 버튼을 클릭하면
// isPlaying 값을 true로 할당
// 버튼의 값을 게임중으로 변경
// timeInterval 을 실행
btn.addEventListener('click',function(){
if(isPlaying) return; // 게임중일 때, 한 번만 실행 ★
btn.innerHTML = '게임중';
isPlaying = true; // 게임 진행중
timeDisplay.innerHTML = time; // 초기타입지정
timeInterval = setInterval(timer, 1000) // timer 함수 만들기, 1초마다 timer함수 실행
})
// 1초마다 호출됨, 초기값 20초 넣어놓았음, true인지 false인지
function timer() {
time > 0 ? time -- : isPlaying = false; // 1초씩 빼주기 : time 값이 0이면 false(종료)
timeDisplay.innerHTML = time;
if(!isPlaying) { // 아니라면
btn.innerHTML = '게임종료';
clearInterval(timeInterval); // 종료시키기
}
}
// // input - value 변경은 addE
inputWord.addEventListener('input', function() {
if(!isPlaying) return; // 게임중이 아니면 return
// input의 값과 화면에 글자가 일치할 때 점수를 1씩 더하기
if(displayText.innerHTML === inputWord.value) {
score += 1;
let randomNum = Math.floor(Math.random() * 10);
displayText.innerHTML = texts[randomNum];
inputWord.value = "";
scoreDisplay.innerHTML = score;
}
})
</script>
</body>
</html>
