토이 프로젝트/타자연습게임8 타자 연습 게임 완성 및 회고 GitHub 링크 : https://github.com/kimsh322/typing-practice 배포 링크 : https://kimsh322.github.io/typing-practice/ 완성된 기능 설명 Github에 ReadMe 작성하는 연습을 하면서 기능에 대하여 쭉 설명해보았다. 복붙할게요.. 입장 페이지 구현 웹페이지를 열면 입장 페이지가 있습니다. username을 입력하고 엔터를 누르면 메인페이지의 display가 flex가 되고, 입장페이지의 display가 none이 되면서 페이지가 이동하는 것처럼 만들어 보았습니다. 화면 설명 메인 화면 왼쪽위에 점수가 나타납니다. 단어를 맞추면 점수가 올라갑니다. 왼쪽 아래 랭킹보기 버튼에 mouseover시 화면 중앙에 랭킹이 보입니다. 오른쪽.. 2023. 2. 22. 타자 연습 게임 만들기(7) 랭킹, 다시하기 기능 추가 Game Over시 유저네임과 획득점수를 로컬 스토리지에 저장하고 다시 렌더링 될 때 랭킹 박스에 추가되도록 기능을 만들었다. 다시하기 버튼도 있으면 좋을 것 같아서 Game Over 텍스트 밑에 다시하기 버튼이 생기도록 만들었다. 랭킹 데이터 등록 먼저 Game Over를 표시하는 조건문에 Game Over시 로컬 스토리지에 유저네임과 점수가 추가되도록 코드를 작성한다. 데이터를 로컬스토리지에 넣을 때 JSON 파일로 만들어서 넣어야 하기 때문에 JSON.stringify 메서드를 사용했다. 데이터의 키는 간단하게 Date.now()로 만들어서 사용했다.(로컬 스토리지 length를 써도 될 것 같다.) 다시하기 버튼 구현 다시하기 버튼은 태그를 새로 만들어서 추가했다. 스타.. 2023. 2. 17. 타자 연습 게임 만들기(6) 입장 페이지 추가 뭔가 기능을 추가해볼까 생각하다가 랭킹 등록할 때 유저이름이 필요할거 같아서 유저이름을 받는 input창을 만들기로 했다. 그런데 만들다보다 따로 둘 곳이 없어서 고민하다가 입장 페이지를 만들어서 거기에다 놓으면 될것 같다는 생각이 들었다. 다른 무언가가 없이 그냥 화면만 바꾸면 되기 때문에 display 속성을 사용하기로했다. 일단 html 코드를 작성했다. 페이지에 처음 들어오면 이 부분만 보이도록 메인화면 부분은 display:none으로 처리해뒀다. css 를 조정해서 적당한 대문페이지를 만들었다. 이벤트 핸들러 등록 input 태그에 이벤트 핸들러를 추가하여 엔터키를 누르면 display속성을 변경하는 코드를 작성했다. 엔터키를 누르면 ⓵ 대문페이지가 사라진다.(display .. 2023. 2. 14. 타자 연습 게임 만들기(5) 단어개수 카운트, Game Over 기능 이번에는 화면에 단어 카운터를 만들고 단어가 10개가 넘어가면 Game Over되는 기능을 만들어봤다. 일단은 html에 단어개수 div를 만들었다. 먼저 단어가 생성되거나 지워질 때 마다 카운팅을 해줘야 한다. 단어 생성 함수(randomStrRender) 마지막에 단어 개수를 카운팅하고 html textcontent를 바꾸어 주는 코드를 추가했다. 코드를 추가하면서 10개에 근접하면 경고를 날려주면 좋을 것 같아서 단어개수가 8개 이상이 되면 빨간색이 되는 코드도 추가했다. * 이렇게 코드를 작성하니 단어가 8개가 넘어갔다가 다시 7개 이하로 내려올 때 카운터가 계속 빨간색으로 남아있는 문제가 발생했다. 그래서 단어를 맞춰서 지우는 코드 뒤쪽에도 위와 같은 코.. 2023. 2. 11. 타자 연습 게임 만들기(4) 이번에는 시작 버튼을 누르면 메인 화면에 3 2 1 Start 카운터가 나온 후 랜덤단어생성이 시작되도록 코드를 작성했다. 일단 시작버튼이 input box를 가리도록 html과 css로 만들어 놓았다. 이제 시작버튼을 누르면 일어날 일들을 함수로 작성할 것인데 필요한것이 ⓵ 시작버튼 누르면 시작버튼이 사라지는 기능 ⓶ 3, 2, 1, start! 글자를 담을 div박스와 div박스를 나타내고 지워줄 함수(setCounter함수) ⓷ 시작 버튼 click시 실행할 Event handler ⓵의 경우 간단하게 시작버튼의 style 프로퍼티의 display 속성을 none으로 바꾸어주면 된다. setCounter 함수는 div 박스를 만드는 함수이다. class style은 css에 미리 작성해놓았다. 이 .. 2023. 2. 6. 타자 연습 게임 만들기(3) 일단 css를 이용하여 좀더 꾸며보았다. css가 어렵지는 않은데 시간은 오래 걸리고 만들어 놓고 보면 뭔가 부족한거같다... 나중에 다시 갈아 엎어야 할 것 같다. 추가할 기능들이 여러개 생각이 나서 일단 버튼으로만 구현을 해 놓았다. 점수 기능 점수 기능 같은 경우는 간단하게 변수하나를 만들어서 단어 제거에 성공했을 때 단어길이에 비례해서 점수가 올라가도록 만들었다. 점수 기능이 있으니까 시작할 때 username을 적고 랭킹으로 나타내면 어떨까 싶어서 랭킹 보기 버튼도 일단 만들어 놓았다. 규칙 보기 기능 타자연습게임 만들면서 git 관리와 GitHub 사용 관련 연습도 같이 하고 있는데, ReadMe를 꾸미면서 처음 보는 사람이 어떻게 하는지 알 수 있게 규칙 같은 것도 있으면 좋을거 같아서 규칙.. 2023. 2. 3. 이전 1 2 다음
