Simple Javascript loop that repeats each second
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.get开发者_Python百科ElementById("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
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);`
You want the JavaScript setTimeout() function. It calls a function every n milliseconds.
I made a coffescript class to handle time loops, maybe it will be helpful for someone.
# Classe TimeLoop, execute a function every x miliseconds
#
# @example How o create a loop
# myLoop = new TimeLoop((-> alert("loop"),1000)
# myLoop.start()
#
class window.TimeLoop
constructor: (@function,@miliseconds) ->
# Start loop.
#
start: -> @loop = setInterval @function, @miliseconds
# Stop loop.
#
stop: -> clearInterval(@loop)
link to gist: https://gist.github.com/germanotm/6ee68f804860e2e77df0
to loop something every second you'll have to use a set interval:
let before = new Date();
setInterval(() => {
console.log(Math.round((new Date() - before) / 1000));
}, 1000);
this code gets the date of the run and is subtracted to the date of every second. (by the way it starts at one not at zero, so you will have to do it manually if you want)
加载中,请稍侯......
精彩评论