HTML Canvas Animation Ship Simulation with Friction

Description

HTML Canvas Animation Ship Simulation with Friction

View in separate window 


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ship Sim Friction</title>
    <style>
      #canvas {/*from  w ww . j  a v a  2s.  c om*/
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <aside>Press left and right arrow keys to rotate ship, up to add thrust.</aside>
    <script>
class Ship {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.width = 25;
    this.height = 20;
    this.rotation = 0;
    this.showFlame = false;
  }

  draw(context) {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.rotation);
    
    context.lineWidth = 1;
    context.strokeStyle = "#ffffff";
    context.beginPath();
    context.moveTo(10, 0);
    context.lineTo(-10, 10);
    context.lineTo(-5, 0);
    context.lineTo(-10, -10);
    context.lineTo(10, 0);
    context.stroke();

    if (this.showFlame) {
      context.beginPath();
      context.moveTo(-7.5, -5);
      context.lineTo(-15, 0);
      context.lineTo(-7.5, 5);
      context.stroke();
    }
    context.restore();
  }
}
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ship = new Ship(),
          vr = 0,
          vx = 0,
          vy = 0,
          thrust = 0,
          friction = 0.97;

      ship.x = canvas.width / 2;
      ship.y = canvas.height / 2;

      window.addEventListener('keydown', function (event) {
        switch (event.keyCode) {
        case 37:      //left
          vr = -3;
          break;
        case 39:      //right
          vr = 3;
          break;
        case 38:      //up
          thrust = 0.05;
          ship.showFlame = true;
          break;
        }
      }, false);

      window.addEventListener('keyup', function () {
        vr = 0;
        thrust = 0;
        ship.showFlame = false;
      }, false);

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

        ship.rotation += vr * Math.PI / 180;
        var angle = ship.rotation,
            ax = Math.cos(angle) * thrust,
            ay = Math.sin(angle) * thrust,
            left = 0,
            right = canvas.width,
            top = 0,
            bottom = canvas.height;

        vx += ax;
        vy += ay;
        vx *= friction;
        vy *= friction;
        ship.x += vx;
        ship.y += vy;

        //screen wrapping
        if (ship.x - ship.width / 2 > right) {
          ship.x = left - ship.width / 2;
        } else if (ship.x + ship.width / 2 < left) {
          ship.x = right + ship.width / 2;
        }
        if (ship.y - ship.height / 2 > bottom) {
          ship.y = top - ship.height / 2;
        } else if (ship.y < top - ship.height / 2) {
          ship.y = bottom + ship.height / 2;
        }
        ship.draw(context);
      }());
    };
    </script>
  </body>
</html>



PreviousNext

Related