Javascript - 키보드 이벤트를 활용한 움직이는 이미지 만들기

오늘은 키보드 이벤트의 key를 알아보려고 합니다. 지금 인터넷에 올라와있는 키보드 이벤트를 설명하는 글들은 예전 사양(keycode)을 기준으로 만들어져 있어, 모처럼 새로운 사양을 기준으로 키보드 이벤트를 설명해보려고 합니다. KeyboardEvent만 가지고 설명하면 재미가 없을 것 같아 키보드 이벤트를 활용해 상, 하, 좌, 우 키보드를 누르면 움직이는 이미지를 만들어보았습니다.

 

 생각했던 그림은 게임처럼 좌우를 누르면 자연스럽게 움직이는 그림이었는데 결과는 생각과는 달라서 슬프네요. 자연스러운 움직임을 만들려면 setInterval()을 사용하면 될 것 같기는 한데 이번에는 키보드 이벤트를 알아보기 위해 작성한 글이니 나중에 setInterval()을 통해 기능을 업데이트해보겠습니다.

KeyboardEvent 정의

 키보드 이벤트는 키보드와 사용자에서 일어난 상호 작용을 정의합니다. 사용자가 키보드를 통해 입력한 물리적인 입력 값을 표현하며, UI Event를 구현한 객체입니다.

 

 이전 사양에서는 사용자 입력을 처리하기 위해서 KeyboareEvent의 keyCode 혹은 charCode를 사용했지만, 현재는 key를 사용하는 것을 권장합니다. 키보드 이벤트의 key 사용을 권장하는 이유는, 이제는 물리적인 하드웨어뿐만 아니라, 가상 키보드까지 처리할 수 있는 방법이 필요하게 됨으로써 새로운 사양서에 keyCode를 대신할 수 있는 key가 추가되었기 때문입니다.

KeyboardEvent를 활용한 움직이는 이미지 만들기

키보드 이벤트의 key를 활용할 예제 코드

 키보드 이벤트의 key는 DOMString으로 정의되며, "ArrowUp", "ArrowDown"과 같이 사람이 보아도 알 수 있는 명시적인 문자열 값입니다. 그리고 MS사의 IE나 Edge 지원을 위해 "Up",  "Down"과 같이 별도의 key 값 지원합니다.

const arrowUpKey = "ArrowUp";
const arrowRightKey = "ArrowRight";
const arrowDownKey = "ArrowDown";
const arrowLeftKey = "ArrowLeft";

function movePosition(event) {
  const { key } = event;
  const toUp = key == arrowUpKey;
  const toRight = key == arrowRightKey;
  const toDown = key == arrowDownKey;
  const toLeft = key == arrowLeftKey;
  
  ...
}

 key를 사용해 상, 하, 좌, 우를 판별하는 코드입니다. 사용자가 입력한 키 값을 판별해 이미지를 어떤 방향으로 이동할지 판별하는 값을 정의합니다. 예제로 만들어 놓은 키보드 입력을 통해 움직이는 이미지 전체 코드는 첨부파일을 통해 제공합니다. 필요하신 분은 첨부파일을 다운로드하여 사용해주시면 됩니다.

키보드 입력시 움직이는 이미지.zip

0.00MB

키보드 입력을 통해 움직이는 이미지

 위의 이미지는 예제 코드를 실행하면 보실 수 있는 화면을 캡처한 내용입니다. 어린 시절 하던 게임의 록맨 이미지와 CSS의 스프라이트(Sprite)를 적용해서 마치 뛰고 있는 것처럼 이미지를 만들었습니다. gif가 아니어도 CSS를 잘 사용하면 움직임을 가진 애니메이션을 만들 수 있습니다.

@keyframes run {
  to {
    background-position: -192px 0;
  }
}

#hero {
  position: absolute;

  width: 64px;
  height: 64px;

  background: url('./hero.png') no-repeat 0 0 / auto 64px;
  animation: run 0.5s infinite steps(3);
}