title: top of paddle collision detection pong
body: <p>This is for pong.</p>
  
  <p>I can get collision of the ball and front paddle to fire but not the ball and top of paddle, but this code seems correct for it. This code is inside the ball object. The ball is a square image with correct width and height attributes.</p>
  
  <pre><code>    // Paddle collision detection
      // Hits front of paddle
      if ((this.x) == (playerPaddle.x + playerPaddle.width) &amp;&amp; (this.y &gt; playerPaddle.y) &amp;&amp; this.y &lt; (playerPaddle.y + playerPaddle.height)) {
          console.log("front connect");
          this.vx = -this.vx;
      }
      // Hits top of paddle
      if ((this.x + this.width) &gt;= playerPaddle.x &amp;&amp; this.x &lt;= (playerPaddle.x + playerPaddle.width) &amp;&amp; (this.y + this.height) == playerPaddle.y) {
          console.log("top connect");
          this.vy = -this.vy;
      }
  </code></pre>
  
  <p>It fires if i change <code>&amp;&amp; (this.y + this.height) == playerPaddle.y)</code> to <code>&amp;&amp; (this.y + this.height) &gt; playerPaddle.y)</code> but obviously this is wrong, causing it to fire whenever the ball is way below the paddle. It seems like a bug in the browser as it looks correct to me. I'm using chrome which seems to always work well.</p>