Javascript html5中完美像素与画布冲突的问题

我想我已经接近这个目标了，但是我很难弄清楚我到底错过了什么。我正试图在画布上进行“像素完美”的碰撞检测。代码在Github和中提供

假设我已经确定发生了轻微的碰撞，下一步是检查重叠区域的像素级别

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

        // 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;           

//好，计算重叠的矩形：
如果（bottom1>bottom2）{over_bottom=bottom2；
}else{over_bottom=bottom1；}
如果（top1right2）{over_right=right2；
}else{over_right=right1；}
如果（left1obj.Xpos）{
//从精灵右侧开始读取数据
var sprite_data_x_start=sprite.Xpos+sprite.width-重叠宽度；
var obj_data_x_start=obj.Xpos；
}否则{
//从左边的精灵读取数据。
var sprite_data_x_start=sprite.Xpos；
var obj_data_x_start=obj.Xpos+obj.width-重叠宽度；
}
if（Sprite.Ypos>obj.Ypos）{
//从精灵右侧开始读取数据
var sprite_data_y_start=sprite.Ypos+sprite.height-重叠高度；
var obj_data_y_start=obj.Ypos；
}否则{
//从左边的精灵读取数据。
var sprite_data_y_start=sprite.Ypos；
var obj_data_y_start=obj.Ypos+obj.height-重叠高度；
}
// 1. 获取box object1重叠区域的坐标
// 2. 获取此精灵重叠区域的坐标
// 3. 使用GETIMAGEDATA将每个的数据获取到一个数组中
//例如：
var sprite_overlap_image=sprite.ctx.getImageData（sprite_data_x_start，
sprite_数据_y_开始，
重叠宽度，
重叠高度）；
var obj_overlap_image=obj.ctx.getImageData（obj_data_x_start，
obj_数据_y_开始，
重叠宽度，
重叠高度）；
//soid=sprite\u overlap\u image.data；
soid=精灵重叠图像；
GlobalWatchSOID=精灵重叠图像；
GlobalWatchOOID=对象重叠图像；
ooid=对象重叠图像；
//MainContext.putImageData（sprite\u overlap\u image.data，100100）；
//MainContext.putImageData（obj_overlap_image.data，400400）；
用于（固体数据中的idx）{
如果（！isNaN（idx））{
if（（soid.data[idx]==0&&ooid.data[idx]==0））{
返回true；
//log（idx++'+soid.data[idx]+'omg hit！'+ooid.data[idx]）；
}
}
}
返回false；

通过在Chrome调试器中检查DOM，我知道我肯定能够遍历图像中的每个像素，但我无法理解的是，为什么我在索引处对array1中的像素和array2中的像素进行的比较似乎从未重叠

有人能看到我出错的地方吗？也许这里的某个地方有逻辑错误，也许我没有阅读我认为我得到的方块或其他东西

如果我发现了，我会继续努力更新，但更多时候，Stack比我聪明得多：）

我已经破解了它

        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;                
        }

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

我已经破解了它

        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;                
        }

---

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

我想在我有空闲时间的时候看看这个，如果这仍然是一个问题Hi Simon，这仍然是一个问题，同样的，我这个周末也被分心了，这个问题看起来有点“不可克服”。我在想我应该看看WebSocket、node.js和多个牛头怪，而这一个在我脑海中翻转。（我也可以尝试在Github上找到一个有像素冲突的JS游戏引擎，看看它们在做什么）。我相信这一个很接近！我上周浏览了一下，可能会有帮助。我想在我有空的时候看看这个，如果这仍然是一个问题的话。我西蒙，这仍然是一个问题，同样的，这个周末我被分心了，这个问题看起来有点“不可克服”。我在想我应该看看WebSocket、node.js和多个牛头怪，而这一个在我脑海中翻转。（我也可以尝试在Github上找到一个有像素冲突的JS游戏引擎，看看它们在做什么）。我相信这一个很接近！我上周浏览了一下，可能会有帮助。