3

HTML5 キャンバスと JavaScript を使用して、単純な Web ベースのゲームを作成しています。現在、キャンバスにいくつかの画像が表示されており、それぞれがファーストフード レストランで見つかったアイテムを表しています。また、4 つの「説明ボックス」もあり、それぞれに資産、負債、収入、支出のいずれかのラベルが付けられています。

各画像はこれらの説明ボックスのいずれかに属しており、ユーザーは各画像を正しい説明ボックスにドラッグ アンド ドロップする必要があります。

ボックス画像を保持するJS変数の名前と、各アイテム画像のHTML altタグを使用して、ユーザーが画像を正しいボックスにドラッグしたかどうかを確認する予定です。つまり、img「chair」にはaltタグ「asset」があります"、アセットの説明ボックスには変数名 "assetsDescriptionBox" があるため、'if' ステートメントを使用して、ユーザーがドラッグしている画像がキャンバスのアセット説明ボックスと同じ領域にドラッグされたかどうかを検出します。その画像に alt タグ「asset」が付いていれば、その画像はキャンバスから消えます (そして、後でゲームで使用するために配列に追加されます)。

ただし、ユーザーがドラッグしている画像に alt タグ「asset」がなく、「liability」などの別のタグがある場合、キャンバス上で最初に描画された場所に再描画されます。

私がよくわからないのは、これを実装する方法です。私は衝突検出を見てきましたが、それを行う1つの方法は、JSメソッド getBoundingClientRect を使用して画像の「外側の制限」を取得し、2つの画像の外側の制限がまったく重なっているかどうかを確認することです、もしそうなら、何かをしてください。しかし、この方法の使い方がよくわからず、Google で簡単に検索しても特に役立つものは見つかりませんでした。

これがこれを行うための最良の方法であるかどうかは誰にも分かりますか? もしそうなら、getBoundingClientRect メソッドの使用方法の例を投稿できますか? または、そうでない場合、他にどのようにしますか？

編集 2012 年 12 月 17 日 @ 16:45

ちなみに、私は KineticJS ライブラリ (1 つまたは 2 つの変更を加えるためにローカルに保存したコピー) を使用して、ドラッグ アンド ドロップ機能を追加しているので、ライブラリに変更が必要なものがあると思います。衝突検出を追加するために追加します。

誰にもアイデアはありますか？

編集 2013/01/01 @ 12:35

こんにちは、あなたの答えに感謝します-それは確かに私がやりたいことのようです. 私はすでにキャンバス上にすべての画像を表示しています.4つの「静的」画像はキャンバス上でドラッグできません.これらは「ドロップゾーン」として使用したい画像であり、ドラッグして残りを落とします。あなたのコードが提供する機能を、私がすでに持っているものにどのように追加するのかよくわかりません。URL: users.aber.ac.uk/eef8/project/development/featureset2dev にアクセスすると、私が既に取り組んでいるものを見ることができます。

「ドロップゾーン」機能を説明ボックスに追加するには、それらを次の行でキャンバスに追加する必要があります

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60);

あなたの例で行ったように？

4

1 に答える 1

3

これを行う最善の方法は、各オブジェクトの X/Y 位置を幅と高さとともに追跡することだと思います。このような単純な長方形の衝突関数を使用すると、2 つのオブジェクトが取り込まれ、それらのバウンディング ボックスが重なるかどうかがチェックされます。

function collides(a, b)
{
    if (a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y) return true;
}

これを行う場合、純粋な JS を使用して alt タグをチェックする代わりに、イメージが 1 つのドロップ ゾーンのみをトリガーできるように、ドロップ ゾーン オブジェクトがアタッチされたオブジェクトを使用して設定する可能性があります。

function Image(x, y, w, h, i, dx, dy, dw, dh)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
    this.image = i;
    this.dropzone = new DropZone(dx, dy, dw, dh);
}

function DropZone(x, y, w, h)
{
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
}

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60);

次に、ドラッグした画像を移動したときにその座標を更新するループを作成します。キャンバス内に描画されたスプライトにクリック ハンドラを設定することはできず、キャンバス自体にのみ設定することに注意してください。マウス座標が描画されたスプライト内にあるかどうかを確認します。

もちろん、これを行う別の方法は、HTML5 ドラッグ アンド ドロップ API を使用することです。

http://www.html5rocks.com/en/tutorials/dnd/basics/

于 2012-12-27T23:28:25.637 に答える