HTML5 Game - Canvas Event Ship controls

  1. HOME
  2. HTML5 Game
  3. Canvas Event
  4. Controlling the player ship with keyboard

Description

Ship controls

Demo

ResultView the demo in separate window 

<!doctype html>  
    <html>  
     <head>  
      <meta charset="utf-8">  
      <title>Ship Sim</title>  
      <style>canvas{border:1px solid red;}</style>  
      <style>  
      #canvas {  /*from   ww  w.j av  a 2s.c  o  m*/
        background-color: #000000;  
      }  
      </style>  
     </head>  
     <body>  
      <canvas id="canvas" width="400" height="400"></canvas>  
      <script>  
class Ship {  
   constructor() {
      this.x = 0;  
      this.y = 0;  
      this.width = 25;  
      this.height = 20;  
      this.rotation = 0;  
}  
  
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();  

    context.beginPath();  
    context.moveTo(-7.5, -5);  
    context.lineTo(-15, 0);  
    context.lineTo(-7.5, 5);  
    context.stroke();  

  context.restore();  
}

}

      window.onload = function () {  
        let canvas = document.getElementById('canvas'),  
            context = canvas.getContext('2d'),  
            ship = new Ship(),  
            vr = 0,  
            vx = 0,  
            vy = 0,  
        thrust = 0;  
  
    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;  
      let angle = ship.rotation, //in radians  
          ax = Math.cos(angle) * thrust,  
          ay = Math.sin(angle) * thrust;  
      vx += ax;  
      vy += ay;  
      ship.x += vx;  
      ship.y += vy;  
      ship.draw(context);  
    }());  
  };  
  </script>  
 </body>  
</html>

Related Topic