2d shooter gun shoot 1

by tmanrocks999

HTML

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic Shooter</title>
    <style>
        canvas {
            border: 4px solid #d3d3d3;
            background-color: #f1f1f1;
        }
    </style>
</head>

<body onload="startGame()">
    <p>use the arrow keys on you keyboard to move the red square.</p>
    <span id="myEnemy1Hp">10</span> <br>
    <span id="playerExp">0</span> / <span id="playerMaxExp">10</span> 🐺

    <script>
        var myGamePiece;
        var endGoalPiece;
        var myEnemy1;
        var bullets = [];
        var myEnemy1Hp = 10;
        var myEnemy1Armor = 0;
        var damage = 1;
        var playerExp = 0;
				var playerMaxExp = 10;
        
        function startGame() {
            myGameArea.start();
            myGamePiece = new component(30, 30, "red", 0, 240);
            endGoalPiece = new component(30, 30, "black", 450, 240);
            myEnemy1 = new component(30, 30, "green", 200, 240);
        }

        var myGameArea = {
            canvas: document.createElement("canvas"),
            start: function() {
                this.canvas.width = 480;
                this.canvas.height = 270;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                this.interval = setInterval(updateGameArea, 20);
                window.addEventListener('keydown', function(e) {
                    myGameArea.key = e.keyCode;
                })
                window.addEventListener('keyup', function(e) {
                    myGameArea.key = false;
                })
            },
            clear: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }
        }

        function component(width, height, color, x, y) {
            this.gamearea = myGameArea;
            this.width = width;
           ...