토이 프로젝트29 타자 연습 게임 만들기(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. 타자 연습 게임 만들기(2) 이전에 단어가 화면에 랜덤한 위치에 나오도록 해주었다. 이전에 임시로 단어 배열을 만들어서 몇개의 단어만 넣었었는데, 엑셀 파일로 된 단어 묶음을 구해서 약간의 처리를 하여 javascript 배열로 만들어주었다. 이제 input 박스에 단어를 입력했을 때 입력한 단어와 화면에 있는 단어가 같으면 단어가 있는 div 박스를 지우도록 하는 removeStr이라는 함수를 구현해본다. 일단 querySelectorAll 메서드로 현재 화면에 있는 단어 div 박스들을 받는다. 주의할 것은 querySelectorAll로 얻은 NodeList 객체는 유사배열객체라서 배열 메서드를 사용할 수 없기 때문에 Array.from 메서드로 배열로 만들어준다. removeStr 함수의 인자로 받은 str과 existing.. 2023. 1. 28. 타자 연습 게임 만들기(1) Javacript 활용에 익숙해 지기 위해 바닐라 javascript로 간단하게 뭔가 만들어볼까 생각하다가 타자연습게임을 만들어보기로 했다. 일단 기본적인 구상은 이렇다. 하늘색 구역에 일정 시간마다 랜덤한 위치에 단어가 나오도록 하고, input창에 단어를 입력하면 화면에서 단어가 없어지도록 기능을 넣을 것이다. 랜덤한 위치에 단어 생성 새로운 div 박스를 만들고 만들어진 div박스의 속성으로 position absolute, x축 좌표, y축 좌표, 박스 크기, 단어를 넣는다. x, y 좌표를 랜덤하게 주기 위해 Math.random과 메인 화면의 크기를 사용했다. 여기서 화면을 벗어나면 안되기 때문에 do while문을 활용하여 화면을 벗어나게 되면 자동으로 다시 랜덤한 좌표를 설정하도록 해줬다... 2023. 1. 23. 이전 1 2 3 4 5 다음
