Как сделать этот объект более быстрым

Question

В моем коде я делаю объект (Человек спрайт) перемещает 1 пиксель при каждом нажатии клавиши со стрелкой. Когда вы удерживаете клавишу со стрелкой, человек очень медленный. Я пытался увеличить количество каждый раз, когда нажата клавиша, но это не достаточно гладко. Может кто-нибудь сказать мне, как я могу заставить его перемещать один пиксель каждый раз, но перемещать один пиксель каждые 100 миллисекунд? Спасибо, я ценю помощь.

function moveLeft() { 
    var newLeft = left - 1; 
    left = newLeft; 
    myElement.style.left = newLeft + 'px'; 

} 
function moveUp() { 
    var newTop = topStyle - 1; 
    topStyle = newTop; 
    myElement.style.top = newTop + 'px'; 

} 
function moveRight() { 
    var newLeft2 = left + 1; 
    left = newLeft2; 
    myElement.style.left = newLeft2 + 'px'; 

} 
function moveDown() { 
    var newTop2 = topStyle + 1; 
    topStyle = newTop2 
    myElement.style.top = newTop2 + 'px'; 
} 

Answer 1

попробуйте, я просто переписал весь код для вас. Теперь я использую интервал каждые 100 миллисекунд

var myElement = document.getElementById("character"); 
 

 
var move_left = false; 
 
var move_up = false; 
 
var move_right = false; 
 
var move_down = false; 
 

 
setInterval(function(){ 
 
\t if (move_left) myElement.style.left = (getIntfromStyle(myElement.style.left) - 1) + 'px'; 
 
\t if (move_up) myElement.style.top = (getIntfromStyle(myElement.style.top) - 1) + 'px'; 
 
\t if (move_right) myElement.style.left = (getIntfromStyle(myElement.style.left) + 1) + 'px'; 
 
\t if (move_down) myElement.style.top = (getIntfromStyle(myElement.style.top) + 1) + 'px'; 
 
}, 100); 
 

 
// with this function, you dont need topStyle & left variables to store previous positions 
 
// you can get current positioin easilysily 
 
function getIntfromStyle(in_style) { 
 
\t return parseInt(in_style.replace('px', '')); 
 
} 
 

 
// i use keyboard to tell code when character should be moved and when must stop 
 
document.onkeydown = function(e) { 
 
    e = e || window.event; 
 
    switch(e.which || e.keyCode) { 
 
\t \t case 37: // left 
 
\t \t \t move_left = true; 
 
\t \t \t break; 
 
     case 38: // up 
 
\t \t \t move_up = true; 
 
\t \t \t break; 
 
     case 39: // right 
 
\t \t \t move_right = true; 
 
\t \t \t break; 
 
     case 40: // down 
 
\t \t \t move_down = true; 
 
\t \t \t break; 
 
     default: return; // exit this handler for other keys 
 
\t } 
 
\t e.preventDefault(); // prevent the default action (scroll/move caret) 
 
} 
 

 
document.onkeyup = function(e) { 
 
    e = e || window.event; 
 
    switch(e.which || e.keyCode) { 
 
\t \t case 37: // left 
 
\t \t \t move_left = false; 
 
\t \t \t break; 
 
     case 38: // up 
 
\t \t \t move_up = false; 
 
\t \t \t break; 
 
     case 39: // right 
 
\t \t \t move_right = false; 
 
\t \t \t break; 
 
     case 40: // down 
 
\t \t \t move_down = false; 
 
\t \t \t break; 
 
\t } 
 
}

<div id="character" style="background:red;width:20px;height:20px;position:fixed;display:block;left:0;top:0"></div>