- ベストアンサー
画像の座標位置取得方法とシューティングゲームの連射アルゴリズムについて
- javascriptの勉強を始めたばかりで、画像の座標位置取得方法がわからないので質問します。
- ブロック内の座標をevent.offsetで取得するための方法を教えてください。
- シューティングゲームの連射アルゴリズムがわからないので助けてください。
- 3104kita
- お礼率47% (95/202)
- JavaScript
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
れんしゃするこーどを、おうようして、てきもふやしてみたじょ！ もうこうなれば、あたりはんていは、まっぷつくってやるしかないかなぁ～。 きゃらくたーは、あにめーしょんGIFがたのしいかも。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Game</title> <style type="text/css"> #waku { width:480px; height:640px; border :2px #888 inset; position:relative;background-color:black} #waku img { position:absolute; } #TAMA, #TEKI { display:none; } </style> <body> <div id="waku"> <img src="./img/4.gif" width="20" height="20" alt="自機" id="JIKI"> <img src="./img/8.gif" width="20" height="20" alt="敵機" id="TEKI"> <img src="./img/1.gif" width="20" height="20" alt="玉" id="TAMA"> </div> <script type="text/Javascript"> var offset = getPosition(document.getElementById('waku')); var jiki = {x: 240, y: 600, e: document.getElementById('JIKI') }; var tama = {x: 0, y:0 , e: document.getElementById('TAMA') }; var FEND = true; var Pmouse = {x:240, y:600}; var LR = 4; var LASTE; var LASTF = 0; document.getElementById('waku').onmousemove = function (evt) { evt = evt ? evt: window.event; Pmouse.x = evt.clientX - offset.x; Pmouse.y = evt.clientY - offset.y; } document.getElementById('waku').onclick = function (evt) { start_tama();return false; // return evt ? evt.preventDefault(): event.returnValue = false; }; start = function LOOP () { //ここに何か書く？ FEND && setTimeout( LOOP, 10); }; start_teki = function (x, y) { var e = document.getElementById('TEKI').cloneNode(false); var memory_down = LR; e.id = null; document.getElementById('waku').appendChild(e); e.style.display = 'inline'; LASTE = e; var P = function LOOP1 () { if (memory_down != LR) { memory_down = LR; y += 20; } else { x += memory_down; e.style.top = y + 'px'; e.style.left = x + 'px'; if (x < 0 || x > 460) LASTF = 1; } if (e == LASTE && LASTF == 1) LASTF = 0, LR*=-1; FEND = FEND && y < 600; FEND && setTimeout(LOOP1, 80); }; P(); }; start_jiki = function LOOP2 () { jiki.x += (Pmouse.x < jiki.x -8) * -4 + (Pmouse.x > jiki.x + 8) *4; jiki.e.style.left = jiki.x + 'px'; jiki.e.style.top = jiki.y + 'px'; FEND && setTimeout(LOOP2, 30); }; start_tama = function () { var x = jiki.x; var y = jiki.y; var e = document.getElementById('TAMA').cloneNode(false); e.id = null; document.getElementById('waku').appendChild(e); e.style.display = 'inline'; var P = function LOOP3 () { y-= 8; e.style.left = x + 'px'; e.style.top = y + 'px'; if (y>4) setTimeout(LOOP3, 20); else { document.getElementById('waku').removeChild(e); } }; P(); }; function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return {x: x, y:y}; } start(); for(var i=70; i<200; i+=30) { for(var j=10; j<300; j+=30) { start_teki(j,i); } } start_jiki(); </script>
補足
まずはno2の回答から自分のものにしたいと思います！ 回答を締め切るときには必ず良回答をつけさせていただきたいと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
どっかにかいたことがあったんだけど、えほんのなかから みつけられなかった。なのでかいたじょ。ばぶ。 こんな、ぐろーばるへんすうのつかいかただと、みんなにわらわれるか？！ きもちよく、れんしゃしてくれ！ もちろん、あたりはんてい、などない！ ぜんかくはくうはくは、ていきとうになおしてね！ けんとうをいのる。 ばぶぅ～！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Game</title> <style type="text/css"> #waku { width:480px; height:640px; border :2px #888 inset; position:relative;} #waku img { position:absolute; } #TAMA { display:none; } </style> <body> <div id="waku"> <img src="jiki.png" width="20" height="20" alt="自機" id="JIKI"> <img src="teki.png" width="20" height="20" alt="敵機" id="TEKI"> <img src="tama0.png" width="20" height="20" alt="玉" id="TAMA"> </div> <script type="text/Javascript"> var offset = getPosition(document.getElementById('waku')); var teki = {x: 0, y: 0, m: 4, e: document.getElementById('TEKI') }; var jiki = {x: 240, y: 600, e: document.getElementById('JIKI') }; var tama = {x: 0, y:0 , e: document.getElementById('TAMA') }; var FEND = true; var Pmouse = {x:240, y:600}; document.getElementById('waku').onmousemove = function (evt) { evt = evt ? evt: window.event; Pmouse.x = evt.clientX - offset.x; Pmouse.y = evt.clientY - offset.y; } document.getElementById('waku').onclick = function (evt) { start_tama(); return evt ? evt.preventDefault(): event.returnValue = false; }; start = function LOOP () { //ここに何か書く？ FEND && setTimeout( LOOP, 10); }; start_teki = function LOOP1 () { teki.x += teki.m; if (teki.x < 0 || teki.x > 460) teki.m *=-1, teki.y += 20; teki.e.style.top = teki.y + 'px'; teki.e.style.left = teki.x + 'px'; FEND = teki.y < 600; FEND && setTimeout(LOOP1, 20); }; start_jiki = function LOOP2 () { jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4; jiki.e.style.left = jiki.x + 'px'; jiki.e.style.top = jiki.y + 'px'; FEND && setTimeout(LOOP2, 60); }; start_tama = function () { var x = jiki.x; var y = jiki.y; var e = document.getElementById('TAMA').cloneNode(false); e.id = null; e.style.display = 'inline'; document.getElementById('waku').appendChild(e); var P = function LOOP3 () { y-= 8; e.style.left = x + 'px'; e.style.top = y + 'px'; if (y>4) setTimeout(LOOP3, 20); else { document.getElementById('waku').removeChild(e); } }; P(); }; function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return {x: x, y:y}; } start(); start_teki(); start_jiki(); </script>
補足
具体的には… var FEND = true; var Pmouse = {x:240, y:600}; と、 document.getElementById('waku').onmousemove = function (evt) { evt = evt ? evt: window.event; //←この関数の中では特にここ Pmouse.x = evt.clientX - offset.x; Pmouse.y = evt.clientY - offset.y; } と、 FEND = teki.y < 600; FEND && setTimeout(LOOP1, 20); //これはclearTimeoutはする必要はないのでしょうか？ と、 jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4; //(Pmouse.x < jiki.x -8 ) * -4も、(Pmouse.x > jiki.x +8) *4も、どういう演算なのでしょうか？（）の中は、比較演算子なのに、それに-4や+4をかけるということがよく理解できません…。 と、 FEND && setTimeout(LOOP2, 60); //FENDにどういう意味があるのかもわかりません。第二引数の数字が敵か自機かなどによって数字が違うのもどうしてでしょうか？ と、 cloneNode(false); と、 appendChild(e); と、 if (y>4) setTimeout(LOOP3, 20); else { document.getElementById('waku').removeChild(e); } //自分でしらべたところ、appendChildとcloneNodeはわかったのですが(なんとなく…)、removeChildがどういうことがよくわかりませんでした。 function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return {x: x, y:y}; } です… こんなに沢山わかりません…。 もしご迷惑でなければご教授お願いできますでしょうか…？
- babu_baboo
- ベストアンサー率51% (268/525)
このままだと、けっしておぎょうぎがよくないじょ。 ちゃんとできたら、おもしろそうだね。がんばれ～！ ｙのあたいが、ちいさいままだったじょ。 たいまーも、いちどくりあーする・・・。 せっといんたーばるに、もじれつでかんすうしきをわたすのは、 ふるいというか、こてんというか、かいしゃくにじかんかかるじょ！ げーむは、すぴーどが、いのち？ <script language="JavaScript"><!-- var y = 450; var interval = 20; var timerId; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); clearInterval(timerId); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="y=450;timerId = setInterval(moveBall,1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/>
補足
何度もありがとうございます！返事が遅くなってしまいすみません。 NO2の回答をずっと考えてました。まだまだ初心者なのでNO2の時点でちょっと難解です…;
関連するQ&A
- NN系でマウス座標取得
お世話になります。 javascriptにてマウス座標を取得するファンクションを作成したいと 考えております。 そこで以下のソースでも取得可能だと思うのですが NN系でイベントが走らない場合でもマウス座標を 取得するファンクションを作成したいです。 すごく簡単なのかもしれませんが、ご教授宜しくお願い致します。 function getMouseY(e){ if(document.all) return document.body.scrollTop+event.clientY else if(document.layers||document.getElementById) return e.pageY }
- 締切済み
- JavaScript
- ＩＥのイベントでのウインドウ位置の取得
以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、ＩＥの動作がまだ駄目なようなのです。 ＩＥのイベントが発生した時のマウス座標の取得は、Javascriptで、 function OnScreenHelp(x,y){ if(document.all) { /* IEでの処理 */ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* IE以外の処理 */ document.getElementById(strID).style.left = x + 15 + "px"; document.getElementById(strID).style.top = y + 0 + "px"; } } のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにＮＮ系の記述になっているため、ＩＥではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、 event.xやevent.yの所の記述がまずいのかな？と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。 よろしくお願い致します。
- 締切済み
- JavaScript
- オブジェクトの座標位置の取得
お世話になります。 苦労されている方が多いの検索をすると多くかかりますが、やはりわかりません。 それで、質問させてもらいました。 何とかよろしくお願いいたします。 <body> あああああああああああ <div id="2"> いいいいいいいいいい <div id="3"> ううううううううううううう </div> いいいいいいいい </div> </body> の様な場合、内側の<div>のy座標、x座標の絶対座標－<body>からの座標 を取得することがどうもできません。 Div3Obj=document.getElementById('3'); alert('Div3Obj.offsetTop='+Div3Obj.offsetTop); とすると、id='2'の<div>からの相対位置を取得してしまいます。 <body>からの位置を取得できないものでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 初歩的なソースで質問です
[スタート] をクリックするとアラートの"消します"が出現し、 OKするとAA.gifが消え、 再度[スタート] をクリックするとアラートの"出します"が出現し、 OKするとAA.gifが表示されるという 一連の流れを繰り返すソースを作りたいです。 現状では[スタート] とAA.gifが表示されていて、 "消します"のアラートをOKするとエラーになってAA.gifが消えません。 document.getelementbyid( lyr ).style.visibility = "hidden"; （9行目行）に対して、 「オブジェクトでサポートされていないプロパティまたはメソッドです」とエラー表示されます。 どのように修正したらいいのか教えてください。 ソースを以下に貼っておきます。 <html> <head> <script type="text/javascript"> //visf=表示フラグ（表示ならtrue、非表示ならfalse） function lyrsetvisibility( lyr , visf ) { if ( visf ) { document.getelementbyid( lyr ).style.visibility = "visible"; } else { document.getelementbyid( lyr ).style.visibility = "hidden"; } } //実行 function start() { alert("消します"); lyrsetvisibility( "lyrball" , false ); alert("出します"); lyrsetvisibility( "lyrball" , true ); } </script> </head> <body> <div id="lyrball" style="position:absolute; left:128px; top:128px;"> <img src="AA.gif"> </div> <a href="javascript:start()"> [スタート] </a> </body> </html>
- ベストアンサー
- JavaScript
- Firefoxでマウス座標の取得
クリッカブルマップのマウスオーバー時にdivを表示させようと、以下のようなコードを書きました。 これだとFirefoxに対応していないのですが、どうやったら同じように座標を取得できるのかわかりません。 どなたかご教示をお願いします。 <script type="text/javascript" language="JavaScript"> <!-- function up(text){ document.getElementById('key').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.offsetX+150; set.style.posTop =document.body.scrollLeft+window.event.offsetY+250; document.all('set').style.display="block"; } function del(){ document.all('set').style.display="none"; } //--> </script>
- 締切済み
- JavaScript
- マウスでスクロールした値を取得できない
IE6.02を使っています。 マウスの座標を追いかけるプログラムで、 ブラウザを縦方向にスクロールしてもその座標を取得したいのですが、 なぜかdocument.body.scrollTopが0のままで追いかけてきませんでした。 次のどこがいけないのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>sample</title> <script type="text/javascript"><!-- document.onmousemove=function(e){ if(document.all){ Myimg.style.pixelLeft=document.body.scrollLeft+event.x+15; Myimg.style.pixelTop=document.body.scrollTop+event.y+15; } else if(document.getElementById){ document.getElementById("Myimg").style.left=e.pageX+15; document.getElementById("Myimg").style.top=e.pageY+15; } } --></script> </head> <body> <span id="Myimg" style="position:absolute"><img src="gazou.gif"></span> a<br>←スクロールバーがでるように改行していく a<br> a<br> a<br> a<br> ・ ・ ・ </body> </html>
- ベストアンサー
- JavaScript
- 画像の座標を求めて数値として扱えない(pxが追加されてしまう)
document.images[0].style.leftとdocument.images[0].style.topで座標を得ようとするとピクセルの単位pxが追加された状態で値が返されるため数値としての使用ができません、どうしたらよいのでしょうか？ 目的は document.images[0].style.left+document.images[0].width/2; document.images[0].style.top+document.images[0].height/2; で画像の中心の座標を求めたいのですが・・・こうすると 120px25のような値が返されてしまいます
- 締切済み
- JavaScript
- スクロールバーの位置に合わせて画像を移動
縦のスクロールバーの位置に合わせて画像を移動したいです。 マウスの位置に合わせて移動させる事は可能なのですが、すぐ動いたしまうので。。 一応、マウスの位置に合わせて移動は下記のようにしています（元々、縦横方向の移動を紹介しているページがあったのでそれを拝借して縦方向の移動だけにしています。） <script language="JavaScript"> <!-- mov_value=3; y_add=0; y_cur=0; y_pos=0; y_dotti=0; my_time=0; pos=0; function judge_pos(e){ if(document.layers){y_pos=e.pageY;} if(document.all){ y_pos=document.body.scrollTop+event.clientY; } if(y_cur<=y_pos)y_dotti=1; else y_dotti=0; disp(); } function disp(){ if(pos==0){pos=1; y_cur=y_pos;} if(y_dotti==1 && y_cur<=y_pos+y_add)y_cur+=mov_value; else if(y_dotti==0 && y_cur>=y_pos+y_add)y_cur-=mov_value; if(document.layers){ document.layers["lay0"].moveTo(y_cur); document.layers["lay0"].visibility='show'; } if(document.all){ document.all("lay0").style.pixelTop=y_cur; document.all("lay0").style.visibility='visible'; } if(y_dotti==1 && y_cur<=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else if(y_dotti==0 && y_cur>=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else { y_cur=y_pos; } return false; } if(document.layers)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=judge_pos; //--> </script>
- 締切済み
- JavaScript
- popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse のボーダーがある場合に、 初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。 そこで非表示にするためのjavascript をonloadで動かしているのですが、 データ量の大きいページだと、表示された後に消えるのが 見えてしまい不細工です。 最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script> <!-- function PopupOn(Msg){ if(document.all){ MyMsg = document.all(Msg).style; MyMsg.visibility = "visible"; } else if(document.layers){ MyMsg = document.layers[Msg]; MyMsg.visibility = "show"; } else if(document.getElementById){ MyMsg = document.getElementById(Msg).style; MyMsg.visibility = "visible"; } } function PopupOff(Msg){ if(document.all) document.all(Msg).style.visibility = "hidden"; else if(document.layers) document.layers[Msg].visibility = "hide"; else if(document.getElementById) document.getElementById(Msg).style.visibility = "hidden"; } //--> </script> <style> <!-- #poplink {position:absolute;left:0px; top:30px; z-index:9; visibility:hidden;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
- 座標を取得して、後でその位置までスクロールさせる？
「詳細を表示」ボタンをクリックして非表示にしていたレイヤーを表示し、 表示されたレイヤー内の「詳細を閉じる」をクリックして非表示にするものを作りました。 レイヤーを非表示にした時に、ページのスクロール位置を 「詳細を表示」ボタンをクリックした時の位置に戻したいのですが どのようにすればできるのでしょうか。 （下のソースには関係する部分だけ抜き出してますが、実際にはページ内にいろんな情報が載っていて、非表示にした時に中途半端な位置にスクロールされた状態になってしまうと元いた場所がわからなくなってしまうので、元の場所に戻したいのです・・） 「詳細を表示」ボタンをクリックした時のY座標を取得して、詳細を閉じた時にそのY座標まで「詳細を表示」ボタンがくるようにスクロールさせる？？？とか考えて、それっぽいものを書き加えたりしてみたのですが、知識がなさすぎて全く上手くいきません…。 どなたかご教授くださいませんでしょうか。 よろしくお願いいたします。 <script type="text/javascript"> <!-- function Hyo(id, visible) { var style = (visible ? 'block' : 'none'); document.getElementById(id).style.display = style; } // --> </script> <a href="#" onclick="Hyo('cont1', 1)"><img src="images/button.gif" alt="詳細を表示" width="45" height="20" border="0" /></a> <div id="cont1"> 文章が入る（～中略～）文章が入る <a href="#event" onclick="Hyo('cont1', 0)">詳細を閉じる</a> </div>
- ベストアンサー
- JavaScript
- MFC-J939DNはMFC-J860と同じ機能を持っているのか気になります。
- 質問者はMFC-J939DNの電話線接続がMFC-J860と同じであるか知りたいと思っています。
- お使いの環境については、Windowsを使用し、無線LAN接続をしており、Wi-Fiルーターの機種名は光通信です。
お礼
丁寧にありがとうございます！この解説を参考に自分の力でも組めるようにがんばってみます！あまり何度も質問してしまっても迷惑だと思うので、またなにか解決できない疑問にぶちあたったら新しい質問を投稿することにします。 本当にありがとうございました！感謝感激です！ ポイントは1000000ポイントくらいあげたいところですけど…gooがそんなに沢山良回答をつけさせてくれません…！ どうもありがとうございました！