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',240);
  endGoalPiece = new component(30,'black',450,240);
  myEnemy1 = new component(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,this.canvas.width,this.canvas.height);
  }
};

function component(width,height,color,x,y) {
  this.gamearea = myGameArea;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  //this.gravity = 0.05;
  //this.gravitySpeed = 0;
  this.x = x;
  this.y = y;
  this.color = color;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x,this.y,this.width,this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY; //+ this.gravitySpeed;
    this.hitBottom();
    this.hitTop();
    this.hitRight();
    this.hitLeft();
    this.hitObject();
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }
  this.hitTop = function() {
    var rockTop = 0;
    if (this.y < rockTop) {
      this.y = rockTop;
    }
  }

  this.hitRight = function() {
    var rockRight = myGameArea.canvas.width - this.width;
    if (this.x > rockRight) {
      this.x = rockRight;
    }
  }

  this.hitLeft = function() {
    var rockLeft = 0;
    if (this.x < rockLeft) {
      this.x = rockLeft;
    }
  }

  function enemyRespawn() {
    myEnemy1 = new component(30,240);
    myEnemy1Hp = 10;
    document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
  }

  this.hitObject = function() {
    myGamePiece.update();
    var enemy = myEnemy1.x - 11;
    if (this.x == enemy) {
      myEnemy1Hp = myEnemy1Hp - (damage - myEnemy1Armor);
      // bullets = []; // replaces all bullets
      const index = bullets.indexOf(this)
      bullets.splice(index,1)

      document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
      if (myEnemy1Hp <= 0) {
        myEnemy1Hp = 0;
        document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp;
        playerExp = playerExp + 1;
        document.getElementById('playerExp').innerHTML = playerExp;
        if (playerExp >= playerMaxExp) {
          playerExp = 0;
          playerMaxExp = playerMaxExp * 1.5;
          damage = damage + 1;
          document.getElementById('playerExp').innerHTML = playerExp;
          document.getElementById('playerMaxExp').innerHTML = playerMaxExp;
        }
        myEnemy1 = new component(0,0);
        myEnemy1.update();
        setTimeout(enemyRespawn,5000);
      }
    }
  }
}

function shootGun() {
  let bullet = new component(11,5,'blue',myGamePiece.x + 27,myGamePiece.y + 13);
  bullet.newPos();
  bullet.speedX = 1;
  bullets.push(bullet);
}

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
  if (myGameArea.key && myGameArea.key == 37) {
    myGamePiece.speedX = -1;
  } //left
  if (myGameArea.key && myGameArea.key == 39) {
    myGamePiece.speedX = 1;
  } //right
  if (myGameArea.key && myGameArea.key == 38) {
    myGamePiece.gravitySpeed = -1;
  } //jump
  if (myGameArea.key && myGameArea.key == 32) {
    shootGun()
  } //shoot gun
  //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down
  myEnemy1.update();
  endGoalPiece.update();
  myGamePiece.newPos();
  myGamePiece.update();
  bullets.forEach((bullet) => {
    bullet.newPos(); // update and check for collisions
    bullet.update();
  });
  // bullet.newPos();
  // bullet.update();
}

startGame();

canvas {
  border: 4px solid #d3d3d3;
  background-color: #f1f1f1;
}

<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> ?