Menu
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
449
setInterval(function(){ //this code runs every second }, 1000); var time = 1; var interval = setInterval(function() { if (time <= 3) { alert(time); time++; } else { clearInterval(interval); } }, 5000);
Use setInterval() to run a piece of code every x milliseconds. You can wrap the code you want to run every second in a function called runFunction . setTimeout(runFunction,1000) please.
while Loop, and More. Loops are used in JavaScript to perform repeated tasks based on a condition.
JavaScript is primarily asynchronous, so you'll need to rewrite this a little. setTimeout executes a function after a certain amount of time. Therefore, you can do this:
(function move() {
var character=document.getElementById("character");
if(character.style.left<newx) {
character.style.left += pxsecx;
character.style.top += pxsecy;
setTimeout(move, 1000);
}
})();
You can use the function setInterval(function, interval)
// To start the loop
var mainLoopId = setInterval(function(){
// Do your update stuff...
move();
}, 40);
// To stop the loop
clearInterval(mainLoopId);`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
