setInterval implementation problems

Question

I am trying to implement a function that changes the value of a variable (paddle speed in a simple pong game) but the timer is running very fast and the paddle speed doesn't seem to be changing correctly.

I've created a function that executes each time the start game button is pressed, which I'm using as a timer:

function setTimer () {
    setInterval(function () {
       trialWindow += 1;
    }, 1000);
  console.log(trialWindow);
}

This timer is executed by pressing the start button

startBtn.addEventListener('click', setTimer);

I have another function set up to increment canvas.paddleOneVelocityY whenever the trialWindow variable is a multiple of 15

function userSpeed () {
  if (trialWindow % 15 === 0)
  {canvas.paddleOneVelocityY = getRandomNumber(5, 20)};
  console.log(canvas.paddleOneVelocityY);
}

these functions are called in the startGame function:

function startGame() {
  gameInProgress = true;
  gameplay.className = '';
  startMenu.className = '';
  gameOverMenu.className = '';
  pauseMenu.className = '';
  gamePaused = false;
  gameInterval = window.setInterval(function() {
    moveEverything();
    drawEverything();
    setTimer();
    userSpeed();
  }, 1000/fps);
}

I've tried moving setTimer and userSpeed to different positions in the order of functions called in gameInterval and the timer seems to stop completely.

any help would be very much appreciated!

user_157247 · Answer

setTimer creates a new interval timer (a timer that repeats) every time it's called. You're calling it from inside the callback of another interval timer:

gameInterval = window.setInterval(function() { // <== This function repeats
  moveEverything();
  drawEverything();
  setTimer();                                  // <== This creates a repeating
  userSpeed();                                 //     timer every time it's called
}, 1000/fps);

Instead, just call setTimer once, when you want to start the timer it starts.

Regarding your outer timer running at 1000/fps milliseconds, you might want to look at requestAnimationFrame.

user_13970484 · Answer

Here is what you want:

function setTimer() {
    setInterval(function () {
        trialWindow += 1;
        userSpeed();
        console.log(trialWindow);
    }, 1000);
}

function userSpeed() {
    if (trialWindow % 15 === 0) {
        canvas.paddleOneVelocityY = getRandomNumber(5, 20)
    };
    console.log(canvas.paddleOneVelocityY);
}

function startGame() {
    gameInProgress = true;
    gameplay.className = '';
    startMenu.className = '';
    gameOverMenu.className = '';
    pauseMenu.className = '';
    gamePaused = false;
    setTimer();
    gameInterval = window.setInterval(function () {
        moveEverything();
        drawEverything();
    }, 1000 / fps);
}




    
    
    Document

setInterval implementation problems

2 Answers