부드러운 움직임

Question

jQuery와 d 패드를 사용하여 이전 Mario 게임을 다시 만들려고하고 있는데 오른쪽/왼쪽이 부드럽게 움직이는 동안 점프하고 정한 양이 떨어지는 데 문제가 있습니다. 여기 내 프로젝트는 지금까지입니다 : http://jsfiddle.net/Zeaklous/NpKgc/1/

$(document).ready(function() { 
$(document).keydown(function (key) { 
    switch (parseInt(key.which, 10)) { 
     case 38: 
      $(".mario").animate({ 
       top: "-=50px" 
      }); 
      $(".mario").animate({ 
       top: "+=50px" 
      }); 
      break; 
     default: 
      break; 
     case 83: 
      $(".mario").addClass("crouching"); 
      $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV'); 
      break; 
    } 
    }); 
}); 
setInterval(movePlane, 20); 
var keys = {}; 
$(document).keydown(function (e) { 
    keys[e.keyCode] = true; 
}); 
$(document).keyup(function (e) { 
    delete keys[e.keyCode]; 
}); 
function movePlane() { 
    for (var direction in keys) { 
     if (!keys.hasOwnProperty(direction)) continue; 
     if (direction == 37) { //left 
      $(".mario").animate({ 
       left: "-=5" 
      }, 0); 
      if (!$('.mario').hasClass('flipped')) { 
       $(".mario").toggleClass("flipped"); 
      } 
     } 
     if (direction == 39) { //right 
      $(".mario").animate({ 
       left: "+=5" 
      }, 0); 
      if ($('.mario').hasClass('flipped')) { 
       $(".mario").toggleClass("flipped"); 
      } 
     } 
     if (direction == 40) { //down 
      if (!$(".mario").hasClass(!"crouching")) { 
       $(".mario").toggleClass("crouching"); 
       $('.mario').attr('src', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSstp0TMfI46ImPw3Ynoq8N64Trn9ew70Dzh8NR4u4VLm40nccV'); 
      } 
     } 
    } 
} 

어떤 아이디어 내가이 작업을 수행 할 수있는 방법에 관해서는? 위에서 볼 수 있듯이 점프 동작이 완료되면 옆으로 움직입니다.

Answer 1

문장이 충돌합니다. 그리고 당신은 이미 간격을 사용하고 있기 때문에, 대한 애니메이션을 사용할 필요가 없습니다 왼쪽과 오른쪽 :

http://jsfiddle.net/NpKgc/3/

if (direction == 37) { //left 
     $(".mario").css({ 
      left: "-=2" 
     }); 
     if (!$('.mario').hasClass('flipped')) { 
      $(".mario").toggleClass("flipped"); 
     } 
    } 
    /*if (direction == 38) {//up 
     $(".mario").animate({top: "-=5"}, 0); 
    }*/ 
    if (direction == 39) { //right 
     $(".mario").css({ 
      left: "+=2" 
     }); 
     if ($('.mario').hasClass('flipped')) { 
      $(".mario").toggleClass("flipped"); 
     } 
    }