Character lurches when moving as if snapping into grid?

Question

http://davzy.com/gameA/ is the URL to a test of what I was doing, all my code is there too.

I want the movement of the blue box to be fluid, not so lurchy as if it's snapping into a grid, but I want him to be moving very fast. I'm not sure how to accomplish this. I wrote a gameSpeed variable but when increasing it the movement of the blue box becomes more choppy.

Any help would be appreciated!

Answer 1

You should have a timer which goes off every 10ms or so.

Have a variable for speedX and speedY. When the timer fires, add the speed to the location. When the arrow keys are pressed, increase or decrease the speed. I.e. if Left is pressed then speedX -= 1

You'll notice that if you hold down the arrow key on your current example, it doesn't look jerky. It's just jerky if you press the key once.

Answer 2

As you're already using jQuery, you could take advantage of jQuery's animation support. In controls.js, replace:

$('#objUserCore').css('left',$('#objUserCore').position().left + (gameSpeed * playerSpeed));

with:

$('#objUserCore').animate({ 'left': '+=' + (gameSpeed * playerSpeed) });

jQuery will spin off the appropriate timers to animate your sprite smoothly and efficiently. The '+=' syntax tells jQuery to animate the value starting from its present value, and adding the specified difference. You can find the details in the jQuery documentation.

To get the animation effect going in all four directions, replace all four if statements in controls.js:

if (event.keyCode == '39')
    $('#objUserCore').animate({ 'left': '+=' + (gameSpeed * playerSpeed) });
if (event.keyCode == '37')
    $('#objUserCore').animate({ 'left': '-=' + (gameSpeed * playerSpeed) });
if (event.keyCode == '38')
    $('#objUserCore').animate({ 'top': '-=' + (gameSpeed * playerSpeed) });
if (event.keyCode == '40')
    $('#objUserCore').animate({ 'top': '+=' + (gameSpeed * playerSpeed) });