의미와 레이아웃에 따라 키를 선택하세요
동작이 사용자 키보드 배열에서 생성되는 문자에 따라야 한다면 KeyboardEvent.key를 사용하고, 물리적인 키 위치가 더 중요하다면 KeyboardEvent.code를 사용하세요. 이 차이는 키보드 배열마다 결과가 달라질 수 있습니다. 모두가 WASD를 쓴다고 가정하지 말고, 일관된 키 배치를 정해 안내에 표시하세요.
텍스트 필드나 편집 가능한 컨트롤에 포커스가 있을 때는 키 입력을 가로채지 마세요. 페이지 스크롤 같은 브라우저 기본 동작은 게임 영역이 해당 키를 실제로 처리할 때만 막으세요. 그래야 플레이어가 게임 영역에 들어오기 전에 일반 텍스트 입력을 삼키거나 브라우저 탐색을 방해하지 않습니다.
키를 누른 상태와 해제 관리하기
계속 움직이는 동작은 keydown에서 키의 눌림 상태를 켜고 keyup에서 끄세요. 키를 누르고 있는 동안 브라우저가 keydown을 반복할 수 있으므로 점프 같은 일회성 동작은 반복 입력이 의도된 경우가 아니라면 무시해야 합니다. 게임이 포커스를 잃거나 창이 비활성화되면 눌린 키를 모두 해제하세요. 포커스가 다른 곳으로 이동한 뒤에는 keyup이 게임에 전달되지 않을 수 있습니다.
두 키를 동시에 누르기, 길게 누르기, 빠르게 탭하기, 포커스를 잃었다가 돌아오는 상황을 시험하세요. 한 번만 실행되는 동작은 반복 입력이 의도된 경우가 아니라면 반복 keydown을 무시하세요. MDN은 KeyboardEvent.key, KeyboardEvent.code와 이벤트 유형을 설명합니다. 키 배치에 맞는 속성을 선택하세요.
브라우저 게임용 키보드 컨트롤 관련 질문
게임 조작에는 KeyboardEvent.key와 KeyboardEvent.code 중 무엇을 써야 하나요?
문자 값이나 키보드 배열에 따라 동작해야 한다면 KeyboardEvent.key를 사용하세요. 물리적인 키 위치가 기준이라면 KeyboardEvent.code를 사용하세요. 선택을 명확히 하고 다른 배열에서도 시험하세요.
페이지가 포커스를 잃을 때 눌린 키를 왜 해제해야 하나요?
포커스가 바뀐 뒤 브라우저가 keyup 이벤트를 게임에 보내지 않을 수 있습니다. 입력 상태를 지우면 플레이어가 돌아왔을 때 움직임이 계속되는 문제를 막을 수 있습니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보