HTML5 Game - Rewritten Using requestAnimationFrame

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Animation Controller

Description

Rewritten Using requestAnimationFrame

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
#target-element { //from  w w w  .j  a v a2 s  . com
  width: 100px; 
  height: 100px; 
  background-color: #ccc; 
  position: absolute; 
  top: 100px; 
  left: 0px; 
} 
        </style> 
    </head> 
    <body> 
      <h1>Simple requestAnimationFrame Example</h1> 
      <div id="target-element"></div> 
      <script> 
let targetEl = document.getElementById('target-element'); 
let currentPosition = 0; 

function animateElement() { 
  // Stop the animation, otherwise it would run indefinitely. 
  if (currentPosition <= 500) { 
    requestAnimationFrame(animateElement); 
  } 
  // Update the element's position. 
  targetEl.style.left = currentPosition++ + 'px'; 
} 
  
// Initiate the animation timer. 
animateElement(); 
      </script> 
    </body> 
</html>

Related Topic