타이핑 게임 웹사이트 만들기

1. 사용언어

HTML, CSS, JavaScript

HTML : 웹사이트 형식 구성 (뼈대 담당)
CSS : to-do list 디자인 담당 (미모 담당)
JavaScript : 작동 기능 담당 (내용물 담당)

 

2. 웹사이트 기능요약

1) 주요기능
ㆍBootstrap v5.1.3 활용.
ㆍ난이도 버튼을 클릭하면 타이핑 할 단어가 생성된다.
ㆍ단어생성과 동시에 5초 카운트 다운이 시작된다.
ㆍ제한 시간 내에 인풋박스에 타이핑 할 단어를 정확히 입력하면 다음단어가 생성된다.

2) 세부기능
ㆍ오픈api를 활용해 영어 단어가 무작위로 생성된다.ㆍ난이도에 따라 생성되는 단어의 길이가 다르다.
ㆍ대문자, 소문자 구분 없이 철자가 맞으면 정답으로 인정하고 점수 부여한다.
ㆍ단어 생성 횟수와 점수 최고점 제한이 없다.
 ㆍ게임 종료 후에도 게임 난이도 유지.

3) 자율학습 추가기능
ㆍ초급, 중급, 고급의 게임 난이도를 추가
ㆍ난이도에 따라 단어 길이 변화: 초급은 6자 미만, 중급은 10자 미만, 고급은 20자 미만 단어 출제
ㆍ난이도 선택 안내 문구 추가
ㆍ게임 난이도 버튼 클릭 후 데이터 송신 중에 “게임 로딩 중...”상태 문구 추가
ㆍ데이터 로딩 후에는 “OO단계 타자왕 도전!” 상태 문구로 변화
ㆍ게임 중에는 “타자왕 도전 중!” 문구로 변화
ㆍheader 문구에 strong을 적용하고 “start”단어에 em태그를 추가.
ㆍ난이도 버튼과 방법안내 card에 Breakpoint를 부여해 기본상태일 때와 xl상태일 때 크기를 조정.
ㆍ방법안내 card와 남은시간, 점수 문구 앞에 Bootstrap의 info icon을 cdn방식으로 추가 및 색 부여.
ㆍfooter 추가 및 중앙정렬
ㆍ제한 시간 초과 시 “게임이 종료되었습니다.” alert 생성
ㆍalert 종료하면 “다시 도전하려면 등급을 선택해주세요!” 문구 출력

 

3. 코드 및 시현 이미지

타이핑 게임 웹사이트 시현모습

 

<좌> 수정전 , <우> 완성 모습

1) 초급, 중급, 고급의 게임 난이도 추가 및 난이도 버튼 클릭 후 데이터 송신 중, 송신 후 상태 문구 추가
대상파일: index.html 와 main.js
강의내용: html에서 기능 없이 버튼만 추가하고 JavaScript는 작업하지 않음.
자율학습: 단어 길이에 차이를 줘서 게임 난이도를 추가하고, html button과 JavaScript를 연결해 실제 난이도 부여.

<main.js 추가 코드>

btnFirst.addEventListener("click", btnFirstF)
btnMiddle.addEventListener("click", btnMiddleM)
btnLast.addEventListener("click", btnLastL)

async function btnFirstF(){
        messageDispay.innerText = "게임 로딩 중..."
        const res = await fetch(API_URL);
        const data = await res.json();
        words = data.filter(item => item.length < 7)
        isReady = true;
        messageDispay.innerText = "초급단계 타자왕 도전!"
        wordInput.addEventListener("input", checkWords);
}


async function btnMiddleM(){
    messageDispay.innerText = "게임 로딩 중..."
    const res = await fetch(API_URL);
    const data = await res.json();
    words = data.filter(item => item.length < 10)
    isReady = true;
    messageDispay.innerText = "중급단계 타자왕 도전!"
    wordInput.addEventListener("input", checkWords)
}


async function btnLastL(){
    messageDispay.innerText = "게임 로딩 중..."
    const res = await fetch(API_URL);
    const data = await res.json();
    words = data.filter(item => item.length < 20)
    isReady = true;
    messageDispay.innerText = "고급단계 타자왕 도전!"
    wordInput.addEventListener("input", checkWords)
}

 

2) 난이도 버튼과 방법안내 card에 Breakpoint를 부여해 기본상태일 때와 xl상태일 때 크기를 조정
대상파일: index.html
강의내용: 난이도 버튼, 방법안내 card Breakpoint 설명.
자율학습: 난이도 버튼, 방법안내 card의 Breakpoint와 위치, margin을 재구성한 웹페이지에 맞게 조정.

