如何使用jQuery/JS在兩個div「相遇」時調用函數？

下面是一個代碼，通過屏幕移動大藍色塊。另外，在屏幕上還有一個小紅盒子「炸彈」。當這兩個人終於見面時，我該如何調用一個函數或任何東西，比如我需要編寫一些行或在發生這種情況時包含一個php文件。如何使用jQuery/JS在兩個div「相遇」時調用函數？

謝謝

一個碰撞的代碼可以在這裏找到http://vidasp.net/tinydemos/javascript-detect-overlapping.html，但如何在運動的物體？

<html> 
<head> 
    <style> 
.block { 
    position:absolute; 
    background-color:#abc; 
    left:50px; 
    width:90px; 
    height:90px; 
    margin:5px; 
} 
.bomb { 
    position:absolute; 
    background-color:red; 
    left:550px; 
    width:40px; 
    height:40px; 
    margin:5px; 
} 
</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
    <button id="left">left</button> <button id="right">right</button> <button id="up">up</button> <button id="down">down</button> 

<div class="block"></div><div class="bomb"></div> 

<script> 
$("#right").click(function(){ 
    $(".block").animate({"left": "+=50px"}, "fast"); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"left": "-=50px"}, "fast"); 
}); 

$("#up").click(function(){ 
    $(".block").animate({"top": "-=50px"}, "fast"); 
}); 

$("#down").click(function(){ 
    $(".block").animate({"top": "+=50px"}, "fast"); 
}); 

</script> 

</body> 
</html>

來源

2011-07-04 EnexoOnoma

等待，這就是我的演示'：）' –

我發現它通過計算器，我還以爲是我想要的一個很好的例子！ – EnexoOnoma

稍後我會研究您的問題... –

我只是合併您和@ SIME的代碼..

看看http://jsfiddle.net/gaby/Z25aM/

來源

2011-07-04 13:49:41

太好了，謝謝！我想知道是否有辦法通過讓炸彈的位置（意思是左邊：200，上方：100，右邊：300）創建一個可以「移動」到這個位置並停止的div。 – EnexoOnoma

@桑帕斯，你能解釋一下嗎，因爲我不知道我得到了你想要做的事情。你想炸彈移動嗎？（它應該什麼時候開始移動，它應該去哪裏？） –

對不起，讓我更好地解釋一下。我們知道的是炸彈的位置。我們所做的是在.block碰到炸彈時顯示碰撞消息。在接下來的步驟中，我將嘗試編輯代碼，以便該區塊在區域中自動隨機移動，直至找到炸彈。如果我創建了兩個在不同方向上穿過這個區域的區塊，有沒有辦法讓這個區塊碰撞炸彈停在那裏，而非碰撞區塊會移動到炸彈所在的位置？ – EnexoOnoma

爲您研成是「碰撞檢測」

做一個快速搜索有一個名爲「gameQuery」 jQuery的遊戲引擎可能會感興趣一個好的搜索項。

http://gamequery.onaluf.org/

來源

2011-07-04 13:18:09

如何使用jQuery/JS在兩個div「相遇」時調用函數？

回答

相關問題