движение персонажа на JavaScript

Сделал функцию, которая двигает персонажа в разные стороны, вот пример:
function handleInput() { window.addEventListener("keydown", function(event) { if (event.keyCode == 65) ractive.set({'playerX': ractive.get( 'playerX' ) - 1}); if (event.keyCode == 68) ractive.set({'playerX': ractive.get( 'playerX' ) + 1}); if (event.keyCode == 87) ractive.set({'playerY': ractive.get( 'playerY' ) - 1}); if (event.keyCode == 83) ractive.set({'playerY': ractive.get( 'playerY' ) + 1}); });
не буду вдаваться в подробности, из примера видно, что движение осуществляется при событии keyDown - таким образом, при нажатии и удерживании клавиши, сначала игрок смещается на 1 пиксель, и только потом - через долю секунды - продолжает двигаться дальше, не знаю можно ли решить проблему, но мне эта реализация кажется не совсем верной. Как правильно реализовать передвижение спрайта? Может у кого-то есть ссылки на полезные статьи по этому поводу?

Ответ

Просили написать ответ тут. В общем там много косяков лень все править, писал на скорую руку в основном копи пастом из того примера что в комментах писал, по этому много дублирующих методов и переменных, но я как бы на работе так что извиняйте =)
Это ссыль http://codepen.io/korolariya/pen/WxbPJo
(function($) {
$(document).ready(function() {
function keydown(event) {
if (player.pressed.indexOf(event.which) === -1) { switch (event.which) { case 37: // left player.vec_add(player.velocity, { x: -1, y: 0 }); break;
case 38: // top player.vec_add(player.velocity, { x: 0, y: -1 }); break;
case 39: // right player.vec_add(player.velocity, { x: 1, y: 0 }); break;
case 40: // bottom player.vec_add(player.velocity, { x: 0, y: 1 }); break; }
player.pressed.push(event.which); } }
function keyup(event) { var index; if ((index = player.pressed.indexOf(event.which)) >= 0) { player.pressed.splice(index, 1); switch (event.which) { case 37: // left player.vec_sub(player.velocity, { x: -1, y: 0 }); break;
case 38: // top player.vec_sub(player.velocity, { x: 0, y: -1 }); break;
case 39: // right player.vec_sub(player.velocity, { x: 1, y: 0 }); break;
case 40: // bottom player.vec_sub(player.velocity, { x: 0, y: 1 }); break; } } } window.addEventListener("keydown", keydown, false); window.addEventListener("keyup", keyup, false); var player = { selector: $('#player'), position: { x: 110, y: 110 }, target: { x: 0, y: 0 }, click: { x: 0, y: 0 }, normal: { x: 0, y: 0 }, way: { x: 0, y: 0 }, speed: 3, collapse: 5, pressed: [], velocity: { x: 0, y: 0 }, vec_add: function(a, b) { a.x += b.x; a.y += b.y; }, vec_sub: function(a, b) { a.x -= b.x; a.y -= b.y; }
};
player.move = function(pos) { if (pos != undefined) { this.position.x = pos.x; this.position.y = pos.y; } this.selector.css("left", (this.position.x - 5) + 'px'); this.selector.css("top", (this.position.y - 5) + 'px'); }; player.normalMove = function() { this.countWay(); this.position.x = this.position.x + (this.normal.x * this.speed); this.position.y = this.position.y + (this.normal.y * this.speed); this.move(); }; player.keyMove = function() { if(this.velocity.x || this.velocity.y != 0){ var normal = {x:0,y:0}; normal.x = this.speed * this.velocity.x / Math.sqrt(Math.pow(this.velocity.x, 2) + Math.pow(this.velocity.y, 2)); normal.y = this.speed * this.velocity.y / Math.sqrt(Math.pow(this.velocity.x, 2) + Math.pow(this.velocity.y, 2)); this.vec_add(this.position, normal); this.move(); } }; player.setNormal = function(e) { this.click.x = e.clientX; this.click.y = e.clientY; this.target.x = this.click.x - this.position.x; this.target.y = this.click.y - this.position.y; this.normal.x = this.target.x / Math.sqrt(Math.pow(this.target.x, 2) + Math.pow(this.target.y, 2)); this.normal.y = this.target.y / Math.sqrt(Math.pow(this.target.x, 2) + Math.pow(this.target.y, 2)); this.countWay(); }; player.untilgo = function() { return this.way.x > this.collapse || this.way.y > this.collapse; };
player.countWay = function() { //тут можно вычислять расстояние // Math.sqrt(Math.pow(this.position.x - this.click.x)+Math.pow(this.position.y - this.click.y)); this.way.x = Math.abs(this.position.x - this.click.x); this.way.y = Math.abs(this.position.y - this.click.y); };
player.move(); var timer; var fps = 60;
function step() { setTimeout(function() { requestAnimationFrame(step); if (player.untilgo()) { player.normalMove(); } player.keyMove();
}, 1000 / fps); } step(); $(document).click(function(e) { player.setNormal(e); });
});
}) (jQuery);