お世話になります。 javascriptを使用して、で作られた複数のオブジェクトが重なったかどうかを判定したいのです。果たして、そんなことは可能なのでしょうか。 fucntion aaa(){ var bbb = document.getElementById("block1"); var move= parseFloat(bbb.style.left); bbb.style.left = (move+10)+"px"; } というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました！」という感じで表示することはできないのでしょうか。javascript オブジェクト重なりとかで検索しても、目的のものが出てこなかったので… どうぞ、よろしくお願い致します。

javascriptでオブジェクトの重なりを判定

解決済

質問者：teckiko
質問日時：2012/07/05 10:12
回答数：2件

お世話になります。

javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。
果たして、そんなことは可能なのでしょうか。

<body>

<div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div>
<div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div>
<div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div>
<div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div>
<div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div>
<div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div>
</body>
<script>
fucntion aaa(){
var bbb = document.getElementById("block1");
var move= parseFloat(bbb.style.left);
bbb.style.left = (move+10)+"px";
}
</script>

というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました！」という感じで表示することはできないのでしょうか。javascript オブジェクト重なり　とかで検索しても、目的のものが出てこなかったので…

どうぞ、よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： CyberCypher
回答日時：2012/07/05 10:53

JavaScriptでですか？……ｊQueryの方がいいとは思いますが……

出来ないことはないとは思います

未検証の回答なので以下注意して検証して下さい

おおまかな流れとしては
１．body内のオブジェクトを全て取得する
２．オブジェクトから取得する情報は位置情報(x,y)と縦横サイズ(w,h)
３．配列に放り込み、新しい要素を取得する度に既にある要素の
x <= newX && (x+w) >= newX && y <= newY && (y+h) >= newY
を比較して重なりを検出する

// BODY エレメントを取得
var element = document.body;
for(i=0;i <element.length;i++){
x = element.elements[i].offsetLeft;
y = element.elements[i].offsetTop;
w = element.elements[i].offsetWidth;
h = element.elements[i].offsetHeight;
}

後はトリガーはどうするのかが分からないのですが
クリック時とかならまだいいのですが、随時更新は流石にｊQueryを勉強したほうが良いと思います

- 0
- 件

通報する

この回答へのお礼

CyberCypher 様

お返事ありがとうございます！

jqueryを使用することができないので、昨日から頭をひねっておりまして、すごく助かります！

なるほど、一度配列に保管しておくのですね。その方法でさっそく実験に取り掛かりたいと思います！

ありがとうございました。

通報する

お礼日時：2012/07/05 11:38

No.2

回答者： yambejp
回答日時：2012/07/05 11:03

typoがひどすぎ、質問アップする前に一度見直した方がよい。

＞重なった瞬間

文法的におかしいのでなんとも言えませんが、
block1を右に10pxずつ移動していって重なりをチェックしたいということでしょうか？
見る限りblock1を右にどれだけ移動しても重ならないように見えますが？
それともマージンの数値が一致したらアラートをだしたいだけなのでしょうか？

- 0
- 件

通報する

この回答へのお礼

汚い書き方をお許しください。
例として抜粋したものを書いたもので、申し訳ありません。
typeのところは私の記述ミスでした。

>block1を右に10pxずつ移動していって重なりをチェックしたいということでしょうか？
>見る限りblock1を右にどれだけ移動しても重ならないように見えますが？
>それともマージンの数値が一致したらアラートをだしたいだけなのでしょうか？

こちらの方法で問題ありません。

通報する

お礼日時：2012/07/05 11:36

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！