HTML5 Game - Adding easing to object animation, Easing out for landing the ship

Introduction

Easing animation makes an object smoothly enter or leave a location.

Demo

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
let shipImage;//from  w w  w .  ja va2 s .  com
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);
    let dx = ship.endx - ship.x;
    let dy = ship.endy - ship.y;
    
    ship.velocityx = dx * easeValue;
    ship.velocityy = dy * easeValue;
    
    ship.x += ship.velocityx;
    ship.y += ship.velocityy;
    
    
    context.drawImage(shipImage,ship.x,ship.y);
          
  }
  let easeValue = .05;
  let p1 = {x:240,y:-20};
  let p2 = {x:240,y:470};
  
  let ship = {x:p1.x, y:p1.y, endx: p2.x, endy:p2.y, velocityx:0, velocityy:0};
  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 - Adding easing to object animation, Easing out for landing the ship

Introduction

Demo

Related Topic