<추가 코드>

        <div class="row mt-3 mx-auto">
            <div class="col">
                <button class="col-3 col-xl-2 btn btn-primary fs-5" id="btn-first">초급</button>
                <button class="col-3 col-xl-2 btn btn-success fs-5" id="btn-middle">중급</button>
                <button class="col-3 col-xl-2 btn btn-danger fs-5"id="btn-final">고급</button>
            </div>
            <div class="row mt-5 mx-auto">
                <div class="col">
                    <div class="card card-body text-white bg-secondary  bg-opacity-60 col-12 col-xl-6 mx-auto">
                        <h5><i class="bi bi-info-circle-fill text-warning"></i> 방법안내 </h5>
                        <p class="text-wrap">난이도를 선택하고 단어를 시간 안에 타이핑하세요.</br>난이도 선택 후 start를 입력하면 바로 시작합니다.</br>시간 종료 후에도 난이도가 유지됩니다.</p>
                        <p class="text-wrap"><i class="bi bi-suit-club text-warning"></i> 초급: 6자 미만 단어 </br> <i
                                class="bi bi-suit-heart text-warning"></i> 중급: 10자 미만 단어 </br><i
                                class="bi bi-star text-warning"></i> 고급: 20자 미만 단어</p>
                    </div>
                </div>
            </div>
        </div>

 

3) 제한 시간 초과 시 “게임이 종료되었습니다.” alert 생성
대상파일: main.js
강의내용: 관련내용 없음.
자율학습: “게임이 종료되었습니다.” alert 생성

<추가 코드>

function countDown() {
    time = time - 1;
    timeDisplay.innerText = time;
    if (time === 0) {
        gameover()
        alert('게임이 종료되었습니다.');
    }
}

4) alert 종료하면 “다시 도전하려면 등급을 선택해주세요!” 문구 출력
대상파일: main.js
강의내용: 관련내용 없음.
자율학습: alert 종료하면 messageDispay.innerText 내용 변화

<추가 코드>

function gameover() {
    ongoing = false;
    clearInterval(timeInterval)
    timeInterval = null;
    messageDispay.innerText = "다시 도전하려면 등급을 선택해주세요!"
    score = 0;
    currentWord.innerText = "start"
}

5) header 문구에 strong을 적용하고 “start”단어에 em태그를 입혔다.
대상파일: index.html
강의내용: 별도 설정 없음.
자율학습: start 단어를 강조하기 위해 em태그 적용

<추가 코드>

<h2 class="display-2 mb-5" id="current-word"><em>시작</em></h2>

 

6) Bootstrap의 info icon을 cdn방식으로 추가 및 색 부여.
대상파일: index.html
강의내용: 안내문구 card와 남은시간 문구 앞에 별도 설정 없음. 
자율학습: 안내문구 card 강조하기 위해 Bootstrap icon을 cdn방식으로 추가 후 warning색 부여. 

<추가 코드>

<h3><i class="bi bi-alarm-fill fs-2 text-secondary"></i> 남은 시간: <span id="time">0</span></h3>
<h5><i class="bi bi-info-circle-fill text-warning"></i> 방법안내 </h5>

7) footer 추가 및 중앙정렬
대상파일: index.html
강의내용: 관련내용 없음.
자율학습: 스크롤과 관계없이 하단에 footer 고정

<추가코드>

</body>
<footer class="out-footer mt-5 mb-2 mx-auto text-white opacity-50">Copyright ⓒ2022 Iam_im2 All rights reserved.
</footer>

 

 

4. 기타

1) 전반적인 내용 조정
강의를 들으며 배우는 것도 많지만, 강의 결과물과의 차별화를 위해서 늘 색상과 text 내용은 내가 원하는 것들로 수정하려 한다. 특히, 난이도 버튼을 실제로 활용함에따라 js파일이 강의내용과 완전히 달라졌다. inti()에 공통부분을 뽑아내면 코드가 훨씬 깔끔할 것 같아서 inti()함수로 초기 환경을 세팅하려 했으나 난이도에 따라 단어 길이가 다르고, 안내문구도 달라서 딱히 공통으로 세팅할만한 게 없어서 초기안내문구인 “난이도를 선택하세요.”만 세팅했다. 공통부분을 뽑아서 inti()에 한번에 담으면 코드가 훨씬 깔끔할 것 같지만, 그러려면 아직 더 공부가 필요하다.

2) Bootstrap을 처음 접했다. 재미있는 기능도 많고, 무엇보다 html과 css를 훨씬 편하게 사용할 수 있어서 좋다. 부트스트랩으로 다양한 기능을 구현할 수 있어서 앞으로 더 많이 공부해야한다.

3) 원래는 한글 문장 타이핑 게임을 만들고 싶었으나, 한글 단어 랜덤 생성 api는 찾지 못해 부득이하게 영단어 타이핑 게임을 만들었다. 나중에 실력을 더 쌓으면 아름다운 한글 문장 타이핑 게임 사이트도 만들어 보고 싶다.

4) To-Do List 만들때보다 더 많이 고민하고 생각하고 만들었는데, 막상 움짤을 만들다 보니 시연 영상이 너무 짧아서 당황했다. 그래도 강의에 없는 내용을 열심히 머리싸매고 고민해서 난이도 버튼을 실제로 활용하고 버튼 배치도 바꾸고 이것저것 만져서 사이트를 만들어내니 기분이 좋다. 

참고자료

SeSAC 바닐라 Javascript + Vue.js 과정
구글링