0

HTML5 キャンバスに「ドラッグ可能な」画像が多数あります。キャンバスには多数の「説明ボックス」画像も表示されます。ユーザーは、ドラッグ可能な各画像を対応する説明ボックスにドラッグする必要があります。

キャンバスには現在 4 つの説明ボックスが表示されており、画像がボックスの 1 つにドラッグされたかどうかを検出するために使用している関数があります。画像がボックスにドラッグされるたびに、正しいボックスにドラッグされたかどうかを確認します。ドラッグされている場合は画像が非表示になりますが、そうでない場合は表示されたままになります。

ドラッグ可能なすべての画像は単一の配列に格納され、それらが正しいボックスにドラッグされているかどうかを確認する方法は、配列内の位置を使用することです。つまり、配列内の位置 0 ～ 9 の間にある場合、それらはボックス 1 に属します。10 ～ 19 位にある場合は、ボックス 2 に属します。

各ボックスに 'if' ステートメントを 1 つずつ追加しています。現在、最初の 2 つのボックスで意図したとおりに機能しています。現在、3 番目のボックスのコードを追加しようとしていますが、何らかの理由で、これを追加するとコードが壊れて、コンソールに ReferenceError が表示されます。

現在の関数は次のようになります。

function isHit(mouseX, mouseY, obj){
  console.log("isHit has been called from within if statement in mousemove function");
  console.log("draggingImage variable value = " +draggingImage);
  if(draggingImage == true){
    console.log("if dragging image == true statment is being called");
    console.log("Value of selectedImage = " + selectedImage);
    console.log("Value of selectedImageArrayLocation = " + selectedImageArrayLocation);
    if(mouseY > 250){
        //console.log("Value of obj.shape.index = " +obj.shape.index);
        if((mouseX > 80) && (mouseX < 200) && (selectedImageArrayLocation >= 0) && (selectedImageArrayLocation <= numImagesAssets)){
            console.log("Correct");
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is an asset because it is an item that can be bought or sold for cash.";
            selectedImage.hide();
            console.log("selectedImage has been removed: " + selectedImage);
        }else if((mouseX > 80) && (mouseX < 200) && (selectedImageArrayLocation > numImagesAssets)){
            console.log("Incorrect");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not an asset. It is not a physical item that would be bought or sold for cash. ";

        }else if((mouseX > 310) && (mouseX < 430) && (selectedImageArrayLocation > numImagesAssets) && (selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities)){
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is a liability because it is an item or service that the company is required to make regular payments for. ";
            selectedImage.hide();
            console.log("selectedImage has been removed: " + selectedImage);
        }else if((mouseX > 310) && (mouseX < 430) && ((selectedImageArrayLocation <= numImagesAssets) || (selectedImageArrayLocation > numImagesAssets + numImagesLiabilities))){
            console.log("Incorrect. This icon is not a liability.");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a liability. It is not an item or service that the company is required to make regular payments for. ";

        }else if((mouseX > 540) && (mouseX < 660) && ((selectedImageArrayLocation > numImagesAssets + numImagesLiabilities) && (selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities + numImagesIncome))){
            document.getElementById('tipsParagraph').innerHTML = "Correct! This is a source of income because it is a product or service which the company sells to its customers for cash. ";
            selectedImage.hide();
            console.log("Selected image has been removed: " + selectedImage);
        }/*else if((mouseX > 540) && (mouseX < 660) && ((selectedImageArrayLocation <= numImagesAssets + numImagesLiabilities) && (selectedImageArrayLocation > numImagesAssets + numImagesLiabilities + numImagesIncome))){
            console.log("Incorrect. This icon is not a source of income.");
            console.log("Selected image array location: " + selectedImageArrayLocation);
            document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a source of income.");
        } */
    }
  }
}

「if」ステートメントはペアになっているため、最初の 2 つは最初の説明ボックスに属し、2 番目の 2 つは 2 番目の説明ボックスに属します。

現時点では、最初の 'if' ステートメントだけが 3 番目の説明ボックスで機能しています... 前の 2 つの説明ボックスとまったく同じ方法で 2 番目の 'if' ステートメントを書きましたが、 'else if' 句のコメントを外し、ブラウザーでページを表示し、そのページに属さない説明ボックスに画像をドラッグすると、次のようなコンソール エラーが表示されます。

ReferenceError: isHit is not defined

そのエラーは次の行について不平を言っています:

var isItHit = isHit(mouseX, mouseY, obj);

これは私のmousemove関数にあり、他のすべての「if」ステートメントによっても呼び出されているため、今回呼び出されたときに中断することにした理由がわかりません...誰かアイデアはありますか?

4

1 に答える 1

0

ああ、わかりました、問題が何であるかを発見しました...document.getElementById最後のelse if句の行に、)多すぎました。この問題は、その行を次のように変更することで修正されました。

document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is not a source of income.";

)つまり、行末の を削除します。

于 2013-03-21T14:35:38.120 に答える