I've been staring at my code for so long but i don't seem to understand what is happening.
Whenever the game ends, I do a cancelAnimationFrame to stop the game. Then I boot up the menu again.
Now the problem is that when I call requestAnimationFrame again, it seems like the code is calling it two times (the game runs doubly fast).
The following is my code:
This is the startup:
var areaJogo = {
beginGame: function(type) {
//...
this.myReq = requestAnimationFrame(updateArea);
//...
}
}
And this is the main function(for animation):
function updateArea(){
areaJogo.myReq=requestAnimationFrame(updateArea);
//....
if(/*conditionLoseGame*/) {
stop();
}
}
function stop() {
cancelAnimationFrame(areaJogo.myReq);
areaJogo.myReq=undefined;
}
Mind you these are the only times requestAnimationFrame and cancelAnimationFrame are used in the code. Thanks!
I have found the problem.
The reason why it was being called is because I had done a button in JavaScript to start the game.
To do this, I had to do a addeventlistener whenever I booted the menu. What I did wrong was forgetting to do cleareventlistener upon clicking the button.
Related
I hope you are doing well.
I'm working on a minigame based on JS and want to prevent the user from shooting infinite bullets, so I created this condition. Which only works for the first time and then breaks for the next clicks
also to mention this whole section is inside the loop so shooting works well with or without setInterval
let shootController = true
canvas.addEventListener("click", () => {
if (shootController) {
//shooting code goes here
shootController = false;
}
});
if (shootController === false) {
setInterval(() => {
shootController = true;
}, 1000);
}
Thanks for your replies beforehand
Somehow, I defined the 'setInterval' before and outside the loop and then called that function below and outside. This one WORKS
But from curiosity, I didn't define it at the top as a function and only used it below the loop. This one didn't work.
The problem is solved, but I don't know why.
I'm doing some interactive animation using HTML, CSS, and Javascript+Jquery.
I have several animations that I want to chain. So when first animation is done, the next starts, and so on.
The first function is triggered by a click:
function stepOne() {
console.log(" stepOne ran");
$('#myObject').attr('class', 'animation1');
$(".animation1").on("animationend", stepTwo);
}
function stepTwo() {
console.log("stepTwo ran");
$("#myObject").removeClass("animation1");
$("#myObject").addClass("animation2");
$("#scene").addClass("zoomAnimation");
$("#scene").on("animationend", stepThree);
function stepThree() {
// insert some exciting code here
console.log("crashes");
}
I can see in the console log, that it runs stepTwo and stepThree at the same time, and then Stepthree again when the animation actually ends. How do I prevent it from running stepThree together with stepTwo? This is only an issue if I run it in sequence. If i jump directly to stepTwo there's not issue.
After many hours, I found a work around.
Adding a tiny delay on the animationend listener at the end of the function seems to be the solution.
So it becomes
function stepTwo() {
console.log("stepTwo ran");
$("#myObject").removeClass("animation1");
$("#myObject").addClass("animation2");
$("#scene").addClass("zoomAnimation");
setTimeout(function () {
$(".zoomAnimation").on("animationend", stepThree);
}, 20);
}
function stepThree() {
$(".zoomAnimation").off("animationend", stepThree);
}
and so on. Might not be the best solution, and may cost me problems down the road, but it seems to be correct.
As part of my studies I build the game "Space Invaders" in javascript by using canvas.
Before the beginning of the game, the main page is loaded and waiting to click on new game button. When i clicked on this button, the game begins to run properly and there are no problems at all. (the game runs through a recursive function that call to functions update() and render() -see code-...)
The problem comes when during the run of the game i push this button again. What happens is that the game run faster and when i clicked on it several times the game run faster and faster...
i dont now if its because the cycle of interval was not clear itself or maybe its because run() function call itself again and cause to loop into the recursive functions.
thanks a lot.
//----------------------------------------//
//this function called when i pressed in newGame button
function startGame()
{
clearInterval(timeInterval);
run();
// run function - run the recursive function below
timeInterval = setInterval(randEnemyShots,frequencyShot);
// randEnemyShots function - choose one enemey from all enemies to shot
// frequencyShot variable - this is the frequqncy of shots
}
//----------------------------------------//
function run()
{
var loop=function(){
if(gameRuning)
{
update();
// update function - all the logic of game
render();
// render function - drawing the game
window.requestAnimationFrame(loop,canvas);
}
};
window.requestAnimationFrame(loop,canvas);
}
//-----------------------------------------------------------------------------------------------------------------------//
The problem is that when you click the 'Start' button you are calling the run() function again which is effectively doubling the speed of the game.
The run() function should be called only once in the game initialisation so that the game loop can run indefinitely.
function gameInit(){
//Initialisation code here
run(); //Start the game loop only once
}
function startGame() {
//Handle 'Start' button click
clearInterval(timeInterval);
timeInterval = setInterval(randEnemyShots,frequencyShot);
}
You can then use the gameRuning value to 'pause' the loop if you set to false.
It's better you used setTimeout (with checking) rather than setInterval. Since the behaviour and cost of setInterval usually weird.
My clearInterval function is not working from a toggle button that I have created.
$('button.shuffle').click(function() {
if(isShuffling) {
clearInterval(discoLights);
isShuffling = false;
console.log('stop shuffling')
} else {
disco = setInterval(discoLights ,3000);
isShuffling = true;
console.log('start shuffling')
}
});
I am aware that this kind of question has been asked numerous times. I did a lot of research on it within SO and I could not find solution to my problem.
Here is the JSFiddle of the code I have been working on: https://jsfiddle.net/coolwebs/zLgsdno7/7/
I have tried reordering the code on several occasions, but nothing is working. I have used setInterval and clearInterval before on page load (not set with buttons) and I have not had an issue before...
Use
clearInterval(disco);
instead of
clearInterval(discoLights);
As clearInterval takes the id which is returned by setInterval
Issue is in clearInterval().
It should be clearInterval(disco) instead of
clearInterval(dicoLights).
See clearInterval
Belive me i ve seen many solutions i still dont know why this doesnt work.
timerId = 0;
$("#dumpStartId").click(function(){
var proId = $("#curProfileId").val();
timerId = setInterval(function(){
showact();
showactdat();
},1000);
});
$("#dumpStopId").click(function(){
clearInterval(timerId);
document.getElementById('curSeqId').value = "";
if(timerId)
{
clearInterval(timerId);
}
});
dumpstartid and dumpstopid are the ids of the two buttons. Even after clicking stop the intervals are executing continuosly. Im not sure whats wrong with this code. No errors in the console too.
Update: I can observer that sometimes after insanely pressing the button for around 5 or 6 times it comes to a complete halt. Cant this thing stop instantaneously (or is too much to ask??)
setInterval iterates every "Millisecond-Value" you've given till it reaches the clearInterval. Try using onmousedown instead of onclick.
It was because the function the setInterval is calling was problematic which polls a rest service at a varied interval from the setIntervals interval causing it to conflict. I ve corrected it and that fixed it.