HTML Canvas Key event handler

Description

HTML Canvas Key event handler

View in separate window 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ship turn with keys</title>

</head>//w  w w.  ja  v  a 2s  .  c o m
<body>
<canvas id="canvas" width="200" height="200">
Your browser does not support the HTML 5 Canvas. 
</canvas>
  <script type="text/javascript">
    var theCanvas = document.getElementById('canvas');
    var context = theCanvas.getContext('2d');
    var rotation = 0;
    var x = 50;
    var y = 50;
    var facingX = 0;
    var facingY = 0;
    var movingX = 0;
    var movingY = 0;
    var width = 20;
    var height = 20;
    var rotationalVelocity = 5; //how many degrees to turn the ship
    var thrustAcceleration = .03;
    var keyPressList = [];
    function drawScreen() {
      if (keyPressList[38] == true) {
        //thrust
        var angleInRadians = rotation * Math.PI / 180;
        facingX = Math.cos(angleInRadians);
        facingY = Math.sin(angleInRadians);

        movingX = movingX + thrustAcceleration * facingX;
        movingY = movingY + thrustAcceleration * facingY;

      }

      if (keyPressList[37] == true) {
        //rotate counter-clockwise
        rotation -= rotationalVelocity;

      }

      if (keyPressList[39] == true) {
        //rotate clockwise
        rotation += rotationalVelocity;
        ;
      }

      x = x + movingX;
      y = y + movingY;

      // draw background and text 
      context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
      context.fillStyle = '#ffffff';
      context.font = '20px sans-serif';
      context.textBaseline = 'top';
      context.fillText("Player Ship - key turn", 0, 180);

      //transformation
      var angleInRadians = rotation * Math.PI / 180;
      context.save(); //save current state in stack 
      context.setTransform(1, 0, 0, 1, 0, 0); // reset to identity

      //translate the canvas origin to the center of the player
      context.translate(x + .5 * width, y + .5 * height);
      context.rotate(angleInRadians);

      //drawShip

      context.strokeStyle = '#ffffff';
      context.beginPath();

      //hard coding in locations
      //facing right
      context.moveTo(-10, -10);
      context.lineTo(10, 0);
      context.moveTo(10, 1);
      context.lineTo(-10, 10);
      context.lineTo(1, 1);
      context.moveTo(1, -1);
      context.lineTo(-10, -10);

      context.stroke();
      context.closePath();

      //restore context
      context.restore(); //pop old state on to screen

    }

    const FRAME_RATE = 40;
    var intervalTime = 1000 / FRAME_RATE;
    gameLoop();

    function gameLoop() {
      drawScreen();
      window.setTimeout(gameLoop, intervalTime);
    }

    document.onkeydown = function(e) {

      e = e ? e : window.event;
      keyPressList[e.keyCode] = true;
    }

    document.onkeyup = function(e) {
      e = e ? e : window.event;
      keyPressList[e.keyCode] = false;
    };
  </script>
</body>
</html>



PreviousNext

Related