2011-07-04 3 views
1

は、大きな青いブロックを画面内に移動させるコードです。また、画面には小さな赤い箱「爆弾」があります。それらの2つが最終的に出会うとき、どうやって関数や何かを呼び出すことができます。私はいくつかの行を書くか、PHPファイルをインクルードする必要があります。 jQuery/JSを使用して2つのdivが「会う」ときに関数を呼び出す方法は?

あなたは

Aコードはここに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> 
+1

待ちを見て、それが '私のデモです:)' –

+0

私はstackoverflowのを通してそれを発見し、私はと思いました私が欲しいものの素晴らしい例です! – EnexoOnoma

+0

私はあなたの問題をちょっと後で見ていきます... –

答えて

2

私はちょうどあなたとサイムのコード@をマージ..

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

+0

偉大な、ありがとう!私は、爆弾の位置(左の意味:200、上:100、右:300)を持って、この位置に「移動して」停止するdivを作成する方法があるかどうか疑問に思っていました。 – EnexoOnoma

+0

@Sampas、もう少し説明できますか?あなたがしたいことを私が確信しているからです。爆弾を動かすか? (いつ移動を開始すべきか、それはどこに行かなければならないのですか?) –

+0

すみません、それをより良く説明しましょう。私たちが知っているのは、爆弾の位置です。私たちがやっていることは、ブロックが爆弾に当たったときに衝突メッセージを表示することです。次のステップでは、ブロックを自動的にランダムに移動させて爆弾を見つけるまで、コードを編集しようとします。私がエリアを通って異なる方向に移動する2つのブロックを作成する場合、そこに停止するために爆弾を衝突させるブロックと、爆弾の位置に移動する非衝突ブロックがありますか? – EnexoOnoma

0

あなたが興味のある「gameQuery」と呼ばれるjQueryのゲームエンジンがあるクイック検索を行っている「衝突検出」

に研究するための優れた検索用語。

http://gamequery.onaluf.org/