Front-end 국비지원 #063일 (1-2)

JooSehyun·2023년 1월 24일
0

JavaScript

Typing Game 만들기

결과

🕹️SPEED TYPER🕹️

난이도에 따라 잔여 시간은 달라지고 주어진 시간내에 타이핑을 완료하면 잔여시간이 점수에 반영되고 보너스 시간이 생기는 간단한 타이핑 게임을 만들어본다.

HTML

<body>
    <button id="settings-btn" class="settings-btn">
        <i class="fas fa-cog"></i>
    </button>
    <div id="settings" class="settings">
        <form id="settings-form">
            <div>
                <label for="difficulty">Difficulty</label>
                <select id="difficulty">
                    <option value="Easy">Easy</option>
                    <option value="Medium">Medium</option>
                    <option value="Hard">Hard</option>
                </select>
            </div>
        </form>
    </div>
    <div class="container">
        <h2>🎮 Speed Typer 🎮</h2>
        <small>Type the following :</small>
        <h1 id="word"></h1>
        <input type="text" id="text" autocomplete="off" onKeypress="javascript:if(event.keyCode==13) {search_onclick_submit}" placeholder="Type the word here..." autofocus>

        <p class="time-container">Time left : <span id="time">10s</span></p>
        <p class="score-container">Score : <span id="score">0</span></p>
        <div id="end-game-container" class="end-game-container"></div>
    </div>
</body>

CSS

