title: 2d Square to rectangle collision detection and action(physics)
body: <p>so I made this way to detect and react to squares moving and touching other squares. It uses Pythagorean theorem to make a third parameter so you don't get two true if statements when squares touch. I recently have been attempting to use this method on a square to a rectangle, and cannot seem to get it working. I have drawn lines to help visualize what the code is doing. Anybody have any suggestions on how to get this collision working properly?</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 context = canvas.getContext('2d');
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  let gravity = 1.5;
  let friction = 0.9;
  
  //CHARACTER:
  class Player {
      constructor(x, y, w, h, vx, vy, c, j) {
          this.x = x;
          this.y = y;
          this.w = w;
          this.h = h;
          this.vx = vx;
          this.vy = vy;
          this.color = c;
          this.jumping = j;
      }
      draw() {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.w, this.h);
      }
      canvasCollision() {
          if (this.x &lt;= 0) this.x = 0;
          if (this.y &lt;= 0) this.y = 0;
          if (this.x + this.w &gt;= canvas.width) this.x = canvas.width - this.w;
          if (this.y + this.h &gt;= canvas.height) {this.y = canvas.height - this.h; this.vy = 0; this.jumping = false};
      }
      update() {
          this.draw(); 
          this.vy += gravity;
          this.x += this.vx;
          this.y += this.vy;
          this.vx *= friction;
          this.vy *= friction;
          this.canvasCollision() //must be after other updates
      }
  }
  
  let player1 = new Player(75, canvas.height/2 + 75, 75, 75, 0, 0, '#8DAA9D', false); 
  
  function controlPlayer1(obj) {
      //this order matters. If update is before jump then obj won't jump when on top of other block.
      if (controller1.up1 &amp;&amp; !obj.jumping) { obj.vy -= 25; obj.jumping = true };
      if (controller1.left1) { obj.vx -= 0.5 };
      if (controller1.right1) { obj.vx += 0.5 };
      obj.update();
  }
  
  //MOVEMENT:
  class Controller {
      constructor() {
          this.left1  = false;
          this.up1    = false;
          this.right1 = false;
  
          this.down1  = false;
  
          let controller1 = (e) =&gt; {
                if (e.code === 'KeyD')   { this.right1 = e.type === 'keydown' }
              if (e.code === 'KeyA')   { this.left1 = e.type === 'keydown' }
              if (e.code === 'KeyW')   { this.up1 = e.type === 'keydown' }    
              if (e.code === 'KeyS')  { this.down1 = e.type === 'keydown' }       
          }
          
      window.addEventListener('keydown', controller1);
      window.addEventListener('keyup', controller1);
  
      }
  }
  
  let controller1 = new Controller();
  
  //PLATFORM
  class Platform {
    constructor(x, y, w, h, yv, c) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.yv = yv;
        this.color = c;
    }
    draw(){
      context.fillStyle = this.color;
      context.fillRect(this.x, this.y, this.w, this.h);
    }
    update(){
      this.draw();
      this.y += this.yv;
      this.yv *= 0.9;// friction
    }
  }
  
  let platform1 = new Platform(canvas.width/2, canvas.height - 150, 100, 30, 0, '#202020');
  let platform2 = new Platform (canvas.width/4, canvas.height/2, 75, 75, 0, '#202020');
  
  //COLLISION DETECTION
  function platformDetection(obj, obj2){
   //center point of each side of obj1
   let objLeft = {x: obj.x,  y: obj.y + obj.h/2};
   let objTop = {x: obj.x + obj.w/2, y: obj.y};
   let objRight = {x: obj.x + obj.w, y: obj.y + obj.h/2};
   let objBottom = {x: obj.x + obj.w/2, y: obj.y + obj.h};
   //center point of each side a obj2
   let obj2Left = {x: obj2.x, y: obj2.y + obj2.h/2};
   let obj2Top = {x: obj2.x + obj2.w/2, y: obj2.y};
   let obj2Right = {x: obj2.x + obj2.w, y: obj2.y + obj2.h/2};
   let obj2Bottom = {x: obj2.x + obj2.w/2, y: obj2.y + obj2.h};
   //distance between obj1 and obj2 opposing sides
   let rightDistX = objRight.x - obj2Left.x;
   let rightDistY = objRight.y - obj2Left.y;
   let leftDistX = objLeft.x - obj2Right.x;
   let leftDistY = objLeft.y - obj2Right.y;
   let topDistX =  objTop.x - obj2Bottom.x;
   let topDistY = objTop.y - obj2Bottom.y;
   let bottomDistX = objBottom.x - obj2Top.x;
   let bottomDistY = objBottom.y - obj2Top.y;
   //pythagorean theorem for distance. dRight is from the right side of obj1 to the left of obj2. the rest follow suit.
   let dRight = Math.sqrt(rightDistX*rightDistX + rightDistY*rightDistY);
   let dLeft = Math.sqrt(leftDistX*leftDistX + leftDistY*leftDistY);
   let dTop = Math.sqrt(topDistX*topDistX + topDistY*topDistY);
   let dBottom = Math.sqrt(bottomDistX*bottomDistX + bottomDistY*bottomDistY);
   //Math.min return the smallest value thus variable minimum will be which ever sides are closest together
   let minimum = Math.min(dRight, dLeft, dBottom, dTop);
   let val = 0;
   //compare minimum to pythagorean theorem and set val based on which ever side is closest
   if (dTop == minimum) {
    val = 1;
    //the context stuff can be deleted. It's just here for visual. The if statements can be one line each.
    context.lineWidth = 2;
    context.strokeStyle = 'blue';
    context.beginPath();
    context.moveTo(objTop.x, objTop.y); 
    context.lineTo(obj2Bottom.x, obj2Bottom.y);
    context.stroke();
  }
  else if (dRight == minimum) {
    val = 2;
    context.strokeStyle = 'orange';
    context.beginPath();
    context.moveTo(objRight.x, objRight.y); 
    context.lineTo(obj2Left.x, obj2Left.y);
    context.stroke();
  }
  else if (dBottom == minimum) {
    val = 3;
    context.strokeStyle = 'green';
    context.beginPath();
    context.moveTo(objBottom.x, objBottom.y); 
    context.lineTo(obj2Top.x, obj2Top.y);
    context.stroke();
  }
  else if (dLeft == minimum) {
    val = 4;
    context.strokeStyle = 'pink';
    context.beginPath();
    context.moveTo(objLeft.x, objLeft.y); 
    context.lineTo(obj2Right.x, obj2Right.y);
    context.stroke();
  }
   //pass the objects and val 
   platformAction(obj, obj2, val);
  }
  
  //ACTION
  function platformAction(obj, obj2, val){
  //player1 top to player2 bottom
  if (obj.y &lt;= obj2.y + obj2.h &amp;&amp; obj2.y + obj2.h &gt;= obj.y &amp;&amp; val == 1) {
    obj2.y = obj.y - obj2.h; 
    obj.y = obj2.y + obj2.h;
    obj2.vy = 0;
    obj2.jumping = false;
    obj.jumping = true;
  }
  //player1 right to player2 left
  if (obj.x + obj.w &gt;= obj2.x &amp;&amp; obj2.x &lt;= obj.x + obj.w &amp;&amp; val == 2) {
    obj2.x = obj.x + obj.w;
    obj.x = obj2.x - obj.w - 1;
    obj2.vx = 0;
  }
  //player1 bottom to player2 top
  if (obj.y + obj.h &gt;= obj2.y &amp;&amp; obj2.y &lt;= obj.y + obj.h &amp;&amp; val == 3) {
    obj.y = obj2.y - obj.h;
    obj2.y = obj.y + obj.h;
    obj.vy = 0;
    obj.jumping = false;
    obj2.jumping = true;
  }
  //player1 left to player2 right
  if (obj.x &lt;= obj2.x + obj2.w &amp;&amp; obj2.x + obj2.w &gt;= obj.x &amp;&amp; val == 4) {
    obj2.x = obj.x - obj2.w;
    obj.x = obj2.x + obj2.w + 1;
    obj.vx = 0;
    obj2.vx = 0;
  }
  }
  
  function initObj(obj){
  obj.update();
  }
  
  function loop() {
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.fillStyle = 'grey';
    context.fillRect(0, 0, canvas.width, canvas.height);
  
    //PLATFORM
    initObj(platform1);
    initObj(platform2);
  
    //PLATFORM DETECTION
    platformDetection(player1, platform1);
    platformDetection(player1, platform2);
  
    //PLAYER
    controlPlayer1(player1); 
  
    requestAnimationFrame(loop)
  }
  loop();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"&gt;
      &lt;title&gt;Tone.io&lt;/title&gt;
      &lt;style&gt;
      body {
        height:100vh;
        width:100vh;
        margin: 0;
      }
      &lt;/style&gt;
    &lt;/head&gt;
   
    &lt;body&gt;
  
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
      &lt;script src = "Js/Tone.js" type = "text/javascript"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>