ウォッチ
javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…）
マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい）
例えば…
function lyrGetTop(lyr){
return( parseInt( document.getElementById(lyr).style.pixelTop ) );
}
で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。
どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？
それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
y = 450;
interval = 20;
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");
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="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;"/>
</body>
</html>
これだと、連射どころか、二回目のクリックに反応すらしないんです…。
どうかご教授お願いします。
No.4ベストアンサー
- 回答日時：
かいせつかぁ～。
へんなかきかただものね～。
＞var FEND = true;
この変数は、ゲームのループを終了させるために使っている。
たとえば
if (FEND == true) { setTimeout(LOOP,10) }
と書けばよいのだけど
if (FEND) setTimeout(LOOP,10);
これも同じ。さらに
FEND && setTimeout( LOOP, 10);
これも同じ。
＞var Pmouse = {x:240, y:600};
は、マウスの座標の初期値として利用している
例えば、
Pmouse = [240,600];
とすると、600の値を取得するのに
Pmouse[1]としなければならない。これだと可読性が悪い！
（ってこんなコードを書いてるのに可読性とはおかしいね）
Pmouse.y とすると 600が取得できる
＞document.getElementById('waku').onmousemove = function (evt) {
＞evt = evt ? evt: window.event;
これは、このマウスオーバーしたときのイベントを取得するため
残念ながら、IEではevtにイベントが代入されない。なので
evt が何も無かったら window.event を代入している。
三項演算子っていったかな？
evt = evt ? evt: window.event;
を普通に書くと
if (evt == undefined) evt = window.event; else evt = evt;
FEND = teki.y < 600;
は、teki.y < 600 を評価して、条件が満たされれば、trueがFENDに代入される
つまり敵のY座標が６００より小さければ、ゲームを継続する。
これも普通に書けば、
if (teki<600) { FEND = true; }
と同じ。
＞FEND && setTimeout(LOOP1, 20); //これはclearTimeoutはする必要はないのでしょうか？
setTimeoutは一度しか使われないので、実行されればそれで終わり。
＞jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4;
これを普通に書けば、
if (Pmouse.x < (jiki.x - 8)) jiki.x = jiki.x -4;
if (Pmouse.x > (jiki.x + 8)) jiki.x = jiki.x +4;
となる。
例えば
a = (何かの条件式) * 4;
の場合、条件が成立すると、trueなんだけど、掛け算するときは、数値の１と解釈できる！と
覚えておけばいいのかも？
ちなみに±８は、マウスのマージンね。止めたいときに、判定を甘くしてる。
＞FEND && setTimeout(LOOP2, 60);
＞第二引数の数字が敵か自機かなどによって数字が違うのもどうしてでしょうか？
ゲームを作るうえで、キャラクターの動き、つまりバランスは非常に大事。
第二引数で、キャラクターの速度の調節が簡単にできる。
早く動かそうとして、４ドットを８ドットづつにするのは、好きじゃない。
＞cloneNode(false);
今回は、画像の'TAMA'に利用しているけど、これは画面上に何個出現するかわからない
玉にたいして、画像をたくさん用意するより、１つ隠しておいて、それをコピーして
使っている。appendChildは、コピーしたものを出現させる！という意味かな？
appendChildすると
HTML上は
<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">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
</div>
なふうになっていると思う。
＞if (y>4) setTimeout(LOOP3, 20); else {
＞document.getElementById('waku').removeChild(e);
＞}//自分でしらべたところ、appendChildとcloneNodeはわかったのですが(なんとなく…)、
＞removeChildがどういうことがよくわかりませんでした。
これは、玉が一番上までいったら、必要ないので消している。と考えてね。
HTML内から外す。という意味で。
function getPosition(node) {
var x = 0, y = x;
do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent)
return {x: x, y:y};
}
は、あなたが求めていた
＞画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい）
の、回答に近いものです。nodeで指定された要素、つまり今回はid="waku"が、ページ上どこの座標にあるか求めるために
あります。
これで得られた値を、基準としてマウスの座標と引き算すれば、waku内でのマウスの位置がわかります
さて、これでしつもんにぜんぶこたえたかな？ ばぶばぶばぶぅ～！
-
-
- 0
- 件
-
丁寧にありがとうございます！この解説を参考に自分の力でも組めるようにがんばってみます！あまり何度も質問してしまっても迷惑だと思うので、またなにか解決できない疑問にぶちあたったら新しい質問を投稿することにします。
本当にありがとうございました！感謝感激です！
ポイントは1000000ポイントくらいあげたいところですけど…gooがそんなに沢山良回答をつけさせてくれません…！
どうもありがとうございました！
No.6
- 回答日時：
こーどのみやすさかだとか、そくどだとか、いろいろかんがえると
おもしろいよ！これは、おくがふか～い。
ぷろぐらむをかくことで、じぶんが、べんきょうしているからね～。
くろーじゃーだとか、おぶじぇくとしこう、だとか
まだまだいっぱいあるじょ！
http://okwave.jp/qa5001540.html
のかいとうも、なにかのさんこうになるかも？
かうんたーなのだけど、すうじがすろっとましーんのようにかいてんして
へんかするじょ！
げーむのとくてんなんかにつかえるかもよ！
やっぱりさいごは、ばぶぅ～！
そうそう、ぽいんとは１００００ぽいんとくらいでいいじょ！^^;
-
-
- 0
- 件
-
No.5
- 回答日時：
解説の訂正
if (teki<600) { FEND = true; }
は、
if (teki<600) { FEND = true; } else { FEND = false; }
-
-
- 0
- 件
-
No.3
- 回答日時：
れんしゃするこーどを、おうようして、てきもふやしてみたじょ！
もうこうなれば、あたりはんていは、まっぷつくってやるしかないかなぁ～。
きゃらくたーは、あにめーしょん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>
-
-
- 0
- 件
-
No.2
- 回答日時：
どっかにかいたことがあったんだけど、えほんのなかから
みつけられなかった。なのでかいたじょ。ばぶ。
こんな、ぐろーばるへんすうのつかいかただと、みんなにわらわれるか？！
きもちよく、れんしゃしてくれ！
もちろん、あたりはんてい、などない！
ぜんかくはくうはくは、ていきとうになおしてね！
けんとうをいのる。 ばぶぅ～！
<!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};
}
です…
こんなに沢山わかりません…。
もしご迷惑でなければご教授お願いできますでしょうか…？
-
-
- 0
- 件
-
No.1
- 回答日時：
このままだと、けっしておぎょうぎがよくないじょ。
ちゃんとできたら、おもしろそうだね。がんばれ～！
ｙのあたいが、ちいさいままだったじょ。
たいまーも、いちどくりあーする・・・。
せっといんたーばるに、もじれつでかんすうしきをわたすのは、
ふるいというか、こてんというか、かいしゃくにじかんかかるじょ！
げーむは、すぴーどが、いのち？
<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の時点でちょっと難解です…;
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プログラムですけど、問題はsin...
-
これはどんなJavaScriptなので...
-
画像をクリックして変数に値を代入
-
リンク前後で画像を変えたい
-
複数のバナーをリロードする度...
-
Class属性をJavaScriptで動的に...
-
一定時間で画像とリンク先を変...
-
画像の座標位置取得
-
画像と文字を同時に切り替えたい
-
【javascript】ロールオーバー...
-
強制的に読み込み完了とする方...
-
MAX関数を使ってからLEFT JOIN...
-
jqueryのsortableで一部ソート...
-
データの記録方法
-
マウスオーバーのメニューについて
-
【javascript で動的に a タグ...
-
オンマウスで画像変更、クリッ...
-
1枚の画像をクリックすると複数...
-
Slick.jsのオプションrtlについて
-
スライドショー（１回）が思う...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
画像をクリックすると別ウイン...
-
Microsoftのクリップギャラリー...
-
画像の座標位置取得
-
リンクをオーバーマウスで画像表示
-
スライドショーにフェード効果...
-
javascript 画像切り替え ラン...
-
クリックしたらJavaScriptで数...
-
JavaScriptで画像置換えてクリ...
-
インラインフレームでのクッキ...
-
<img>タグの alt= の値をキャプ...
-
JavaScriptクリックした画像を...
-
画像クリックでクリックした画...
-
【jQuery】複数の画像の読み込...
-
画像の自動切り替えができなく...
-
imgのsrcに値を設定するには
-
クリックとダブルクリック
-
jQueryで画像を重ねる
おすすめ情報
