title: Collision detection strategy for a pong game
body: <p>I'm trying to implement a simple pong game. I want the ball to change X direction or Y direction depending what side of the ball was hit.</p>
  
  <p>The ball moves at 3 pixels per second and has a width of 22 and height of 22. The paddles have a width and height of 32.</p>
  
  <p>For collision detection on the ball, should I just create one rectangle and check for collision with the center point?</p>
  
  <p>Alternatively I could create 4 rectangles around the ball to represent the sides, with an appropriate width, given that the ball moves at 3 pixels per frame. </p>
  
  <p>Another option is to create a method that will check for collision at least 2 pixels in the direction of motion of the ball.</p>
  
  <p>If the ball is moving to the right, and the x-position is 16, the next frame will be 19.
  Should I create a method that will check x for 16, 17 and 18, to make sure if there is a collision it will hit the right side and not cause the ball to actually go inside the cube?</p>
  
  <p>@Sig</p>
  
  <p>I now have this as my collision detection</p>
  
  <pre><code>if(Rect.intersects(balls.get(j).ball, levelBlocks.blocks.get(i).rect))
              {
              //Bottom
              if(balls.get(j).yPos &lt;= levelBlocks.blocks.get(i).yPos - (32/2))
              {
                  balls.get(j).ySpeed = balls.get(j).ySpeed * -1;
              }
  
              //Top
              if(balls.get(j).yPos &gt;= levelBlocks.blocks.get(i).yPos + (32/2))
              {   
                  balls.get(j).ySpeed = balls.get(j).ySpeed * -1;
              }
  
              //Left
              if(balls.get(j).xPos &lt; levelBlocks.blocks.get(i).xPos)
              {
                  balls.get(j).xSpeed = balls.get(j).xSpeed * -1;
              }
  
              //Right
              if(balls.get(j).xPos &gt; levelBlocks.blocks.get(i).xPos)
              {
                  balls.get(j).xSpeed = balls.get(j).xSpeed * -1;
              }
  </code></pre>
  
  <p>This works, but not 100%, it still seems abit off. if the ball hits two blocks at the same time, it will invert the invert so the direction will go back again.</p>
  
  <p>I then changed it to this</p>
  
  <pre><code>if(Rect.intersects(balls.get(j).ball, levelBlocks.blocks.get(i).rect))
              {
              //Bottom
              if(balls.get(j).yPos &lt;= levelBlocks.blocks.get(i).yPos - (32/2))
              {
                  collision = 2;
              }
  
              //Top
              if(balls.get(j).yPos &gt;= levelBlocks.blocks.get(i).yPos + (32/2))
              {   
                  collision = 2;
              }
  
              //Left
              if(balls.get(j).xPos &lt;= levelBlocks.blocks.get(i).xPos + (32/2))
              {
                  collision = 1;
              }
  
              //Right
              if(balls.get(j).xPos &gt;= levelBlocks.blocks.get(i).xPos + (32/2))
              {
                  collision = 1;
              }
  
              temp = levelBlocks.blocks.get(i);
              levelBlocks.blocks.remove(i);
              combo.blocksDestroied += 1;
              Assets.score += 10 * combo.comboMultiplier;
              }
  
  
          }
  
          if(collision == 1)
          {
              balls.get(j).xSpeed = balls.get(j).xSpeed * -1;
              collision = 0;
          }
  
          if(collision == 2)
          {
              balls.get(j).ySpeed = balls.get(j).ySpeed * -1;
              collision = 0;
          }
  </code></pre>
  
  <p>This does work, but every now and then the ball will just start randomly going through blocks, it is very odd to look at, really confused on why it is doing it, but I do feel it is because of the 3 pixels per frame</p>