- ベストアンサー
金魚すくいゲームの作成
今、金魚すくいのゲームを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> -----------------------------------------------
関連するQ&A
- 金魚すくいゲーム
金魚すくいのゲームを作っています。金魚を２匹用意します。マウスを紙の画像にして、どこでもついてくるようにする点。金魚をすくうときに紙の画像が金魚の下に潜るとき。また、金魚をつかむときの座標の取得。金魚をつかんでから、おわんにもっていくとき、紙の画像のマウスと金魚画像をつかんでお椀に移動して入れるというプログラミングです。mousedownとmousemoveなどを活かしてどのようにしたら良いですか？
- ベストアンサー
- JavaScript
- JavaScriptでエレメントのIDを取得
JavaScriptで、エレメントのIDを取得する方法がわからず困っています。 [画像]ここをクリック [画像]ここをクリック 上記が画面配置のイメージなのですが、「ここをクリック」の文字をクリックした時に、そのクリックされた<a>タグのIDを取得したいのです。 以下が試行錯誤したソースの一部です。 [html] <img src="./test_01.gif" name="testImg01"> <a href="javascript" id="test_01" onclick="getID(this);">ここをクリック</> <img src="./test_02.gif" name="testImg02"> <a href="javascript" id="test_02" onclick="getID(this);">ここをクリック</a> [JavaScript] function getID(element) { var id = document.getElementById(id); alert(id); } 上記コードで得られたのは「null」という値でした。 色々検索してはいるのですが、思うように値を取得できません。 どうか知恵をお貸しください。
- ベストアンサー
- JavaScript
- テキストエリアに画像ＵＲＬを貼り付ける入力支援
簡単なCGI日記を作成してますが、この入力フォームのテキストエリアに手動で画像ＵＲＬのタグを入れるのが手間なので、 ↓ サーバーにある画像一覧が別窓（違うファイルから）で表示されていて（実際には画像表示ですが・・・） <a href="sample1.gif"><img src="sample1.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> ↓ 画像をクリックするとＣＧＩのテキストエリア内に自動で <a href="sample1.gif"><img src="sample1.gif"></a>とタグを挿入するjavascriptってサンプルになるようなものはないでしょうか？
- 締切済み
- JavaScript
- クリックするとするするとスクロールさせたい(JS)
Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }
- ベストアンサー
- JavaScript
- onClickへの代入について
以前onClicｋへの代入方法についてお聞きしましたが、 また壁にぶつかっておりますので教えてください。 バナーのクリック数をカウントするために、GoogleAnalyticsの以下の関数をaタグのonClickに追加して利用しています。 <a href="xxx.html" onClick="javascript:urchinTracker(\'/test/test\');"><img src="xxx.gif"></a> これは問題ないのですが、 Javascriptで画像を切り替えるため以下のような構成でテストしたところ、 src、href、targetは正常に代入されるのですが、 onClickのみjavascript:urchinTracker(\'/test/test\');のままで、/test/aaaが代入されません。 また、元のHTMLソースからonClickタグ自体を削除すると、onClickタグそのものが代入されません。※Firebugで確認しています。 Javascritpt（sample_chg.js）部分 myImage = new Array(4); myImageName = 0; myImageLink = 1; myImageTarget = 2; myImageOnclick = 3; myImage[myImageName] = "dummy01.gif"; myImage[myImageLink] = "http://ｘｘｘｘｘ.com/"; myImage[myImageTarget] = "_blank"; myImage[myImageOnclick] = "javascript:urchinTracker(\"/test/aaa\");"; function myChange(){ document.getElementById("myFormImg").src = myImage[myImageName]; document.getElementById("myLink").href =myImage[myImageLink]; document.getElementById("myLink").target =myImage[myImageTarget]; document.getElementById("myLink").onClick =myImage[myImageOnclick]; } HTML部分 <a id="myLink"onClick="javascript:urchinTracker(\'/test/test\');"><img id="myFormImg"></a> <script language="javascript" type="text/javascript" src="/js/sample_chg.js"></script> <script language="javascript" type="text/javascript"> myChange(); </script> 以前文字列については関数にして代入せよと教えていただいたのですが、 このような場合はどうすればよいのでしょうか。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- スワップイメージとロールオーバーの組み合わせで…
上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>
- ベストアンサー
- JavaScript
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
- 画像をクリックするとリンクを取得
<a href=""><img src="" alt=""></a> こういうタグの場合 画像をクリックしただけで、その画像に貼られている リンクが、コピーできるっという jsってないでしょうか？
- ベストアンサー
- JavaScript
- changeimgの際のalt設定
head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
お礼
どうもありがとうございます。参考になりました。 なんとか作れそうです。