Q. 자바스크립트에서 키보드 연속입력 부드럽게
1.자바스크립트안에서 한 캐릭터를 키보드를 꾹 눌러 움직이게 했을때
부드럽게 움직이지않고 딱 딱딱 딱딱딱딱딱딱딱 흐름으로 움직이는데요
키보드를 꾹눌러서 이동을해도 부드럽게 움직이는방법이 궁금합니다.
2. 캐릭터를 2마리 생성시켜 한 키보드에서 같이 움직인다했을때.
두 캐릭터가 동시에 움직이면 한 캐릭터만 움직이게됩니다 (키보드입력이 씹혀서)
키보드 동시 키 입력할수있는 방법도 궁금합니다.
A1. 키보드로 캐릭터 이동 부드럽게 하기 아래 코드들은 jQuery를 기반으로 합니다.
보통은 아래와 같은 코드로 캐릭터를 움직이도록 합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="stage"><span id="p1"></span></div> <script> $(function(){ var p1x = 0, p1y = 0, speed = 5, lookup, $p1 = $('#p1'); $(document).keydown(function(e){ switch(e.which) { case 38: // up p1y -= speed; break; case 40: // down p1y += speed; break; case 37: // left p1x -= speed; break; case 39: // right p1x += speed; break; } $p1.css({top: p1y, left: p1x}); }); }); </script> |
키 이벤트를 잡아서 각 키가 눌렸을때 캐릭터를 이동 시키는건데요. 키를 누르고 있는 경우 키반복은 사용자 컴퓨터에 따라 다르게 반응할겁니다. 키보드 설정에 따라 달라질 수 있겠죠. 어찌 되었든 원하는대로 스무드~ 하게 움직여주지는 않습니다.
원하는대로 캐릭터가 부드럽게 움직이게 하는 문제는 타이머를 사용해 해결할 수 있는데요 아이디어는 간단합니다.
1. 키를 누르면 해당 키가 눌렸다는 정보를 저장 합니다.
2. 키를 놓으면 해당 키가 눌렸다는 정보를 해제 합니다.
3. 타이머를 이용해 주기적으로 (아주 짧게 아래 예에서는 0.01초) 어떤 키가 눌려 있는지 검사해서 눌려 있는 키에 대한 행동을 지정 합니다.
코드는 아래와 같습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="stage"><span id="p2" class="glyphicon glyphicon-asterisk player"></span></div> <script> $(function(){ var keypress = {}, // 어떤 키가 눌려 있는지 저장 p2x = 0, p2y = 0, speed = 5, $p2 = $('#p2'); setInterval(function(){ // 주기적으로 검사 if(keypress['87']) p2y -= speed; // up - w if(keypress['83']) p2y += speed; // down - s if(keypress['65']) p2x -= speed; // left - a if(keypress['68']) p2x += speed; // right - d $p2.css({top: p2y, left: p2x}); }, 10); // 매 0.01 초마다 실행 $(document).keydown(function(e){ // 어떤 키가 눌렸는지 저장 keypress[e.which.toString()] = true; }); $(document).keyup(function(e){ // 눌렸던 키를 해제 keypress[e.which.toString()] = false; }); }); </script> |
데모를 확인해 보세요. 데모 보기 어때요 ? 원하는대로 움직이나요 ?
A2. 캐릭터 2마리(?)를 동시에 움직이기
위의 방법을 사용하면 2마리도 동시에 움직일 수 있습니다.
추가로, 대각선으로도 움직일 수 있습니다.
이상, 건투를 빕니다.