I'm writing a code to move a character in a browser game. I managed to get the pixels it must move per second both horizontally and vertically.
pxsecx is the number of pixels it must move horizontally per second
pxsecy is the same but vertically
Basically it should += them to the current horizontal and vertical position.
I need the loop to keep repeating itself every second until the element position meets the new position (newx).
This is as far as I have gone:
<body onmousedown=showCoords(event)>
<script type=text/javascript>
function showCoords(evt){
oldx = parseInt(document.getElementById(character).style.left);
oldy = parseInt(document.getElementById(character).style.top);
width = parseInt(document.getElementById(character).style.width);
height = parseInt(document.getElementById(character).style.height);
newx = evt.pageX - width/2;
newy = evt.pageY - height/2;
disx = newx - oldx;
disy = newy - oldy;
diag = parseInt(Math.sqrt(disx*disx + disy*disy));
speed = 50;
secs = diag/speed;
pxsecx = disx/secs;
pxsecy = disy/secs;
while(document.getElementById(character).style.left<newx)
{
document.getElementById(character).style.left += pxsecx;
document.getElementById(character).style.top += pxsecy;
}
}
</script>
Everything works until the while where I have no idea how to do make it work every second. I'm testing it here: http://chusmix.com/game/movechar.php
How do I make it repeat that once a second so it works?
thanks