한글 두벌식과 영문 QWERTY를 함께 연습하는 브라우저 타자 게임. 빌드 도구도 의존성도 없이
index.html 하나만 열면 실행된다.
▶ 바로 해보기: https://ctbot000.github.io/keyboard-game/
index.html 을 브라우저로 바로 열거나, 로컬 서버를 띄운다.
python3 -m http.server 8777그 다음 http://localhost:8777 접속.
이 게임은 브라우저 IME 를 쓰지 않는다. event.code(물리 키 위치)를 읽어 글자로 바꾸고,
한글 조합은 js/hangul.js 의 오토마타가 직접 처리한다.
덕분에 한/영 어느 상태에서도, 심지어 IME 가 설치되어 있지 않아도 자판 위치만 맞으면
그대로 입력된다. 입력창(<input>)을 두지 않아 IME 가 끼어들 여지도 없다.
문장부호와 영문자도 event.key 가 아니라 물리 키에서 뽑기 때문에, 한글 입력 상태에서
event.key 가 'Process' 로 오는 브라우저에서도 문제가 없다.
메뉴 맨 위에서 한글 두벌식 / English QWERTY 를 고른다. 언어를 바꾸면 연습 자료와 화면 자판 표시가 함께 바뀐다. 영문 모드에서는 자모를 감추고 알파벳을 키 한가운데 크게 보여 준다. UI 문구는 한국어 그대로다 — 영문 모드는 치는 내용이 영어라는 뜻이다.
| 모드 | 한글 | 영문 |
|---|---|---|
| 자리 연습 | 기본 자리 / 윗줄 / 아랫줄 / 쌍자음 / 전체 | Home row / Top row / Bottom row / Capitals / All keys |
| 낱말 연습 | 초급(받침 없음) / 중급(받침) / 고급(겹받침) | Easy(3–4자) / Normal(5–6자) / Hard(긴 낱말) |
| 문장 연습 | 속담 / 일반 | Pangrams / General |
| 낱말 떨어뜨리기 | 쉬움 / 보통 / 어려움 (언어 공통) | 〃 |
- 자리 연습 — 낱자를 하나씩 친다. 틀린 키는 아예 입력되지 않아 잘못된 손버릇이 들지 않는다.
- 낱말 연습 — 낱말 20개, 다 치면 자동으로 다음 낱말.
- 문장 연습 — 띄어쓰기와 문장부호까지 그대로 친다. 문장 5개. 영문 팬그램은 모두 알파벳 26자를 담고 있는지 확인했다.
- 낱말 떨어뜨리기 — 떨어지는 낱말을 쳐서 없앤다. 바닥에 닿으면 생명이 줄고, 8개마다 레벨이 올라 빨라진다.
- Backspace — 지우기 (낱말·문장 모드)
- Esc — 그만두기. 떨어뜨리기 모드에서는 먼저 입력 취소
- ✋ 손가락 — 어느 손가락으로 치는 키인지 색으로 표시
- 🔊 — 소리 켜기/끄기
화면 자판이 다음에 눌러야 할 키를 짚어 준다. Shift 가 필요하면 반대쪽 Shift 도 같이 표시한다. 오타가 나면 Backspace 키를 짚어 준다.
속도, 정확도, 걸린 시간을 재고 언어·모드·난이도별 최고 기록을 localStorage 에 남긴다.
속도는 각 언어의 관행을 따른다.
- 한글은 타/분 — 낱자 타건 수.
한글은 ㅎㅏㄴㄱㅡㄹ 로 6타,닭은 ㄷㅏㄹㄱ 으로 4타다. 쌍자음(ㄲ, ㅆ 등)은 Shift 조합이라 1타로 센다. - 영문은 WPM — 5글자를 한 낱말로 치는 통상적인 계산.
index.html
css/style.css
js/hangul.js 자판 매핑(두벌식·QWERTY) + 한글 조합 오토마타
js/data.js 언어별 낱자 / 낱말 / 문장 자료
js/keyboard.js 화면 자판 그리기, 다음 키 안내
js/game.js 화면 전환, 모드별 진행, 통계, 떨어뜨리기 게임
Hangul.compose(글자배열) 은 낱자 배열을 받아 문자열을 돌려주는 순수 함수다.
상태를 들고 있지 않아서 백스페이스는 배열에서 pop() 하고 다시 조합하면 끝이고,
조합 상태가 어긋나 생기는 버그가 없다.
받침이 다음 글자로 넘어가는 경우(닭 + ㅏ → 달가), 겹받침 분해(ㄺ → ㄹ+ㄱ),
겹모음 조합(ㅗ+ㅏ → ㅘ)을 모두 처리한다.
완성형 한글 11,172자 전부에 대해 문자열 → 타건 → 조합 → 원래 문자열 왕복을 확인했다.
영문은 조합이 없으므로 같은 함수를 그대로 지나간다. 덕분에 진행 판정·통계·화면 표시 코드는 두 언어가 하나로 돌아가고, 언어별로 갈리는 곳은 자료·속도 단위·자판 표시뿐이다.