title: A loop form a small game (see codepen) made with requestFrameAnimation executes with one user-inputted command delay
body: <p><a href="https://codepen.io/cornel777/pen/GRZWEMq" rel="nofollow noreferrer">https://codepen.io/cornel777/pen/GRZWEMq</a></p>
  <p>Hi, can anyone tell me why this code runs with a delay?</p>
  <p>More specifically, after the first <strong>PROMPT</strong> to input a <strong>direction</strong>, the red circle is not moved (even though the console log writes the correct value - the subtracted/added top/left of the player element).</p>
  <p><em>This first user-inputted direction value (left - for example) is executed after the next one is prompted and submitted.</em></p>
  <p>And so the player will always move with one user-inputted command delay.</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Escape&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;RPG.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1  id=&quot;title&quot;&gt;Escape!!!&lt;/h1&gt;
  
    &lt;div class=&quot;board&quot;&gt;
      &lt;div id=&quot;player&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;exitRound&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;exitTriang&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;exitSquare&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;button onclick=&quot;play()&quot; class=&quot;restart&quot;&gt;START&lt;/button&gt;
  
  &lt;script&gt;
      // var board = document.getElementById(&quot;board&quot;);
      var player = document.getElementById(&quot;player&quot;);
      // var exit1 = document.getElementById(&quot;exitTriang&quot;);
      var exit2 = document.getElementById(&quot;exitRound&quot;);
      // var exit3 = document.getElementById(&quot;exitSquare&quot;);
  // play();
      function play() {
  
          confirm('ready?');
  
          var posT = player.offsetTop;
          var posL = player.offsetLeft;
          var posT1 = exit2.offsetTop;
          var posL1 = exit2.offsetLeft;
          var x = player.offsetParent;
  
  
          console.log(posT, posL, posT1, posL1);
          console.log(&quot;offsetParent is &quot; + x + &quot;because it has position css property, otherwise it is body&quot;);
  
  
  
          while (posT !== posT1 &amp;&amp; posL !== posL1) {
              console.log(posT !== posT1 &amp;&amp; posL !== posL1);
              var direction = prompt(&quot;Enter direction:\n left, right, up, down&quot;);
  
  
              switch (direction) {
                  case 'left':
                      player.style.left = (posL - 50) + 'px';
                      console.log(player.style.left = (posL - 50) + 'px');
                      posL = posL - 50;
                      break;
                  case 'right':
                      player.style.left = (posL + 50) + 'px';
                      break;
                  case 'up':
                      player.style.top = (posT - 50) + 'px';
                      break;
                  case 'down':
                      player.style.top = (posT + 50) + 'px';
                      break;
                  default:
                      alert(&quot;you need to move!&quot;);
                      break;
              }
          }
  
          if (posT === posT1 &amp;&amp; posL === posL1) {
              alert(&quot;YOU WIN!!!&quot;);
          }
      }
  
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>