- ベストアンサー
金魚すくいゲームの作成
今、金魚すくいのゲームをJavaScriptを用いて作っているのですが 画像をクリックしたら関数を呼び出すタグは <A href='JavaScript:関数名(document.getElementById("inputFld"))'> <IMG SRC="画像"></A> というのはわかるのですが、金魚すくいなので ドラッグしたまま動かして画像の上でクリックを離すと関数を呼び出すタグというものを探しています。 わかるという方はどうか教えていただけないでしょうか？ また、ゲーム作りの参考になるサイトなども教えていただけるとありがたいです。 よろしくお願いします。
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
マウスのボタンを離す時に発生するイベントであればonMouseUpイベントがありますが、今回の例で行くと、画像をドラッグしてから離した時ですから、少し違うことになりますね。 たぶん、もうこの質問をされるまでに幾つか考えられる事を試していると思いますので、ココを悩んでいるのではないかと思われる項目を挙げてみます。 １．画像ドラッグ時にマウスアイコンが禁止マークになる。 ２．それでも何とかマウスをドラッグした時に画像を動かせるようにはなるが、マウスを離した時のタイミングが取得できない。 質問にも書かれてますが、問題になっているのはこの二点では無いかと思いますので、この二点についての解決法を以下に書きますね。 まず１の画像ドラッグ時にマウスアイコンが禁止マークになるという事についてですが、これはIMGタグの"onDrag"イベントでfalseを常に返すような作りをすれば、防ぐ事が出来ます。（以下に例を書きますのでココでは詳細には触れません） 次に２のマウスを離した時のタイミングが取得できない。という事についてですが、これは１で説明した"onDrag"で常にfalseを返すという事が出来て入れば、onMouseUpイベントが発生しますので、難なく取得することが出来ます。 今回での一番のポイントはonDragイベントにfalseを返すという事ですね。 ココさえ出来てしまえば、金魚すくいゲームも作れるのではないかと思います＾＾ それでは、画像をドラッグして動かす例を書きます。 以下の例では、青い円形の枠をドラッグすると動かすことができて、マウスのボタンを離すと「すくったよ！」というメッセージが表示されるというシンプルなプログラムです。 これを参考にしていただければ幸いです。 (※IE専用) ----------------------------------------------- <HTML> <HEAD> <TITLE>金魚すくい？</TITLE> <SCRIPT> <!-- var x, y; var boolMouseDown = false; var objMain; function setMainObj(obj) { objMain = obj; obj.ondrag = function() {return false;} } function mouseDown() { x = event.x - objMain.style.posLeft; y = event.y - objMain.style.posTop; boolMouseDown = true; } function mouseMove() { if( boolMouseDown ) { objMain.style.posLeft = event.x - x; objMain.style.posTop = event.y - y; } } function mouseUp() { boolMouseDown = false; alert("すくったよ！"); } document.onmousemove = mouseMove; //--> </SCRIPT> </HEAD> <BODY> <IMG SRC="http://www.iissa.co.jp/~fma/arata/sozai/ring/ring_blue.gif" ID="MainObj" STYLE="position:absolute; top:100px; left:100px;" onLoad = "setMainObj(this);" onMouseDown = "mouseDown();" onMouseUp = "mouseUp();" > </BODY> </HTML> -----------------------------------------------
お礼
どうもありがとうございます。参考になりました。 なんとか作れそうです。