*{margin: 0; padding: 0; box-sizing: border-box;}
body{
    background-color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
button{
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    padding: 5px 15px;
}
select{
    width: 200px;
    padding: 5px;
    appearance: none;
    border-radius: 0;
    background: #a7c5e3;
}
select:focus, button:focus{outline: none;}
.settings-btn{
    position: absolute; 
    bottom: 30px; 
    left: 30px;
}
.settings{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    height: 70px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0);
    transition: transform .3s ease-in-out;
}
.settings.hide{transform: translateY(-100%);}
.container{
    background-color: #34495e;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    color: #fff;
    position: relative;
    text-align: center;
    width: 500px;
}
h2{
    background-color: rgba(0, 0, 0, .3);
    padding: 8px;
    border-radius: 4px;
    margin: 0 0 40px;
    text-transform: uppercase;
}
h1{}
input{
    border: 0; 
    border-radius: 4px; 
    font-size: 14px; 
    width: 300px; 
    padding: 12px 20px; 
    margin-top: 10px;
}
.time-container{position: absolute; top: 70px; left: 20px;}
.score-container{position: absolute; top: 70px; right: 20px;}
.end-game-container{
    background-color: inherit;
    position: absolute;
    display: flex;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.reload-btn{margin-top: 10px;}
#text.error{animation: vibration .1s infinite;}
@keyframes vibration {
    from {
      transform: rotate(1deg);
    }
    to {
      transform: rotate(-1deg);
    }
  }

script

const word=document.getElementById('word');
const text=document.getElementById('text');
const scoreEl=document.getElementById('score');
const timeEl=document.getElementById('time');
const endgameEl=document.getElementById('end-game-container');
const settingsBtn=document.getElementById('settings-btn');
const settings=document.getElementById('settings');
const settingsForm=document.getElementById('settings-form');
const difficultySelect=document.getElementById('difficulty');
const words = [
    'apple',
    'banana',
    'tomato',
    'factory',
    'parent',
    'child',
    'strong',
    'ship',
    'shoping',
    'picture',
    'future',
    'stock',
    'pants',
    'boots',
    'hat',
    'angel',
    'backpack'
];
let randomWord;
let score=0;
let time=10;
text.focus();
const timeInterval=setInterval(updateTime,1000);
function getRandomWord(){
    return words[Math.floor(Math.random() * words.length)]
}
function addWordToDOM(){
    randomWord=getRandomWord();
    word.innerHTML=randomWord;
}
//점수
function updateScore(){
    score++;
    scoreEl.innerHTML = score;
}
//시간
function updateTime(){
    time--;
    timeEl.innerHTML = time + 's';
    if(time==0){
        clearInterval(timeInterval);
        gameOver();
    }
}
function gameOver(){
    endgameEl.innerHTML = `
    <h1>Time run out</h1>
    <p>Your final score is ${score}</p>
    <button class="reload-btn">Reload</button>
    `;
    endgameEl.style.display='flex';
}
text.addEventListener('input', e => {
    const insertedText=e.target.value;
    
    
    if(insertedText===randomWord){
        updateScore();
        addWordToDOM();
        //clear
        e.target.value='';
        if(difficultySelect==='hard'){
            time +=2;
        }else if(difficultySelect==='medium'){
            time +=3;
        }else{
            time +=5;
        }
        updateTime();
    } 
});
addWordToDOM()
settingsBtn.addEventListener('click',()=> settings.classList.toggle('hide'))

#script 01

const word=document.getElementById('word');
const text=document.getElementById('text');
const scoreEl=document.getElementById('score');
const timeEl=document.getElementById('time');
const endgameEl=document.getElementById('end-game-container');
const settingsBtn=document.getElementById('settings-btn');
const settings=document.getElementById('settings');
const settingsForm=document.getElementById('settings-form');
const difficultySelect=document.getElementById('difficulty');
const words = [
    'apple',
    'banana',
    'tomato',
    'factory',
    'parent',
    'child',
    'strong',
    'ship',
    'shoping',
    'picture',
    'future',
    'stock',
    'pants',
    'boots',
    'hat',
    'angel',
    'backpack'
];
let randomWord;
let score=0;
let time=10;
text.focus();
const timeInterval=setInterval(updateTime,1000);

변수선언의 설명이다.

  • word : 타이핑게임에서 단어들이 나오게되는 곳이다.
  • text : 선택자 input
  • scoreEl : score가 나타나게될 p
  • timeEl : time이 나타나게될 p
  • endgameEl : 시간이 초과되어 게임이 끝나게 될때 div 선택자 변수 end-game-container
  • settingsBtn : 설정 버튼
  • settings : 설정을 누르게 되면 나타나는 난이도 선택창
  • settingsForm : 난이도 선택창의 form
  • difficultySelect : 난이도 select 박스
  • words : 타이핑 게임에서 나타나게될 단어 배열
  • timeInterval : setInterval(updateTime,1000)

#script 02

function getRandomWord(){
    return words[Math.floor(Math.random() * words.length)]
}
function addWordToDOM(){
    randomWord=getRandomWord();
    word.innerHTML=randomWord;
}
//점수
function updateScore(){
    score++;
    scoreEl.innerHTML = score;
}
//시간
function updateTime(){
    time--;
    timeEl.innerHTML = time + 's';
    if(time==0){
        clearInterval(timeInterval);
        gameOver();//아직 안만듬
    }
}
function gameOver(){
    endgameEl.innerHTML = `
    <h1>Time run out</h1>
    <p>Your final score is ${score}</p>
    <button class="reload-btn">Reload</button>
    `;
    endgameEl.style.display='flex';
}

함수 getRandomWord 는 랜덤 소수점 이하는 버린 정수 * 단어배열의 갯수만큼 곱한 랜덤 배열이 나온다.

함수 addWordToDOM 는 비어있는 변수 randomWord에 getRandomWord를 대입하고 word에 innerHTML한다.

함수 updateScore는 점수 이고 score가 1씩 증가하며 아이디score에 1씩 증가하는 score를 대입한다.

함수 updateTime 는 시간 이고 점수와 다르게 1씩 감소하며 time뒤에 +'s'를 표기한다. 조건문을 만들어 1씩 감소하다가 0과 같아지면 clearInterval이 되고 gameOver함수가 실행된다.

함수 gameOver 는 변수 end-game-container에 innerHTML로 

`
<h1>Time run out</h1>
<p>Your final score is ${score}</p>
<button class="reload-btn" onclick="location.reload()">Reload</button>
`

벡틱``을 감싸고 태그를 작성한다. 해당 함수가 실행되면 벡틱 안에 있는 태그들이 생성된다

⬇️⬇️아래 그림 참조⬇️⬇️

#script 03

text.addEventListener('input', e => {
    const insertedText=e.target.value;
    if(insertedText===randomWord){
        updateScore();
        addWordToDOM();
        e.target.value='';
        if(difficultySelect==='hard'){
            time +=2;
        }else if(difficultySelect==='medium'){
            time +=3;
        }else{
            time +=5;
        }
        updateTime();
    } 
});
addWordToDOM()
settingsBtn.addEventListener('click',()=> settings.classList.toggle('hide'))

다음은 내가 쓰게되는 타이핑과 단어가 일치하는지 여부를 확인하고 점수를 증가시키는 코드이다.
text 의 input이벤트를 실행하고 event함수 e를 부여한다. 변수로 insertedText를 만들고 e의 target.value를 만들고 if 조건문을 만든다. insertedText와 randomWord와 일치하면 함수updateScore , addWordToDOM을 실행하고 e.target.value=''; 안에 밸류값은 비우게 만든다. 그안에 if 조건문을 만들어 difficultySelect (난이도)가

  • hard라면 보너스 점수를 맞출 때마다 +2초
  • medium이라면 +3초
  • easy라면 +5초가 되게 작성한다.

마지막 

settingsBtn.addEventListener('click',()=> settings.classList.toggle('hide'))

은 세팅을 클릭하면 토글클래스로 hide가 온 / 오프되게 하여 숨김기능이 되게 한다.

profile
JooSehyun
이전 포스트

Front-end 국비지원 #062일

다음 포스트

Front-end 국비지원 #063일 (2-2)

0개의 댓글