티스토리 뷰
타자게임 only HTML/Bootstrap: 2022.06.15 - [WEB/Html & Css] - Bootstrap Basic
타자게임 JS 적용 : JS 실습 링크
학습 목표
JS 코드 흐름을 이해하기
JS 코드
const $ = tag => document.querySelector(tag)
const $$ = tag => document.querySelectorAll(tag)
const wordInput = $('#word-input') // 1
const current = $('#current-word')
const scoreDisplay = $('#score')
const timeDisplay = $('#time')
const message = $('#message')
let words = ['banana', 'key', 'car', 'javascript', 'cat'] // 2
let score = 0
wordInput.addEventListener('input', e => { // 3
const typedText = e.target.value
const currentText = current.innerText
if (typedText.toUpperCase() === currentText.toUpperCase()) { // 3-1
console.log('같습니다')
addScore() // 3-2 ←←
setNewWord() // 3-3 ←←
}
})
function setNewWord() { // 3-2 ↑↑
wordInput.value = ''
message.innerText = 'Now Playing!'
const randomIndex = Math.floor(Math.random() * words.length)
current.innerText = words[randomIndex]
wordInput.focus()
}
function addScore() { // 3-3 ↑↑
score = score + 1
scoreDisplay.innerText = score
}1. HTML 태그 가져옴
2. 랜덤 단어 생성을 위한 배열 생성
3. 해당 노드(wordInput)의 이벤트로 input이 발생하면 콜백함수 실행
3-1. input에 입력된 문자와 특정요소의 innerText가 같다면 코드 실행
3-2. 새로운 단어를 생성하는 함수
랜덤숫자로 ( Math.random() * 문자열의 길이(5) )를 하면 0.xxx~4.xxxx이 나온다.
그 다음 Math.floor를 하면 0~4 값이 나온다. 이 값을 배열의 인덱스로 사용하면 된다.
3-3. 점수를 추가하는 함수
점수를 변경한 값을 요소의 innerText로 넣어주면 된다.
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>Typing Master</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="bg-dark text-white">
<header class="bg-secondary text-center p-3 mb-3">
<h1>Typing Master</h1>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-6 mx-auto">
<p class="lead">
주어진 단어들 <span class="text-success">5</span>초안에 타이핑 하기
</p>
<h2 class="display-2 mb-5" id="current-word">Start</h2>
<input type="text" class="form-control form-control-lg" placeholder="start typing..." id="word-input">
<h4 class="mt-3" id="message"></h4>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-6">
<h3>Time left: <span id="time">0</span></h3>
</div>
<div class="col-12 col-xl-6">
<h3>score: <span id="score">0</span></h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="card card-body bg-secondary text-white">
<h5>안내방법</h5>
<p>각 단어를 주어진 시간안에 타이핑하고, 다시 시작하려면 주어진 단어를 입력하세요.</p>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="col-12 col-sm-3 btn btn-primary">초급</button>
<button class="col-12 col-sm-3 btn btn-secondary">중급</button>
<button class="col-12 col-sm-3 btn btn-success">상급</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
실습파일
'WEB > JavaScript' 카테고리의 다른 글
| [클린코드 For JS] 1. 소개 & 2. 변수 (0) | 2022.06.27 |
|---|---|
| 타자게임 - 데이터상태처리 (setInterval) & API 연동 (0) | 2022.06.16 |
| TODO Dom & Event (0) | 2022.06.14 |
| [JS] HTTP API (0) | 2022.06.13 |
| [JS] DOM, Event (0) | 2022.06.13 |
댓글