Front/Javascript

타이핑 예제

Html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    cs 속성주는거-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <h1>타이핑 마스터!</h1>
    </div>
    <div class="word-display">
        Hello
    </div>
<div class="word-input-box">
    <input type="text" class="type text word-input">
</div>
<div class="game-info">
    <div>남은 시간 : <span class="time">0</span>초</div>
    <div>획득 점수 : <span class="score">0</span>점</div>
</div>
<button class="button loading" onclick="run()">게임을 불러오는 중...</button>
<script src="main.js"></script>
</body>
</html>

 

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header {
    width: 100%;
    background: #3b5999;
    color: white;
    text-align: center;
    padding: 1rem;
}

.word-display {
    margin-top: 3rem;
    font-size: 80px;
    color: #3b5999;
}

.word-input-box {
    margin-top: 2rem;
}

.word-input {
    padding: 0.5rem;
    width: 300px;
}

.game-info {
    margin-top: 2rem;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    width: 200px;
}

.time, .score {
    font-size: 30px;
}

.button {
    width: 200px;
    height: 35px;
    background: #3b5999;
    color: white;
    border: none;
    margin-top: 3rem;
    cursor: pointer;
}

.loading {
    background: #ccc;
    cursor: not-allowed;
}

 

JS

const GAME_TIME = 6;
let score = 0;
let time = GAME_TIME;
let isPlaying = false;
let timeInterval;
let checkInterval;
let words = [];

const wordInput = document.querySelector('.word-input');
const wordDisplay = document.querySelector('.word-display')
const scoreDisplay = document.querySelector('.score');
const timeDisplay = document.querySelector('.time');
const button = document.querySelector('.button');

init();

function init(){
    getWords()
    wordInput.addEventListener('input', checkMatch)
}

// 게임 실행
function run() {
    if(isPlaying){
        return;
    }
    isPlaying = true;
    time = GAME_TIME;
    wordInput.focus();
    scoreDisplay.innerText = 0;
    timeInterval = setInterval(countDown,1000);
    checkInterval = setInterval(checkStatus, 50)
    buttonChange('게임중')
}

function checkStatus() {
    if(!isPlaying && time === 0) {
        buttonChange("게임시작")
        clearInterval(checkInterval)
    }
}


// 단어 불러오기
function getWords(){
    words = ['Hello', 'Banana', 'Apple', 'Cherry'];
    buttonChange('게임시작')
}

// 단어일치 체크
function checkMatch() {

    if (wordInput.value.toLowerCase() === wordDisplay.innerText.toLowerCase()){
        wordInput.value = "";
        if(!isPlaying){
            return;
        }
        score++;
        scoreDisplay.innerText = score;
        time = GAME_TIME;
        const randomIndex = Math.floor(Math.random() * words.length);
        wordDisplay.innerText = words[randomIndex]
    }
}



function countDown() {
    // (조건) ? 참 : 거짓일경우
    time > 0 ? time -- : isPlaying = false;

    if(!isPlaying){
        clearInterval(timeInterval)
    }
    // time이 0보다 클경우 time을 1씩 깍고, 거짓일 경우엔 게임이 종료가 되었다는걸 알려주는 것.
    timeDisplay.innerText = time;
}


function buttonChange(text) {
  button.innerText = text;
  text === '게임시작' ? button.classList.remove('loading') : button.classList.add('loading')
}

 

후에 JS부분의 예시 단어5개는 API로 이용 가능.

Random word api 등

저작자표시

'Front > Javascript' 카테고리의 다른 글

Ajax 활용 미세먼지 70이상 값만 빨간색 표시 예제  (0) 2021.02.28