자바스크립트에서 키보드 연속입력 부드럽게

Q. 자바스크립트에서 키보드 연속입력 부드럽게

1.자바스크립트안에서 한 캐릭터를 키보드를 꾹 눌러 움직이게 했을때
부드럽게 움직이지않고 딱 딱딱 딱딱딱딱딱딱딱 흐름으로 움직이는데요
키보드를 꾹눌러서 이동을해도 부드럽게 움직이는방법이 궁금합니다.

2. 캐릭터를 2마리 생성시켜 한 키보드에서 같이 움직인다했을때.
두 캐릭터가 동시에 움직이면 한 캐릭터만 움직이게됩니다 (키보드입력이 씹혀서)
키보드 동시 키 입력할수있는 방법도 궁금합니다.

A1. 키보드로 캐릭터 이동 부드럽게 하기 아래 코드들은 jQuery를 기반으로 합니다.

보통은 아래와 같은 코드로 캐릭터를 움직이도록 합니다.

키 이벤트를 잡아서 각 키가 눌렸을때 캐릭터를 이동 시키는건데요. 키를 누르고 있는 경우 키반복은 사용자 컴퓨터에 따라 다르게 반응할겁니다. 키보드 설정에 따라 달라질 수 있겠죠. 어찌 되었든 원하는대로 스무드~ 하게 움직여주지는 않습니다.

원하는대로 캐릭터가 부드럽게 움직이게 하는 문제는 타이머를 사용해 해결할 수 있는데요 아이디어는 간단합니다.

1. 키를 누르면 해당 키가 눌렸다는 정보를 저장 합니다.
2. 키를 놓으면 해당 키가 눌렸다는 정보를 해제 합니다.
3. 타이머를 이용해 주기적으로 (아주 짧게 아래 예에서는 0.01초) 어떤 키가 눌려 있는지 검사해서 눌려 있는 키에 대한 행동을 지정 합니다.

코드는 아래와 같습니다.

데모를 확인해 보세요. 데모 보기 어때요 ? 원하는대로 움직이나요 ?

A2. 캐릭터 2마리(?)를 동시에 움직이기

위의 방법을 사용하면 2마리도 동시에 움직일 수 있습니다.

추가로, 대각선으로도 움직일 수 있습니다.

이상, 건투를 빕니다.

간세

2015년 다시 블로깅.

“간세하다”는 ‘게으름을 피우다’ 의 뜻을 가진 제주 방언이다. 제주에서는 조금 다른 뉘앙스로 쓰이기도 하지만 대충 ‘해야 될 일이 있는데 밍기적 거리며 미뤄두다’ 정도의 의미로 사용하고 있다.

블로그를 개설하는게 3번째다. 매번 의지를 불태우며 1월에 시작해서 3월쯤에 접은것 같다. 작심3개월 (무난한가?). 이번에는 의지도 그닥… 그냥, 웹개발자로서 블로그 하나쯤은 이라는 기분으로 만들어 둔다.

아래와 같은 내용으로 주로 포스팅 할 예정이긴 하다.

  • 여러 사이트에서 해결되지  않은 질문에 대한 답변
  • 코드 스니펫
  • 웹 개발 툴 관련
  • 아이들과 제주 여기저기 다녔던 것 – 이건 좀 고민스럽다. 아이들 의사와 상관 없이 애들 사진을 공개된 블로그에 올려놔도 될지 …

피드백 관련해서 코멘트 기능을 뺐다. 이런저런 이유로 (피드백이 없을 것 같아서) 그와 같은 결정을 하긴 했는데, 자세한 내용은 나중에 기회가 되면 관련해서 포스팅 하겠다. 해서, 피드백은 이메일로만 받을 예정이다.

잘 될리가 만무하지만, 뭐 어쨌든 화이팅. ^^