麻烦与HTML5

Question

用帆布完美的像素碰撞我觉得我靠近就这一个，但我有一些困难，找出我缺少具体是什么。我试图在Canvas中进行“像素完美”碰撞检测。代码可在Github https://github.com/AlexChesser/jsSprite和http://chesser.ca/jsSprite/13-more-pixel-detection.php

假设我已经确定发生微不足道的冲突，下一个阶段是检查重叠区域的像素级别。

到目前为止，我为这个测试代码是：

 // Ok, compute the rectangle of overlap:    
     if (bottom1 > bottom2) { over_bottom = bottom2; 
     } else {     over_bottom = bottom1; } 

     if (top1 < top2)  { over_top = top2; 
     } else {     over_top = top1; } 

     if (right1 > right2) { over_right = right2; 
     } else {     over_right = right1; } 

     if (left1 < left2)  { over_left = left2; 
     } else {     over_left = left1; } 

     if (Sprite.debug == 1) { 
      // again for the purposes of global debuggery I thought it'd be nice to be able to 
      // draw the area of overlap, but without ruining all other tests 
      MainContext.fillStyle = "rgb(200,0,0)"; 
      MainContext.fillRect (over_left, over_top, over_right-over_left, over_bottom-over_top); 
     } 
     overlap_width = over_right-over_left; 
     overlap_height = over_bottom-over_top; 

     if (Sprite.Xpos > obj.Xpos) { 
      // read the data start at the sprite's right side 
      var sprite_data_x_start = Sprite.Xpos +Sprite.width -overlap_width; 
      var obj_data_x_start = obj.Xpos; 
     } else { 
      // read the data from the sprites left. 
      var sprite_data_x_start = Sprite.Xpos; 
      var obj_data_x_start = obj.Xpos +obj.width   -overlap_width;    
     } 

     if (Sprite.Ypos > obj.Ypos) { 
      // read the data start at the sprite's right side 
      var sprite_data_y_start = Sprite.Ypos +Sprite.height -overlap_height; 
      var obj_data_y_start = obj.Ypos; 
     } else { 
      // read the data from the sprites left. 
      var sprite_data_y_start = Sprite.Ypos; 
      var obj_data_y_start = obj.Ypos +obj.height   -overlap_height;     
     } 


     // 1. get the coordinates of the overlapped area for box object1 
     // 2. get the coordinates of the overlapped area for this Sprite 
     // 3. get the data for each into an array using GETIMAGEDATA 
     //  eg: 
     var sprite_overlap_image = Sprite.ctx.getImageData(sprite_data_x_start, 
                  sprite_data_y_start, 
                  overlap_width, 
                  overlap_height); 
     var obj_overlap_image = obj.ctx.getImageData(  obj_data_x_start, 
                  obj_data_y_start, 
                  overlap_width, 
                  overlap_height); 


     //soid = sprite_overlap_image.data; 
     soid = sprite_overlap_image; 
     GlobalWatchSOID = sprite_overlap_image; 
     GlobalWatchOOID = obj_overlap_image;    
     ooid = obj_overlap_image; 

     //MainContext.putImageData(sprite_overlap_image.data, 100, 100); 
     //MainContext.putImageData(obj_overlap_image.data, 400, 400); 

     for (idx in soid.data) { 
      if (!isNaN(idx)) { 
       if ((soid.data[idx] == 0 && ooid.data[idx] == 0)) { 
        return true; 
        //console.log(idx + ' ' + soid.data[idx] + ' omg hit! ' + ooid.data[idx]); 
       } 
      } 
     } 
     return false;   

通过检查在Chrome调试器的DOM，我知道我肯定能遍历图像中的每个像素，我是什么无法弄清楚为什么我在array1中的索引处的像素与array2中的像素之间的比较似乎没有重叠。

任何人都可以看到我要去哪里错了地方？也许在这里有一个逻辑错误，也许我没有阅读我认为我得到的广场或什么。

我会一直骂个不停和更新，如果我找到，但往往不是，斯塔克的比我聪明很多:)

Answer 1

我已经破解了。

 if (Sprite.Xpos > obj.Xpos) { 
      // read the data start at the sprite's right side 
      //var sprite_data_x_start = Sprite.Xpos -Sprite.width -overlap_width; 
      var sprite_data_x_start = Sprite.width -overlap_width;    
      var obj_data_x_start = 0; 
     } else { 
      // read the data from the sprites left. 
      var sprite_data_x_start = Sprite.Xpos; 
      var obj_data_x_start = 0   -overlap_width;    
     } 

     if (Sprite.Ypos > obj.Ypos) { 
      // read the data start at the sprite's right side 
      var sprite_data_y_start = Sprite.height -overlap_height; 
      var obj_data_y_start = 0; 
     } else { 
      // read the data from the sprites left. 
      var sprite_data_y_start = 0; 
      var obj_data_y_start = obj.height   -overlap_height;     
     } 

我拉错了个别画布对象的区域。