title: How can I deflect the ball properly in a Javascript pong game?
body: <p>I have written a simple pong game in Javascript. But I am having two problems with it.</p>
  
  <ol>
  <li><p>I don't know why the ball doesn't deflect off of the computer's paddle which is the "playerB" according to the code.</p></li>
  <li><p>How can I create some randomness when the ball deflects from the paddles? Currently the game seems very repetitive.</p></li>
  </ol>
  
  <p>How can I fix these two problems?</p>
  
  <p><a href="http://jsfiddle.net/bhrzali/yb290ow9/1/" rel="nofollow">Link to Jsfiddle</a></p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Pong game&lt;/title&gt;
    &lt;script type="text/javascript" src="jquery-2.1.4.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/pong.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="css/pong.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
      &lt;p&gt;
      Computer:&lt;span id="scoreB"&gt;&lt;/span&gt; Human:&lt;span id="scoreA"&gt;&lt;/span&gt;
      &lt;/p&gt;
    &lt;/header&gt;
    &lt;div id="playground"&gt;
      &lt;div id="ball"&gt;&lt;/div&gt;
      &lt;div id="playerA" class="paddle right"&gt;&lt;/div&gt;
      &lt;div id="playerB" class="paddle left"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>html,body{
    margin: 0 atuo;
    height:100%;
  }
  #playground{
    position: relative;
    width:700px;
    height:400px;
    border: 1px solid grey;
    overflow:hidden;
  }
  #ball{
    position: absolute;
    background: #fbb;
    width:20px;
    height:20px;
    left:200px;
    top:100px;
    border-radius:10px;
  }
  .paddle{
    position: absolute;
    border:1px solid grey;
    width:10px;
    height:80px;
  }
  .left.paddle{
    left:0px;
    background-color: green;
  }
  .right.paddle{
    right:0px;
    background-color: blue;
  }
  </code></pre>
  
  <h1>Javascript</h1>
  
  <pre><code>$(document).ready(function(){
    var values = {
      ball:{
        speed:5,
        x:50,
        y:50,
        directionX: 1,
        directionY: 1,
        radius: 10
      },
      playground:{
        width: parseInt($("#playground").width()),
        height: parseInt($("#playground").height())
      },
      playerA:{
        y:0,
        top: $("#playerA").offset().top,
        height: $("#playerA").height(),
        width: $("#playerA").width(),
        score:0
      },
      playerB:{
        y:0,
        top: $("#playerB").offset().top,
        height: $("#playerB").height(),
        width: $("#playerB").width(),
        score:0
      }
    };
    //collision detection
    function hitsTopBottom(){
      var y = values.ball.y;
      return y&gt;values.playground.height-20 || y &lt; 0;
    }
    function hitsRight(){
      return values.ball.x &gt; values.playground.width-20;
    }
    function hitsLeft(){
      return values.ball.x &lt; 0;
    }
    //ball hits playerA's paddle. Works properly but open to improvement
    function hitsPlayerA(){
      var ballX = values.ball.x;
      var ballY = values.ball.y;
      var playerAY = values.playerA.y;
      return ballY&lt;=playerAY+values.playerA.height &amp;&amp; ballY&gt;playerAY &amp;&amp; ballX&gt;=700-values.playerA.width-values.ball.radius;
    }
    //ball hits playerB's paddle. Doesn't work at all
    function hitsPlayerB(){
      var ballX = values.ball.x;
      var ballY = values.ball.y;
      var playerBY = values.playerB.y;
      return ballY&lt;=playerBY+values.playerB.height &amp;&amp; ballY&gt;=playerBY &amp;&amp; ballX&lt;=values.playerB.width-values.ball.radius;
    }
    //rendering the position of the ball
    function renderball(){
      $("#ball").css("left",values.ball.x);
      $("#ball").css("top",values.ball.y);
      $("#scoreB").text(values.playerB.score);
      $("#scoreA").text(values.playerA.score);
    }
    //moving ball
    function moveball(){
      if(hitsTopBottom()){
        values.ball.directionY *= -1;
      }
      if(hitsPlayerA()){
        values.ball.directionX *= -1;
      }
      if(hitsPlayerB()){
        values.ball.directionX = 1;
      }
      if(hitsRight()){
        values.ball.x = 200;
        values.ball.y = 200;
        values.playerB.score += 1;
      }
      if(hitsLeft()){
        values.ball.x = 200;
        values.ball.y = 200;
        values.playerA.score += 1;
      }
      values.ball.x += values.ball.speed*values.ball.directionX;
      values.ball.y += values.ball.speed*values.ball.directionY;
      renderball();
      var playerB_pos = values.ball.y - values.playerB.height/2;
      $("#playerB").css("top",playerB_pos);
    }
    //player movements
    $("#playground").mousemove(function(e){
      values.playerA.y = e.pageY-values.playerA.top-parseInt($("#playerA").height()/2);
      $("#playerA").css("top",values.playerA.y);
    });
    setInterval(moveball,1000/30);
  });
  </code></pre>