title: Executing function once in a game loop
body: <p>I have a game loop that refreshes ~20 times per second with the following condition, inside function growPlayerBlockCounterWinner(): <br></p>
  
  <pre><code>if (obstacleArray[i][2] &gt; canvas.height) {player.size += 5;}
  </code></pre>
  
  <p>That means: if black object goes outside the canvas area, player size will increase by 5 pixels. <br></p>
  
  <p>The function normally executes once, but due to putting it in a game loop, it executes each time the game is refreshed, so player is growing continuously. <br></p>
  
  <p>Previously i had it with the sign '=' instead od '>', but that was working well when black blocks were moving pixel by pixel and i want them to move faster. <br></p>
  
  <p>You can inspect the problem and full code on the remote server: <a href="https://stacho163.000webhostapp.com/firstLevel.html" rel="nofollow noreferrer">https://stacho163.000webhostapp.com/firstLevel.html</a></p>
  
  <p>Below I paste only my obstacle functions:</p>
  
  <pre><code>// js game script //
  
  let obstacle = {
      size: 0,
      posX: 0,
      posY: 0,
      speed: 0
  }
  
  let obstacleArray = new Array(100);
  
  function generateObstacle() {
      for (i = 0; i &lt; obstacleArray.length; i++) {
          obstacle.size = Math.round((Math.random() * 100) + 50);
          obstacle.posX = Math.round((Math.random() * (canvas.width - 
  obstacle.size)));
          obstacle.posY = -450 - (i * 100);
          obstacle.speed = 5;
          obstacleArray[i] = [obstacle.size, obstacle.posX, obstacle.posY, 
  obstacle.speed];
      }
  }
  
  function drawObstacle() {
      for (i = 0; i &lt; obstacleArray.length; i++) {
          ctx.fillStyle = "#000";
          ctx.fillRect(obstacleArray[i][1], obstacleArray[i][2], 
  obstacleArray[i][0], obstacleArray[i][0]);
          obstacleArray[i][2] += obstacleArray[i][3];
      }
  }
  
  function growPlayerBlockCounterWinner() {
      for (i = 0; i &lt; obstacleArray.length; i++) {
          // grow player
          if (obstacleArray[i][2] &gt; canvas.height) {
              player.size += 5;         
          }     
      }
  }
  
  generateObstacle();
  
  function game() {
      drawObstacle();
      growPlayerBlockCounterWinner();
      requestAnimationFrame(game);
  }
  
  requestAnimationFrame(game);
  </code></pre>
  
  <p>I am looking for opinions, maybe my logic about that statement is incorrect or i should place that statement in other place. </p>
  
  <p>Thanks for your tips :)</p>