document.onkeydown=function(event){
switch(event.key){
case 'ArrowUp':My-=1;M.style.top=(My+'vh');break;
case 'ArrowRight':Mx+=1;M.style.left=(Mx+'vh');break;
case 'ArrowDown':My+=1;M.style.top=(My+'vh');break;
case 'ArrowLeft':Mx-=1;M.style.left=(Mx+'vh');break;};
};
var player = {x:200, y:200, el:document.getElementById('player')};
player.el.style.left = '' + Math.round(player.x) + 'px';
player.el.style.top = '' + Math.round(player.y) + 'px';
var delta = {x:0, y:0};
document.addEventListener('keydown', function(e){
if( e.key == 'ArrowRight') delta.x = 1;
else if(e.key == 'ArrowLeft') delta.x = -1;
else if(e.key == 'ArrowUp') delta.y = -1;
else if(e.key == 'ArrowDown') delta.y = 1;
});
document.addEventListener('keyup', function(e){
if( e.key == 'ArrowRight') delta.x = 0;
else if(e.key == 'ArrowLeft') delta.x = 0;
else if(e.key == 'ArrowUp') delta.y = 0;
else if(e.key == 'ArrowDown') delta.y = 0;
});
var ts = null;
function step(timestamp) {
if(!ts) ts = timestamp;
var passed = timestamp - ts;
//if(passed < 200) return window.requestAnimationFrame(step);
ts = timestamp;
if(delta.x || delta.y) {
player.x += delta.x * passed / 10;
player.y += delta.y * passed / 10;
player.el.style.left = '' + Math.round(player.x) + 'px';
player.el.style.top = '' + Math.round(player.y) + 'px';
};
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
Простой
Средний