title: Collision detection in my js platformer game. Can't stop the object, but detection works
body: <p>I'm creating a platformer game, and I'm adding collision, but I'm not sure how to stop the object after collision is detected. This is my javascript, and I have a basic html document with a  tag. Could someone help me out with stopping an object after I detect collision? I feel like my solutions I've come up with are much to complicated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  const characterImage = document.getElementById('character')
  const level = 1
  canvas.width = document.body.scrollWidth
  canvas.height = document.body.scrollHeight
  
  let time; // Current time
  let prevTime = Date.now(); // Store previous time
  let isGrounded; // Check if player is on the ground
  
  class Main {
      constructor(x, y, w, h) {
          this.x = x;
          this.y = y;
          this.w = w;
          this.h = h;
          this.lives = 3;
          this.speedX = 0;
          this.speedY = 0;
          this.gravity = .01;
          // this.gravitySpeed = 0;
          this.jumpSpeed = -1.5; // How fast to jump upwards
          this.dx = 0;
          this.dy = 0;
          this.centerX = canvas.width / 2;
          this.centerY = canvas.height / 2;
      }
      draw() {
          if (this.x &lt;= -0) {
              this.x = -0
          }
  
          if (this.x &gt;= canvas.width - 50) {
              this.x = canvas.width - 50
          }
  
          const player = {
              image: characterImage,
              x: this.x,
              y: this.y,
              w: 50,
              h: 50
          }
  
          const obstacle1 = {
              x: this.centerX,
              y: canvas.height - 100,
              w: 50,
              h: 50
          }
  
          const lava = {
  
          }
  
          const ground = {
              x: 0,
              y: canvas.height - 50,
              w: canvas.width,
              h: 50
          }
          //collision detection
          
          if (player.x &lt; obstacle1.x + obstacle1.w &amp;&amp;
              player.x + obstacle1.w &gt; obstacle1.x &amp;&amp;
              player.y &lt; obstacle1.y + obstacle1.h &amp;&amp;
              player.y + player.h &gt; obstacle1.y) {
              }
              
  
  
          ctx.beginPath();
          ctx.fillStyle = '#9b7653'
          ctx.fillRect(ground.x, ground.y, ground.w, ground.h)
          ctx.closePath();
  
          ctx.beginPath();
          ctx.drawImage(player.image, player.x, player.y, player.w, player.h);
          ctx.closePath();
  
          //obstacles
          ctx.beginPath();
          ctx.fillStyle = '#df4759'
          ctx.fillRect(obstacle1.x, obstacle1.y, obstacle1.w, obstacle1.h);
          ctx.closePath();
      }
  
      newPos() {
          this.gravitySpeed += this.gravity;
          this.x += this.speedX;
      }
  
      update() {
          
          // Calculate how much time has passed since last update
          time = Date.now();
          const deltaTime = time - prevTime;
  
          // Update y-position based speed in y-direction
          // If we jump this.speed will be set to this.jumpSpeed
          this.y += this.speedY * deltaTime;
          // Gravity should always affect the player!
          // The ground check will make sure we don't fall through the floor
          this.y += this.gravity * deltaTime;
          // Make sure to reduce our player's speed in y by gravity!
          this.speedY += this.gravity * deltaTime;
  
          // Only allow the player to jump if he is on the ground
          if (controller1.up &amp;&amp; isGrounded) {
              // Set the player y-speed to jump speed
              this.speedY = this.jumpSpeed;
          };
  
          if (controller1.right) {
              this.dx += 0.7
          };
          if (controller1.left) {
              this.dx -= 0.7
          };
  
          this.x += this.dx;
          // this.y += this.dy;
          this.dx *= 0.9;
          this.dy *= 0.9;
  
          // Ground check
          if (this.y &gt;= canvas.height - 100) {
              this.y = canvas.height - 100;
              isGrounded = true;
          } else {
              isGrounded = false;
          }
  
  
          // Store the current time to use for calculation in next update
          prevTime = Date.now();
      }
  
  }
  
  class Controller {
      constructor() {
          this.up = false;
          this.right = false;
          this.down = false;
          this.left = false;
  
          let keyEvent = (e) =&gt; {
              if (e.code == "KeyW" || e.code == "ArrowUp" || e.code == "Space") {
                  this.up = e.type == 'keydown'
              };
              if (e.code == "KeyD" || e.code == "ArrowRight") {
                  this.right = e.type == 'keydown'
              };
              if (e.code == "KeyA" || e.code == "ArrowLeft") {
                  this.left = e.type == 'keydown'
              };
          }
  
          addEventListener('keydown', keyEvent);
          addEventListener('keyup', keyEvent);
          addEventListener('mousemove', keyEvent)
      }
  }
  
  let main1 = new Main(50, canvas.height - 150, 50, 50)
  let controller1 = new Controller();
  
  function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      main1.update();
      main1.draw();
      requestAnimationFrame(animate)
  }
  
  function updatePos() {
      main1.newPos();
  }
  
  animate()
  setInterval(updatePos, 10)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;img src="http://placekitten.com/50/50" id="character" style="display: none"&gt;</code></pre>
  </div>
  </div>
  </p>