HTML5 Game - Easing In for Taking Off

Introduction

When an animation eases in, it starts slowly and then gets faster and faster.

Demo

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
let shipImage;/*from  w  w w.  ja va 2 s  . c  o  m*/
function eventWindowLoaded() {
  shipImage = new Image();
  shipImage.src = "http://java2s.com/style/demo/jet.png"
  shipImage.onload = eventAssetsLoaded;
}

function eventAssetsLoaded() {

  canvasApp();
}

function canvasApp() {
  function  drawScreen () {
    context.fillStyle = '#000000';
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    //Box
    context.strokeStyle = '#ffffff'; 
    context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);
    
    
    ship.velocityx = ship.velocityx + ( ship.velocityx*easeValue);
    ship.velocityy = ship.velocityy + ( ship.velocityy*easeValue);
    
    ship.x += ship.velocityx;
    ship.y += ship.velocityy;
    
    context.drawImage(shipImage,ship.x,ship.y);
  }
  
  let easeValue = .05;
  let p1 = {x:240,y:470};
  let tempX;
  let tempY;
  let tempSpeed = .5;
  let tempAngle = 270 ;
  let tempRadians = tempAngle * Math.PI/ 180;
  let tempvelocityx = Math.cos(tempRadians) * tempSpeed;
  let tempvelocityy  = Math.sin(tempRadians) * tempSpeed;
  
  let ship = {x:p1.x, y:p1.y, velocityx:tempvelocityx, velocityy:tempvelocityy};
  let points = new Array();
  
  
  theCanvas = document.getElementById('canvasOne');
  context = theCanvas.getContext('2d');
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();
  
  
}


</script>

</head>
<body> 
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>

</body>
</html>

HTML5 Game - Easing In for Taking Off

Introduction

Demo

Related Topics