HTML5 Game - The player ship state changes for thrust animation

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

Description

The player ship state changes for thrust animation

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>// w ww.ja  v a 2 s.c om
<script type="text/javascript">
    let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
  let shipState=0;
  function drawScreen() {
    shipState++;
    if (shipState >1) {
      shipState=0;
    }
    context.fillStyle = 'white';
    context.fillRect(0, 0, 200, 200);
    //drawShip
    context.strokeStyle = 'black';
    context.beginPath();
    context.moveTo(10,0); 
    context.lineTo(19,19);
    context.lineTo(10,9);
    context.moveTo(9,9); 
    context.lineTo(0,19);
    context.lineTo(9,0);
    
    if (shipState==1) {
      //draw thrust
      context.moveTo(8,13); 
      context.lineTo(11,13);
      context.moveTo(9,14);
      context.lineTo(9,18);
      context.moveTo(10,14);
      context.lineTo(10,18);
    }
    
    context.stroke();
    context.closePath();
    

  }
  
  function gameLoop() {
    drawScreen();
    window.setTimeout(gameLoop, intervalTime);
  }
 
  const FRAME_RATE=10;
  let intervalTime=1000/FRAME_RATE;
  gameLoop();
  
</script> 

</div>
</body>
</html>

Related Topic