Shoot the ball!

index.html

@@ -15,7 +15,8 @@ var ctx,
     bX,
     bY,
     pX,
-    pY
+    pY,
+    bVec
 
   /************************/
  /*** _GAME VARIABLES_ ***/
@@ -27,7 +28,9 @@ var _COLOR_GRASS = '#388E3C',
     _COLOR_BRACKET = '#000000'
 
     
-  var _MAX_BRACKET = 100
+  var _MAX_BRACKET = 100,
+      _BALL_SPEED = 50,
+      _BALL_SPEED_THRESHOLD = 10
 
   $(function(){
     ctx = $('canvas')[0].getContext('2d')
@@ -46,14 +49,38 @@ var _COLOR_GRASS = '#388E3C',
     })
 
     $(document).mousedown(function(e){
-      // TODO: Add functionality
+      var strength = Math.hypot(pX - bX, pY - bY)
+      if(strength > _MAX_BRACKET)
+        strength = _MAX_BRACKET
+      angle = Math.atan2(pY - bY, pX - bX)
+      x = bX+strength*Math.cos(angle)-_MAX_BRACKET
+      y = bY+strength*Math.sin(angle)-_MAX_BRACKET
+      if(Math.abs(x) < _BALL_SPEED_THRESHOLD){
+        if(x < 0)
+          x = -_BALL_SPEED_THRESHOLD
+        if(x > 0)
+          x = +_BALL_SPEED_THRESHOLD
+      }
+      if(Math.abs(y) < _BALL_SPEED_THRESHOLD){
+        if(y < 0)
+        y = -_BALL_SPEED_THRESHOLD
+        if(y > 0)
+        y = +_BALL_SPEED_THRESHOLD
+      }
+      console.log(x + '|' + y);
+      if(bVec == null)
+        bVec = [x/_BALL_SPEED, y/_BALL_SPEED]
     })
   })
 
+  var i = 0
   function animLoop() {
     ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
     // drawBall(bX++, bY++)
-    drawBall(bX, bY)
+    if(bVec != null)
+      drawBall(bX-i++*bVec[0], bY-i*bVec[1])
+    else
+      drawBall(bX, bY)
     drawBracket()
   }