HTML5 Game - A JavaScript Implementation of a Timer-Based Draw Cycle

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Flying Along Circle

Description

A JavaScript Implementation of a Timer-Based Draw Cycle

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
#target-element { /*  w  w  w.  jav a 2  s .c  o m*/
  width: 100px; 
  height: 100px; 
  background-color: #ccc; 
  position: absolute; 
  top: 100px; 
  left: 0px; 
} 
        </style> 
    </head> 
    <body> 
      <h1>Simple Animation Example</h1> 
      <div id="target-element"></div> 
      <script> 

let targetEl = document.getElementById('target-element'); 
  
let currentPosition = 0; 

function draw() { 
  if (currentPosition > 500) { 
    clearInterval(animInterval); 
  } else { 
    targetEl.style.left = currentPosition++ + 'px'; 
  } 
} 
  
let animInterval = setInterval(draw, 17); 
      </script> 
    </body> 
</html>

Related Topic