Can someone review this javascript so that the player can move after colliding with the wall?

As my code detects a collision with the wall and I try to move the player with the arrow keys away from it it does not move. I am using html and javascript and i can not figure out what is wrong. I am trying to develop my first 2d adventure game and right i am trying just to do some basic physics. I am relatively at this so can someone review this javascript so that the player can move after colliding with the wall? Also as the player touches the ground because of gravity physics it will not move back up like the gravity is getting stronger why is that happening?

 var myGamePiece;
  var myObstacle;
  var e = e || window.event;
  var speed = 3;
  var gravity = 0.05;
  function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myObstacle = new component(10, 200, "green", 300, 120);
    myGameArea.start();
    myGameArea.gravityPhysics();
  }

  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);
    },
    clear: function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    gravityPhysics: function() {
      myGamePiece.speedY = -speed;
    },
    stop: function() {
      clearInterval(this.interval);
    }
  };

  function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.update = function() {
      ctx = myGameArea.context;
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
      this.hitBottom();
    };
    this.crashWith = function(otherobj) {
      var myleft = this.x;
      var myright = this.x + this.width;
      var mytop = this.y;
      var mybottom = this.y + this.height;
      var otherleft = otherobj.x;
      var otherright = otherobj.x + otherobj.width;
      var othertop = otherobj.y;
      var otherbottom = otherobj.y + otherobj.height;
      var crash = true;

      if (
        mybottom < othertop ||
        mytop > otherbottom ||
        myright < otherleft ||
        myleft > otherright
      ) {
        crash = false;
      }

      return crash;
    };
    this.hitBottom = function() {
      var rockbottom = myGameArea.canvas.height - this.height;

      if (this.y > rockbottom) {
        this.y = rockbottom;

        if (
          myGameArea.canvas.height - this.height &&
          myGamePiece.key == 38
        ) {
          this.y = this.speedY;
        }

        this.gravitySpeed = 0; // reset?
      }
    };
  }

  function updateGameArea() {
    if (myGamePiece.crashWith(myObstacle)) {
      console.log("crash");
    } else {
      myGameArea.clear();
      myObstacle.update();
      myGamePiece.x += myGamePiece.speedX;
      myGamePiece.y -= myGamePiece.speedY;
      myGamePiece.update();
    }
    if (
      myGameArea.gravityPhysics() &&
      e.keyCode == document.addEventListener("keydown")
    ) {
      myGamePiece.speedY = gravity - 10;
      e.keyCode = true;
    }
  }
  document.onkeydown = checkKeyD;
  document.onkeyup = gravityPhysics;

  function checkKeyD(e) {
    if (e.keyCode == "38") {
      // up arrow
      myGamePiece.speedY = speed;
    } else if (e.keyCode == "40") {
      // down arrow
      myGamePiece.speedY = -speed;
    } else if (e.keyCode == "37") {
      // left arrow
      myGamePiece.speedX = -speed;
    } else if (e.keyCode == "39") {
      // right arrow
      myGamePiece.speedX = speed;
    }
  }
  if ((e = e || (window.event && window.event == false))) {
    myGamePiece.speedY -= gravity;
  }
  function clearmove() {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
  }