Avatar bewegt sich nicht reibungslos

Question

Mit der linken und rechten Pfeiltaste sollte ich in der Lage sein, einen Avatar nach links und rechts zu bewegen. Es läuft jedoch nicht reibungslos, weil es sich wie folgt bewegt: go-stop-go-stop, wenn Sie die Pfeiltaste gedrückt halten.

sehen Geige: https://jsfiddle.net/zk45xgnd/2/

html:

<div id='avtr'></div> 

css:

#avtr { 
    position:absolute; 
    height:50px; 
    width:50px; 
    background-color:#f00; 
} 

jquery:

var allowedToWalk = false, allowedToWalkTime = true; 
var percentage = 1; 
var maxWidth = 1000; 
    $(window).keydown(function(e) { 

     if(e.which == 39) { 
      //move to right 
      allowedToWalk = true; 
      avatarMoveRight(); 

     } 
     if(e.which == 37) { 
      //move to left 
      allowedToWalk = true; 
      avatarMoveLeft(); 

     } 
    }).keyup(function() { 
     allowedToWalk = false; 
    }); 

    function avatarMoveRight() { 
     if(allowedToWalk != false && allowedToWalkTime != false) { 
      var pos = $("#avtr").css('left'); 
      pos = pos.replace('px', ''); 
      pos = pos - 0; 
      if((pos - 40) < (percentage * maxWidth)) { 
       allowedToWalkTime = false; 
       $("#avtr").animate({left: '+=40'}, 150); 
       setTimeout(function() {allowedToWalkTime = true;},150); 
      } 

     } 
    } 

    function avatarMoveLeft() { 
     if(allowedToWalk != false && allowedToWalkTime != false) { 
      var pos = $("#avtr").css('left'); 
      pos = pos.replace('px', ''); 
      pos = pos - 0; 
      if((pos - 4) > 0) { 
       allowedToWalkTime = false; 
       $("#avtr").animate({left: '-=40'}, 150); 
       setTimeout(function() {allowedToWalkTime = true;},150); 
      } 


     } 
    } 

Wie man es machen glatt ru Wenn Sie die Pfeiltaste gedrückt halten?

SOLUTION von @ Adam A https://jsfiddle.net/zk45xgnd/3/

Answer 1

Hier ist ein aktualisierte Code mit niedrigeren Werten und Zeit zwischen den Bewegungen warten, das ihm eine etwas flüssigere Animation gibt. Ich würde jedoch vorschlagen, in der GSAP-Animationsbibliothek von Phaser nach etwas wirklich fortgeschrittenem Zeug zu suchen.

var allowedToWalk = false, allowedToWalkTime = true; 
var percentage = 1; 
var maxWidth = 1000; 
    $(window).keydown(function(e) { 

     if(e.which == 39) { 
      //move to right 
      allowedToWalk = true; 
      avatarMoveRight(); 

     } 
     if(e.which == 37) { 
      //move to left 
      allowedToWalk = true; 
      avatarMoveLeft(); 

     } 
    }).keyup(function() { 
     allowedToWalk = false; 
    }); 

    function avatarMoveRight() { 
     if(allowedToWalk != false && allowedToWalkTime != false) { 
      var pos = $("#avtr").css('left'); 
      pos = pos.replace('px', ''); 
      pos = pos - 0; 
      if((pos - 40) < (percentage * maxWidth)) { 
       allowedToWalkTime = false; 
       $("#avtr").animate({left: '+=5'}, 5); 
       setTimeout(function() {allowedToWalkTime = true;},5); 
      } 

     } 
    } 

    function avatarMoveLeft() { 
     if(allowedToWalk != false && allowedToWalkTime != false) { 
      var pos = $("#avtr").css('left'); 
      pos = pos.replace('px', ''); 
      pos = pos - 0; 
      if((pos - 4) > 0) { 
       allowedToWalkTime = false; 
       $("#avtr").animate({left: '-=5'}, 5); 
       setTimeout(function() {allowedToWalkTime = true;},5); 
      } 


     } 
    }