What I have is an element that have been linked with a keydown event.
The answer in similar questions all pointed to clearInterval, which I can't get to work.
First of all, I am using keyup events to check which arrow key is being pressed:
var counter = 0;
var yPosArray = [];
var right = true;
var done = false;
var leftX;
var rightX;
$(document).keydown (function(e)
{
rightX = parseInt(($('#movingObject').css('left')).replace('px','')) + 50;
leftX = parseInt(($('#movingObject').css('left')).replace('px',''));
if(e.which == 39)// right
{
$('#movingObject').find('img').attr('src','assets/images/mario_right.png');
right = true;
$('#xRight').val(rightX);
$('#xLeft').val(leftX);
move();
}
if(e.which == 37) //left
{
$('#movingObject').find('img').attr('src','assets/images/mario_left.png');
right = false;
$('#xRight').val(rightX);
$('#xLeft').val(leftX);
move();
}
if(e.which == 38) //up
{
if($('#movingObject').css('bottom') == '0px' && !false)
{
done = true;
gravity();
done = false;
}
}
});
As seen above, when this condition, e.which == 37
, is met, the method move()
is called. What the move method does, as seen below is to increase the element's left
style attribute. The reason I have a timer, is so that the speed increases as the time goes by, but when the key is released, the event should stop firing. Because of this, I want to call the keyup event as seen in my last code snippet. Explanation will continue there.
var speed = 0;
var maxspeed = 0;
var timer;
function move()
{
var counter = 0;
timer = setInterval(function ()
{
maxspeed++;
$('#movingObject').css('left', moveX + maxspeed + 'px');
++counter;
}, 70);
}
As seen above, the timer variable was declared before the move
function was created, where it was set to the setInterval
method. Because the variable is on the root level, if that makes sense, it can be used in all functions.
As seen below, I have initiated the keyup event to check for the different keys.
$(document).keyup (function(e)
{
var posX = parseInt(($('#movingObject').css('left')).replace('px',''));
if(e.which == 39)// right
{
maxspeed = 0;
clearInterval(timer);
timer = 0;
}
if(e.which == 37) //left
{
maxspeed = 0;
clearInterval(timer);
timer = 0;
}
$('#movingObject').css('left', posX + 'px');
});
Above, I used clearInterval and tried setting timer
equal to 0,after which it continues to increase.
Here's a fiddle with all my script for the stucture of my code.
Any ideas why this is happening?