More collision debugging...

index.html

@@ -38,11 +38,11 @@ var _COLOR_GRASS = '#388E3C',
     ctx = $('canvas')[0].getContext('2d')
     staticctx = $('canvas')[1].getContext('2d')
     init()
-    drawBorder(23, 10, 500, 5)
+    drawBorder(23+5, 10, 500-10, 5)
-    drawBorder(23, 10, 5, 500)
+    drawBorder(23, 10+5, 5, 500-10)
     drawBorder(23+200, 10+70, 50, 50)
-    drawBorder(23, 500+10-5, 500, 5)
+    drawBorder(23+5, 500+10-5, 500-10, 5)
-    drawBorder(500+23-5, 10, 5, 500)
+    drawBorder(500+23-5, 10+5, 5, 500-10)
     drawHole(432, 366)
     setInterval(animLoop, 10)
 
@@ -101,11 +101,21 @@ var _COLOR_GRASS = '#388E3C',
     borders.push(new Border(x, y, width, height))
   }
 
+  function debugBorder(border) {
+    drawDebugBorder(border)
+    setTimeout(function(){drawDebugBorderUndo(border)}, 2*1000)
+  }
+
   function drawDebugBorder(border) {
     staticctx.fillStyle = 'red'
     staticctx.fillRect(border.x, border.y, border.width, border.height)
   }
   
+  function drawDebugBorderUndo(border) {
+    staticctx.fillStyle = _COLOR_BORDER
+    staticctx.fillRect(border.x, border.y, border.width, border.height)
+  }
+
   function drawHole(x, y) {
     staticctx.beginPath()
     staticctx.arc(x, y, 20, 0, Math.PI*2)
@@ -141,6 +151,7 @@ var _COLOR_GRASS = '#388E3C',
   }
 
   function collide() {
+    var coll = [false, false, false, false] //left, top, right, bottom
     borders.forEach(function(el){
       // if(bX >= el.x && bX <= el.x+el.width && bY >= el.y && bY <= el.y+el.height){
       //   drawDebugBorder(el)
@@ -162,22 +173,47 @@ var _COLOR_GRASS = '#388E3C',
       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){
+        debugBorder(el)
         if(crossWidth<crossHeight){
-          collision=(crossWidth<(-crossHeight))?'bottom':'left'
+          if (crossWidth<(-crossHeight))
+            coll[3] = true
+          else
+            coll[0] = true
         } else {
-          collision=(crossWidth<(-crossHeight))?'right':'top'
+          if (crossWidth<(-crossHeight))
+            coll[2] = true
+          else
+            coll[1] = true
         }
       }
-      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
-      }
     })
+    if($.inArray(true, coll) > -1)
+      console.log(coll);
+    // if(coll[0] || coll[2])
+    //   bVec = [-bVec[0], bVec[1]]
+    // if(coll[1] || coll[3])
+    //   bVec = [bVec[0], -bVec[1]]
+    if(coll[0]){
+      console.log('left < 0');
+      bVec = [Math.abs(bVec[0]), bVec[1]]
+    }
+    if(coll[1]){
+      console.log('top < 0');
+      bVec = [bVec[0], Math.abs(bVec[1])] 
+    }
+    if(coll[2]){
+      console.log('right > 0');
+      bVec = [-Math.abs(bVec[0]), bVec[1]] 
+    }
+    if(coll[3]){
+      console.log('bottom > 0');
+      bVec = [bVec[0], -Math.abs(bVec[1])] 
+    }
+    
+    
+    if($.inArray(true, coll) > -1)
+      console.log(bVec);
   }
 
   /** CLASSES **/