타자 연습 게임 완성 및 회고

GitHub 링크 : https://github.com/kimsh322/typing-practice

배포 링크 : https://kimsh322.github.io/typing-practice/

 

완성된 기능 설명

Github에 ReadMe 작성하는 연습을 하면서 기능에 대하여 쭉 설명해보았다. 복붙할게요..

입장 페이지 구현

웹페이지를 열면 입장 페이지가 있습니다.
username을 입력하고 엔터를 누르면 메인페이지의 display가 flex가 되고,
입장페이지의 display가 none이 되면서 페이지가 이동하는 것처럼 만들어 보았습니다.

 

화면 설명

메인 화면 왼쪽위에 점수가 나타납니다. 단어를 맞추면 점수가 올라갑니다.

왼쪽 아래 랭킹보기 버튼에 mouseover시 화면 중앙에 랭킹이 보입니다.
오른쪽 아래 규칙 보기 버튼에 mouseover시 화면 중앙에 게임 규칙이 보입니다.
랭킹보기, 규칙 보기는 css display 속성으로 구현했습니다.

 

시작 버튼을 누르면 3,2,1,start 카운트 후 게임이 시작됩니다.
카운터는 setTimeout으로 구현하였습니다.

 

랜덤 단어 생성, 입력시 단어 제거

5500개 단어 배열에서 랜덤한 단어를 받아서 div박스에 담아 메인 화면에 출력합니다.
setInterval을 사용하여 일정 시간 간격으로 화면에 단어를 생성합니다.
점수가 높아지면 interval 간격이 줄어듭니다.

 

document.getBoundingClientRect 메서드의 width, height 프로퍼티와 Math.ramdom 함수로 랜덤한 위치를

만들고 메인화면에 position absolute로 top, left 속성을 주고 생성합니다.
do ~ while문으로 화면을 벗어나는 div박스가 없도록 처리했습니다.

 

단어 입력시 현재 화면에 존재하는 div박스의 textcontent를 받아 배열로 만들어 검사하여
일치하는 단어가 있는 경우 해당 div박스를 제거하도록 코드를 작성했습니다.

 

Game Over

화면 내 단어 숫자가 input창 옆에 나타납니다. 8개 이상이 되면 빨간색으로 주의를 주고,
단어가 10개가 되면 화면에 있는 단어가 담긴 div 박스를 지우고 Game over text를 띄웁니다.

약간의 시간 뒤에 다시하기 버튼이 생성됩니다. 다시하기 버튼을 누르면 새로고침 되면서 입장페이지로 이동합니다.

Game over시 유저이름과 점수가 로컬스토리지에 저장되고 다시 렌더링될 때 랭킹에 추가됩니다.

 

 

회고

그냥 간단하게 Html, Css, Javascript 연습을 해보려고 한건데 생각보다 오래 잡고있었던 것 같다.

개념을 배우는데는 크게 지장이 없었는데 막상 백지상태에서 시작하려고 하니까 뭐부터 해야할지 잘 몰랐던 것 같다.

스텝 하나하나 밟을때마다 수많은 오류들이 나를 반겨줬지만 그래도 어찌어찌 해결 한 것 같다.

 

좋았던 점

일단 javascript에서 DOM 요소를 어떻게 사용하는지 알게된 것 같다. DOM 요소를 불러와서 class를 동적으로 추가하거나 이벤트를 연결하는것, DOM 요소를 새로 만들어서 DOM에 넣는 것도 많이 한 것 같다.

 

Css는 원래 요소 정렬을 잘 하지 못했는데 이번에 어느정도 감을 잡은 것 같다. flexbox로 정렬하는것, 그리고 position absolute로 요소 정렬하는것도 적당히 익숙해진 것 같다.

display : none으로 페이지 이동하는것처럼 만든거는 되게 괜찮은 생각이었던 것 같다. 😆

 

완성하고 ReadMe 작성하면서 오류났던 것들 적어놓았는데 앞으로도 막히는 문제들이 생기면 어디에든 적어놓는 습관을 들여야겠다는 생각이 들었다. 오답노트를 적어놓고 비슷한 오류를 만날 때 활용하기 좋을 것 같다.

 

아쉬운 점

다 완성하고 다시 보니까 코드가 뒤죽박죽에 반복되는 요소도 많고 완전히 엉망이다... 끝나고 리펙터링 하려다가 계속 오류가 발생해서 일단은 놔뒀다. 처음부터 다시 만드는게 낫겠다는 생각이 들었다.. 나중에 좀 더 지식이 쌓이면 하루만에 뚝딱 만들 수 있을거 같기도 하다.

 

파일들을 기능단위로 쪼개서 만드는게 좋을 것 같아서 임의로 파일을 나누어 놓았는데 별로 의미가 있는 행동은 아니었던 것 같다. 처음 계획과는 다르게 기능이 몇개 추가된 것이 있는데 코드가 여기저기 뿌려져 있어서 한눈에 알아보기 힘든 것 같다.

그리고 모듈화 라는것을 책에서 봤는데 파일을 분리할 때 지역스코프를 가지도록 해서 체계적인 구조를 만들어야 파일을 분리하는것이 의미가 있다는것을 깨달았다. 

 

스타일....은 일단 나는 미적인 감각이 없는것 같아서 예쁘게 꾸미지는 못한 것 같다. 디자인은 일단은 우선순위에서 밀려서 적당히 보기싫지 않을 정도로만 만들어뒀다.

transition은 몇몇 요소에 적용시켜봤는데 애니메이션이나 반응형 디자인 같은것도 해보고 싶었는데 너무 오래 걸릴거 같아서 보류했다. 여기에 말고 다음에 할 프로젝트에서 생각해봐야 할 것 같다.

 

끝.

 

다음 토이 프로젝트는 React, Rest API를 사용하는 웹사이트를 만들어 보고싶다.