Moving On Out

use

a	rotate left
d	rotate right
w	move forward
s	move backward
f	fire

The HTML file:

<head>
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

 <link rel="stylesheet" href="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>

<h1>Moving On Out</h1>

<canvas id="canvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script type="text/javascript" src="scene.js"></script>
<script type="text/javascript" src="ui.js"></script>
<script type="text/javascript" src="guy.js"></script>

<script type="text/javascript">
'use strict'

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d'); 
let width = canvas.width;
let height = canvas.height;

let guy = new Guy;
let shots = [];

canvas.tabIndex = 0;
canvas.addEventListener("keydown", MyHandler);
setInterval(DrawScene, 130);
</script>
use 
<table>
<tr><td>a</td><td>rotate left</td></tr>
<tr><td>d</td><td>rotate right</td></tr>
<tr><td>w</td><td>move forward</td></tr>
<tr><td>s</td><td>move backward</td></tr>
<tr><td>f</td><td>fire</td></tr>
</table>
</body>

guy.js

"use strict"

const CF = Math.PI/180;

class Shot {
   constructor(x,y, theta){
      this.theta = theta;
      this.x = x;
      this.y = y;
      this.speed = 5;
   }

   Move() {
       this.x += this.speed * Math.cos(this.theta*CF);
       this.y += this.speed * Math.sin(this.theta*CF);
       if (this.x < -width/2 || this.x > width/2 
                     || this.y < -height/2 || this.y > height/2) {
           // shot has died, remove it
           let pos = shots.indexOf(this);
           shots.splice(pos,1);
       } else {
          // shot is ok, draw it.
          this.Draw();
       }
   }

   Draw() {
      ctx.save();

      ctx.fillStyle = "red";

      ctx.beginPath();
      ctx.translate(this.x, this.y);
      ctx.arc(0,0,2,0,2*Math.PI);
      ctx.fill();
      ctx.restore();
   }
}


class Guy {
    x = 0;
    y = 0;
    stepSize = 1;
    theta = 0;

    constructor() {
    }

    Shoot() {
        let x= this.x + 21*Math.cos((this.theta)*CF);
        let y= this.y + 21*Math.sin((this.theta)*CF);

        shots.push(new Shot(x,y,this.theta));
    }

    Right() {
       this.theta--;
    }

    Left() {
       this.theta++;
    }

    Backward() {
       this.x -= this.stepSize * Math.cos(this.theta*CF);
       this.y -= this.stepSize * Math.sin(this.theta*CF);
    }

    Forward() {
       this.x += this.stepSize * Math.cos(this.theta*CF);
       this.y += this.stepSize * Math.sin(this.theta*CF);
    }

    Redraw() {

        ctx.save();
        ctx.translate(this.x,this.y);
        ctx.rotate(this.theta*CF);
        ctx.rotate(-90*CF);
        
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 3;
        ctx.beginPath();

        ctx.moveTo(-5,-5);
        ctx.lineTo(5,-5);
        ctx.lineTo(5,10);
        ctx.lineTo(10,10);
        ctx.lineTo(0,20);
        ctx.lineTo(-10,10);
        ctx.lineTo(-5,10);
        ctx.lineTo(-5,-5);

        ctx.stroke();
        ctx.restore();
    }
}

scene.js

"use strict"

function SetupScene() {
    ctx.setTransform(1, 0, 0, -1, 0, height);
    ctx.translate(width/2, height/2);
}

function DrawScene() {
    ctx.clearRect(0, 0, width, height);
    ctx.save();

    Axis(ctx,width,height);
    SetupScene();

    Scene(ctx, width, height);

    guy.Redraw();

    // draw any shots that exist.
    let i =0;
    while (i < shots.length) {
        shots[i].Move();
        i++
    }

    ctx.restore();
}

function Axis(ctx, w, h) {

    ctx.strokeStyle = "black";
    ctx.beginPath();

    ctx.moveTo(0, h/2);
    ctx.lineTo(w,h/2);

    ctx.moveTo(w/2,0);
    ctx.lineTo(w/2,h);
    ctx.stroke();
}

function Scene() {

    ctx.save();
    ctx.strokeStyle="red";
    ctx.translate(100,100);
    ctx.strokeRect(0,0,30,30);
    ctx.restore();
    

    ctx.save();
    ctx.translate(-200,150);
    ctx.strokeStyle ="Green";

    ctx.beginPath();

    ctx.moveTo(0,0);
    ctx.lineTo(0,50);
    ctx.lineTo(60,50);
    ctx.lineTo(60,30);
    ctx.lineTo(30,30);
    ctx.lineTo(30,0);
    ctx.lineTo(0,0);
    ctx.stroke();

    ctx.restore();

    ctx.save();
    ctx.translate(-150,-150);
    ctx.scale(4,4);

    ctx.beginPath();
    ctx.strokeStyle="cyan";

    ctx.moveTo(-10,-10);
    ctx.lineTo(0,5);
    ctx.lineTo(10,-10);
    ctx.lineTo(-10,-10);
    ctx.stroke();
    ctx.restore();


    ctx.save();
    ctx.translate(150,-100);
    ctx.beginPath();
    ctx.arc(0,0,50,0,2*Math.PI);
    ctx.stroke();
    ctx.restore();

    return;
   
}

ui.js

"use strict"

function MyHandler(evnt){
    let key = evnt.key;

    switch (key) {
        case 'a':
           guy.Left()
           break;
        case 'd':
           guy.Right()
           break;
        case 'w':
           guy.Forward()
           break;
        case 's':
           guy.Backward()
           break;
        case 'f':
           guy.Shoot();
    }

}