麻煩與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;     
     } 

我拉錯了個別畫布對象的區域。