当两个div使用jQuery / JS“相遇”时如何调用函数?

时间:2011-07-04 13:16:01

标签: jquery html

下面是一个代码,可以将大蓝块移动到屏幕上。此外,在屏幕上有一个小红框“炸弹”。当这两个人最终相遇时,我怎么能调用一个函数或者任何东西,比如我需要写一些行或者在发生这种情况时包含一个php文件。

谢谢

可以在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>

2 个答案:

答案 0 :(得分:2)

我刚刚合并了你和@Šime的代码..

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

答案 1 :(得分:0)

您要研究的一个很好的搜索词是“碰撞检测”

快速搜索有一个名为“gameQuery”的jQuery游戏引擎可能很有用。

http://gamequery.onaluf.org/