ウォッチ
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で質問しましょう！
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める！
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら？
- ・あなたの習慣について教えてください！！
- ・ハマっている「お菓子」を教えて！
- ・高校三年生の合唱祭で何を歌いましたか？
- ・【大喜利】【投稿～11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか？
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか？
- ・つい集めてしまうものはなんですか？
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題（締め切り10月27日（日）23時）
- ・大人になっても苦手な食べ物、ありますか？
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿～10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください！
- ・ＣＤの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は？
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ！？と思った○○周年を教えて【ハルヒ20周年】
- ・１０秒目をつむったら…
- ・人生のプチ美学を教えてください！！
- ・あなたの習慣について教えてください！！
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
連番画像「次へ」「前へ」で、...
-
window.openで横指定し縦は横に...
-
連続したURLへのwindow.openの...
-
JavaScript(?)で入替えた画像を...
-
imgのsrcに値を設定するには
-
MAX関数を使ってからLEFT JOIN...
-
getElementByIdの戻り値がnull...
-
JavaScriptで変更した属性の元...
-
OpenCVでの画像読み込みについて
-
CSS ＜div＞の入れ子が反映さ...
-
javascriptでオブジェクトの重...
-
pythonのDjangoでHTML内で変数...
-
クリッカブルマップで切り替え...
-
Slick.jsのオプションrtlについて
-
MFCで画像を表示させているので...
-
JQueryでオープニングアニメー...
-
1枚の画像をクリックすると複数...
-
【ＨＰ作成】クリックすると下...
-
フォームに入力された値により...
-
Gifアニメ、最後のコマに行った...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryでサーバー上のファイル...
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
画像の座標位置取得
-
HPに複数の画像をクリックで切...
-
連続したURLへのwindow.openの...
-
リンク画像をランダム表示して...
-
JavaScriptで画像置換えてクリ...
-
サムネイル画像をオンマウスで...
-
画像の下に説明文をつけて切り...
-
Javaスクリプトに関して分から...
-
JAVAで画像をボタンで切り替え...
-
画像アップロードしたい
-
日付ごとにテキストを変える方...
-
CSVファイルからの読取について
-
画像をクリックすると別ウイン...
-
HPB_SCRIPT_ROV_50
-
クリックで次の画像へ
-
outlook2010の不具合で困ってい...
-
画像等の切り替えパターンがラ...
おすすめ情報
