JS 控制台错误 - 未定义对象

Question

我有以下 JS 函数，我用它来检测我的 HTML5 画布上的“可拖动”图像是否被拖动到静态“描述框”图像的顶部，也显示在画布上：

function isHit(mouseX, mouseY){
if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    if(mouseY > 420){
        if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
            console.log("Correct");
        }else{
            console.log("Incorrect");
        }
    }
}

}

这个想法是在画布上会有一些静态图像（将是描述框），以及更多的可拖动图像。用户需要将每个可拖动的图像拖到相关的描述框中。

目前，我的if 语句只是检查当前被拖动的图像是否属于四个描述框中的第一个。

由于描述框全部显示在画布底部的一行中，我将我的函数设置为仅在 mouseY 变量（画布上光标的 y 位置）更大时检查碰撞比 420- 因为 420 是描述框图像的顶部“边界”。

然后，如果draggingImage 变量为真，并且光标的mouseY 值大于420，我想开始检查光标是否悬停在任何描述框上。第一个显示在 X 位置 80 和 200 之间，所以我正在检查 mouseX 是否大于 80 且小于 200。

如果是，则该函数应检查obj.shape.index 的值是否大于或等于0 且小于numImagesAssets 的值。如果是，控制台应该记录“正确”，如果不是，它应该记录“不正确”。

变量obj.shape.index 获取在我的图像数组中被点击的图像的位置（这个数组包含所有显示在画布上的可拖动图像）。如果that的值在某个范围之间，那么我知道图像属于第一个描述框，如果它在另一个范围之间，它属于下一个描述框，等等。

在此示例中，变量 numImagesAssets 的值为 10（在控制台中由我的代码中的 console.log 行显示）

在我的mousedown 函数中，我有一行：

console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index);

当我单击画布上的图像时，此 console.log 行显示变量属性 obj.shape.index 的值，例如，我刚刚单击画布上的一个可拖动图像，并打印了此行以下输出到控制台：

value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8

所以我知道我当时单击的图像位于图像数组中的第 8 位（我已经手动检查了几次，每次单击不同的图像，它始终显示正确的位置）。

现在，我遇到的问题是，当我实际将图像拖到正确的描述框上时，我收到一个控制台错误，上面写着“未定义 obj”，并且它在抱怨以下行：

if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){

但是，奇怪的是，如果我将图像拖到它不属于的描述框之一，我的if 语句中的else 子句被正确触发，并且“不正确”一词被打印到控制台....

我无法弄清楚为什么当我将图像拖动到正确的描述框时它不起作用，或者为什么它说在这种情况下没有定义“obj”，但很高兴使用“obj”作为if 语句中的“else”子句。

有人有什么想法吗？

编辑 19/03/2013 @ 12:00

好的，我稍微编辑了isHit 函数，添加了另一个console.log 行，它将在我的isHit 函数中显示obj.shape.index 的值。该函数现在看起来像这样：

function isHit(mouseX, mouseY, obj){
if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    if(mouseY > 420){
        console.log("Value of obj.shape.index = " +obj.shape.index);
        if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
            console.log("Correct");
        }else{
            console.log("Incorrect");
        }
    }
}
}

在调用 isHit 之前，我有以下控制台日志行：

console.log("obj.shape.index = " + obj.shape.index);

当我第一次单击图像时，此行显示 obj.shape.index 的值为 0（这是正确的 - 它是我的图像数组中的第一个图像），但是，当我随后在画布上拖动图像时，obj.shape.index 的值似乎随机增加......在某一时刻，控制台显示它是 23，然后是 25，然后当我最终将它拖到它的描述框时，控制台记录了以下行：

if dragging image == true statment is being called

显示isHit 函数正在被调用，接下来打印到控制台的是以下行：

Value of obj.shape.index = 34

知道为什么obj.shape.index 的值不断增加吗？它实际上不是数组中元素的位置吗？我确定是这样，因为当我单击其他图像之一时，它会显示它们在数组中的位置值，所以我不明白为什么当我在画布上移动图像时该值不断增加。 ..它在数组中的位置根本没有改变...

Answer 1

如果 obj.shape.index 在输入 isHit() 之前有效，则您可能遇到了范围问题。

试试这个 -- 将 obj 提供给 isHit：

// call isHit and also supply obj
console.log("obj = "+obj);                 // Test obj for validity just before calling isHit
var isItHit = isHit(mouseX, mouseY, obj);  // Then call isHit WITH obj

// and modify isHit to accept the obj
function isHit(mouseX,mouseY,obj) { ...