title: How to throw a ball into a cup?
body: <p>I have an image of a ball, a cup, and an inner and outer div that represent a throw power bar.<br>
  When the user clicks the ball, the power bar starts to increment and then decrements. When the user clicks the ball a 2nd time, the throw power bar stops and the ball is thrown.</p>
  
  <p>As I have began coding this, I realized certain things are going to be extremely complicated, even though the idea itself is rather simple.  </p>
  
  <p>For example, I want the ball to be able to "bounce", meaning I will need to not only keep track of the balls x and y coordinates, but also a z coordinate representing depth.  </p>
  
  <p>When the ball falls to bounce, the z coordinate with be decremented, and the image of the ball should be scaled down in size, and when it begins bouncing back up, it should scale up in size, again based on the z coordinate.  I also want the ball to bounce off the cup if the z coordinate is below a certain value by the time it reaches the cup, go into the cup if it is a certain sweet spot, or go over the cup if it's z value is over that sweet spot.</p>
  
  <p>In the interest of keeping this somewhere short, I'll just post what I have so far.  This example is lacking certain things that I was hoping people here could help me with.</p>
  
  <p><a href="http://jsfiddle.net/7Lsh78nw/" rel="nofollow">http://jsfiddle.net/7Lsh78nw/</a></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
          #ball {
              position:absolute;
              width:75px;
              height:75px;
          }
  
          #cup1 {
              position:absolute;
              left:375px;
          }
  
          #outerPowerMeter {
              position:absolute;
              width:25px;
              height:100px;
              background-color:red;
          }
  
          #innerPowerMeter {
              position:absolute;
              width:25px;
              height:100px;
              background-color:black;
          }
      &lt;/style&gt;
  
      &lt;script&gt;
          window.onload = function() {
              var ball = document.getElementById("ball");
              var yPos = 500;
              var xPos = 400;
              var zPos = 100;
              var ballWidth = 75;
              var ballHeight = 75;
              var throwBallInterval;
              var changeBallSizeInterval;
  
              ball.style.top = yPos + "px";
              ball.style.left = xPos + "px";
  
              var cup1 = document.getElementById("cup1");
  
              var powerMeter = document.getElementById("innerPowerMeter");
              var powerMeterValue = 0;
              var powerMeterHeight = 100;
              var powerMeterActive = false;
              var powerMeterInterval;
  
              powerMeter.style.height = powerMeterHeight + "px";
  
              ball.onclick = function() {
                  if (powerMeterActive == false) {
                      powerMeterActive = true;
                      startPowerMeter();
                  } else {
                      powerMeterActive = false;
                      stopPowerMeter();
                      throwBall();
                  }
              }
  
              function throwBall() {
                  throwBallInterval = setInterval(function() {
                      yPos = yPos - 1;
                      ball.style.top = yPos + "px";
                  }, 1);
  
                  changeBallSizeInterval = setInterval(function() {
                      zPos = zPos - 1;
                      ballWidth = ballWidth - 1;
                      ballHeight = ballHeight - 1;
                      ball.style.width = ballWidth;
                      ball.style.height = ballHeight;
                  }, 100);
              }
  
              function startPowerMeter() {
                  var increment = true;
                  powerMeterInterval = setInterval(function() {
                      if (increment == true) {
                          powerMeterValue = powerMeterValue + 1;
                          powerMeter.style.height = (powerMeterHeight - powerMeterValue) + "px";
                          if (powerMeterValue == 100) {
                              increment = false;
                          }
                      } else {
                          powerMeterValue = powerMeterValue - 1;
                          powerMeter.style.height = (powerMeterHeight - powerMeterValue) + "px";
                          if (powerMeterValue == 0) {
                              increment = true;
                          }
                      }
                  },1);
              }
  
              function stopPowerMeter() {
                  clearInterval(powerMeterInterval);
              }
  
              function detectCollision() { }
  
              function detectGoal() { }
          }
      &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img id="cup1" src="http://beerwar.com/game/images/cup.png"&gt;
          &lt;img id="ball" src="http://beerwar.com/game/images/ball.png"&gt;
          &lt;div id="outerPowerMeter"&gt;
              &lt;div id="innerPowerMeter"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>