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>


これだと、連射どころか、二回目のクリックに反応すらしないんです…。

どうかご教授お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

かいせつかぁ~。


へんなかきかただものね~。

>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座標が600より小さければ、ゲームを継続する。
これも普通に書けば、
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なんだけど、掛け算するときは、数値の1と解釈できる!と
覚えておけばいいのかも?
ちなみに±8は、マウスのマージンね。止めたいときに、判定を甘くしてる。


>FEND && setTimeout(LOOP2, 60);
>第二引数の数字が敵か自機かなどによって数字が違うのもどうしてでしょうか?
ゲームを作るうえで、キャラクターの動き、つまりバランスは非常に大事。
第二引数で、キャラクターの速度の調節が簡単にできる。
早く動かそうとして、4ドットを8ドットづつにするのは、好きじゃない。



>cloneNode(false);
今回は、画像の'TAMA'に利用しているけど、これは画面上に何個出現するかわからない
玉にたいして、画像をたくさん用意するより、1つ隠しておいて、それをコピーして
使っている。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内でのマウスの位置がわかります

さて、これでしつもんにぜんぶこたえたかな? ばぶばぶばぶぅ~!
    • good
    • 0
この回答へのお礼

丁寧にありがとうございます!この解説を参考に自分の力でも組めるようにがんばってみます!あまり何度も質問してしまっても迷惑だと思うので、またなにか解決できない疑問にぶちあたったら新しい質問を投稿することにします。
本当にありがとうございました!感謝感激です!

ポイントは1000000ポイントくらいあげたいところですけど…gooがそんなに沢山良回答をつけさせてくれません…!

どうもありがとうございました!

お礼日時:2009/05/31 02:58

こーどのみやすさかだとか、そくどだとか、いろいろかんがえると


おもしろいよ!これは、おくがふか~い。
ぷろぐらむをかくことで、じぶんが、べんきょうしているからね~。
くろーじゃーだとか、おぶじぇくとしこう、だとか
まだまだいっぱいあるじょ!
http://okwave.jp/qa5001540.html
のかいとうも、なにかのさんこうになるかも?
かうんたーなのだけど、すうじがすろっとましーんのようにかいてんして
へんかするじょ!
げーむのとくてんなんかにつかえるかもよ!

やっぱりさいごは、ばぶぅ~!

そうそう、ぽいんとは10000ぽいんとくらいでいいじょ!^^;
    • good
    • 0

解説の訂正


if (teki<600) { FEND = true; }
は、
if (teki<600) { FEND = true; } else { FEND = false; }
    • good
    • 0

れんしゃするこーどを、おうようして、てきもふやしてみたじょ!


もうこうなれば、あたりはんていは、まっぷつくってやるしかないかなぁ~。
きゃらくたーは、あにめーしょん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の回答から自分のものにしたいと思います!
回答を締め切るときには必ず良回答をつけさせていただきたいと思います。

補足日時:2009/05/30 21:14
    • good
    • 0

どっかにかいたことがあったんだけど、えほんのなかから


みつけられなかった。なのでかいたじょ。ばぶ。
こんな、ぐろーばるへんすうのつかいかただと、みんなにわらわれるか?!
きもちよく、れんしゃしてくれ!
もちろん、あたりはんてい、などない!
ぜんかくはくうはくは、ていきとうになおしてね!

けんとうをいのる。 ばぶぅ~!

<!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};
}

です…

こんなに沢山わかりません…。

もしご迷惑でなければご教授お願いできますでしょうか…?

補足日時:2009/05/30 20:58
    • good
    • 0

このままだと、けっしておぎょうぎがよくないじょ。


ちゃんとできたら、おもしろそうだね。がんばれ~!
yのあたいが、ちいさいままだったじょ。
たいまーも、いちどくりあーする・・・。
せっといんたーばるに、もじれつでかんすうしきをわたすのは、
ふるいというか、こてんというか、かいしゃくにじかんかかるじょ!
げーむは、すぴーどが、いのち?


<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の時点でちょっと難解です…;

補足日時:2009/05/30 20:56
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像などの位置を取得するには

<img>や<a>などの特定の部品のページ上部からの
位置を測定するにはどうすればいいのでしょうか?
”pixelTop”というのを使うようなのですが、
うまくいかないんです。

よろしくお願いします。

Aベストアンサー

