HTML5 Game - Moving in a Straight Line

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Linear Motion

Description

Moving in a Straight Line

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from  www  .  ja  v  a  2s  .  co m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 

  let context = document.getElementById('canvas').getContext('2d'); 
    function  drawScreen () {

    
    context.fillStyle = '#EEEEEE';
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    //Box
    context.strokeStyle = '#000000'; 
    context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);
    
    y += speed;
    
      context.fillStyle = "#000000";
    context.beginPath();
    context.arc(x,y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();
  }
  
  
    theCanvas = document.getElementById('canvas');
  context = theCanvas.getContext('2d');
  
  let speed = 5;
  let y = 10;
  let x = 250;
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();
  
  



</script> 



</body> 
</html>

Related Topic