Added physics (still buggy as f**k...)

index.html

@@ -14,9 +14,11 @@ var ctx,
     staticctx,
     bX,
     bY,
+    bWidth = 10,
     pX,
     pY,
-    bVec
+    bVec,
+    borders = []
 
   /************************/
  /*** _GAME VARIABLES_ ***/
@@ -38,6 +40,7 @@ var _COLOR_GRASS = '#388E3C',
     init()
     drawBorder(23, 10, 500, 5)
     drawBorder(23, 10, 5, 500)
+    drawBorder(23+200, 10+70, 50, 50)
     drawBorder(23, 500+10-5, 500, 5)
     drawBorder(500+23-5, 10, 5, 500)
     drawHole(432, 366)
@@ -47,7 +50,7 @@ var _COLOR_GRASS = '#388E3C',
       pX = e.pageX - $('canvas').offset().left
       pY = e.pageY - $('canvas').offset().top
     })
-
+    
     $(document).mousedown(function(e){
       var strength = Math.hypot(pX - bX, pY - bY)
       if(strength > _MAX_BRACKET)
@@ -73,12 +76,14 @@ var _COLOR_GRASS = '#388E3C',
     })
   })
 
-  var i = 0
+  // var i = 0
   function animLoop() {
     ctx.clearRect(0, 0, $('canvas').width(), $('canvas').height());
-    // drawBall(bX++, bY++)
+    
-    if(bVec != null)
+    if(bVec != null){
-      drawBall(bX-i++*bVec[0], bY-i*bVec[1])
+      collide()
+      drawBall(bX = bX-bVec[0], bY = bY-bVec[1])
+    }
     else
       drawBall(bX, bY)
     drawBracket()
@@ -87,12 +92,18 @@ var _COLOR_GRASS = '#388E3C',
   function init() {
     bX = bY = 100
     staticctx.fillStyle = _COLOR_GRASS
-    staticctx.fillRect(23, 10, 500, 500);
+    staticctx.fillRect(23, 10, 500, 500)
   }
 
-  function drawBorder(x, y, length, width) {
+  function drawBorder(x, y, width, height) {
     staticctx.fillStyle = _COLOR_BORDER
-    staticctx.fillRect(x, y, length, width);
+    staticctx.fillRect(x, y, width, height)
+    borders.push(new Border(x, y, width, height))
+  }
+
+  function drawDebugBorder(border) {
+    staticctx.fillStyle = 'red'
+    staticctx.fillRect(border.x, border.y, border.width, border.height)
   }
 
   function drawHole(x, y) {
@@ -105,7 +116,7 @@ var _COLOR_GRASS = '#388E3C',
 
   function drawBall(x, y) {
     ctx.beginPath()
-    ctx.arc(x, y, 10, 0, Math.PI*2)
+    ctx.arc(x, y, bWidth, 0, Math.PI*2)
     ctx.fillStyle = _COLOR_BALL
     ctx.fill()
     ctx.closePath()
@@ -128,6 +139,54 @@ var _COLOR_GRASS = '#388E3C',
     ctx.stroke()
     ctx.closePath()
   }
+
+  function collide() {
+    borders.forEach(function(el){
+      // if(bX >= el.x && bX <= el.x+el.width && bY >= el.y && bY <= el.y+el.height){
+      //   drawDebugBorder(el)
+      //   if(Math.round(bX) == el.x || Math.round(bX) == el.x+el.width){
+      //     bVec = [-bVec[0], bVec[1]]
+      //   }
+      //   else if(Math.round(bY) == el.y || Math.round(bY) == el.y+el.height)
+      //     bVec = [bVec[0], -bVec[1]]
+      //   else {
+      //     console.error('Error during collide()')
+      //     console.log(el)
+      //     console.log(Math.round(bY));
+      //     console.log(Math.round(bX));
+      //   }
+      // }
+      var dx = (el.x+el.width/2)-(bX+bWidth/2)
+      var dy = (el.y+el.height/2)-(bY+bWidth/2)
+      var width = (el.width+bWidth)/2
+      var height = (el.height+bWidth)/2
+      var crossWidth = width*dy;
+      var crossHeight = height*dx;
+      var collision = 'none';
+      if(Math.abs(dx)<=width && Math.abs(dy)<=height){
+        if(crossWidth<crossHeight){
+          collision=(crossWidth<(-crossHeight))?'bottom':'left'
+        } else {
+          collision=(crossWidth<(-crossHeight))?'right':'top'
+        }
+      }
+      if(collision != 'none') console.log(collision);
+      switch (collision) {
+        case 'bottom':
+        case 'top': bVec = [bVec[0], -bVec[1]];  break
+        case 'left':
+        case 'right': bVec = [-bVec[0], bVec[1]];  break
+      }
+    })
+  }
+
+  /** CLASSES **/
+  function Border(x, y, width, height) {
+    this.x = x
+    this.y = y
+    this.width = width
+    this.height = height
+  }
 </script>
 
 <script src="http://localhost:35729/livereload.js"></script>