document.getElementById("取得するタグのid").clientTop;

document.getElementById("取得するタグのid").offsetTop;
でいかがでしょう。

Qtextareaで入力した文字を改行したままで表示したいのですが。

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" >
<textarea cols="30" rows="10" name="textN"></textarea>
<input type="button" value=" 確認 " onClick="check()">
</FORM>
<DIV id="test" style="position:absolute;font-size:24px;">
</DIV>
</BODY>
</HTML>

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" ...続きを読む

Aベストアンサー

function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
//一応タグを使えないように置き換える
strName = strName.split("<").join("&lt;");
strName = strName.split(">").join("&gt;");
//改行を改行タグに置き換える
strName = strName.split("\n").join("<br>");
test.innerHTML = strName;
}

QHTMLの画像の位置の指定

HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、CSSやジャバスクリプトで使用している、


position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed;
上のようなポジションタグを使う事は可能ですか?

できれば、そのサンプルのようなものを書いてもらえると 助かります。

Aベストアンサー

こんばんは。
私は画像については良く位置指定をします。
インラインCSSで書きますと、

<div style="position:relative; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

絶対指定なら;
<div style="position:absolute; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

Qimgのsrcに値を設定するには

<img src="photo.jpg" title="" id="2" />
document.getElementById('2').setAttribute('title',代入値);

のようにsrcのほうにも値を設定したいのですが、単純に

document.getElementById('2').setAttribute('src',代入値);

のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか?

Aベストアンサー

まず、数字だけのidをつけるのは、やめたほうがいいでしょう。(参考URL)

さて、本題ですが、私のところでは
 document.getElementById('2').setAttribute('src','photo2.jpg');
のようにしたところ、上手くいきました…
文字列の前後に「''」をちゃんとつけていますか?

参考までに、他に
 document.getElementById('2').src = 'photo2.jpg';
という、単純な方法もあります。

参考URL:http://www.kanzaki.com/docs/html/htminfo12.html#name-syntax

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む

Qjavascriptでオブジェクトの重なりを判定

お世話になります。

javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。
果たして、そんなことは可能なのでしょうか。


<body>

<div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div>
<div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div>
<div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div>
<div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div>
<div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div>
<div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div>
</body>
<script>
fucntion aaa(){
var bbb = document.getElementById("block1");
var move= parseFloat(bbb.style.left);
bbb.style.left = (move+10)+"px";
}
</script>


というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました!」という感じで表示することはできないのでしょうか。javascript オブジェクト 重なり とかで検索しても、目的のものが出てこなかったので…

どうぞ、よろしくお願い致します。

お世話になります。

javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。
果たして、そんなことは可能なのでしょうか。


<body>

<div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div>
<div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div>
<div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></d...続きを読む

Aベストアンサー

JavaScriptでですか?……jQueryの方がいいとは思いますが……
出来ないことはないとは思います

未検証の回答なので以下注意して検証して下さい

おおまかな流れとしては
1.body内のオブジェクトを全て取得する
2.オブジェクトから取得する情報は位置情報(x,y)と縦横サイズ(w,h)
3.配列に放り込み、新しい要素を取得する度に既にある要素の
x <= newX && (x+w) >= newX && y <= newY && (y+h) >= newY
を比較して重なりを検出する

// BODY エレメントを取得
var element = document.body;
for(i=0;i <element.length;i++){
x = element.elements[i].offsetLeft;
y = element.elements[i].offsetTop;
w = element.elements[i].offsetWidth;
h = element.elements[i].offsetHeight;
}

後はトリガーはどうするのかが分からないのですが
クリック時とかならまだいいのですが、随時更新は流石にjQueryを勉強したほうが良いと思います

JavaScriptでですか?……jQueryの方がいいとは思いますが……
出来ないことはないとは思います

未検証の回答なので以下注意して検証して下さい

おおまかな流れとしては
1.body内のオブジェクトを全て取得する
2.オブジェクトから取得する情報は位置情報(x,y)と縦横サイズ(w,h)
3.配列に放り込み、新しい要素を取得する度に既にある要素の
x <= newX && (x+w) >= newX && y <= newY && (y+h) >= newY
を比較して重なりを検出する

// BODY エレメントを取得
var element = document.body;
for(i=0;i <elemen...続きを読む


人気Q&Aランキング

おすすめ情報