カーソルからの泡操作

質問

カーソルから上に向けて泡を出すプログラムがあります．
これを，上にではなく，ブラウザ上のある特定箇所に
泡を向かわせるには，以下のプログラムをどのように変更したらよいでしょうか？
教えていただけると，とても助かります．

<SCRIPT language="JavaScript">
<!--//
Image0=new Image();
Image0.src="awa.gif";
Amount=20;

Ymouse=-50;
Xmouse=-50;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
rate=new Array();
grow=new Array();
Step=new Array();
Cstep=new Array();
nsSize=new Array();
ns=(document.layers)?1:0;
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i=0; i < Amount; i++){
Ypos[i]=Math.random()*WinHeight-Ymouse;
Xpos[i]=Xmouse;
Speed[i]=Math.random()*10+1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
grow[i]=4;
nsSize[i]=Math.random()*15+5;
rate[i]=Math.random()*0.5+0.1;
}
if (ns){
for (i = 0; i < Amount; i++){
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles(){
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(270*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]*5);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < -40){
Ypos[i]=Ymouse;
Xpos[i]=Xmouse;
Speed[i]= 6+Math.random()*3;
grow[i]=4;
nsSize[i]=Math.random()*15+5;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else{
si[i].style.pixelLeft=Xpos[i]+wscrll;
si[i].style.pixelTop=Ypos[i]+hscrll;
si[i].style.width=grow[i];
si[i].style.height=grow[i];
}
grow[i]+=rate[i];
Cstep[i]+=Step[i];
if (grow[i] > 24) grow[i]=25;
}
setTimeout('MouseBubbles()',10);
}
MouseBubbles();

//-->
</script>

[参考]
http://hp.ms-factory.biz/javak_bubbles2.htm

回答No.1

SAYKA

原理だけ

・上に泡が登る
→座標yが正方向から0へ向かって変化する
(揺らす為にxが多少変化する場合も有る)

・特定の方向へ向かう
→座標xとyが目標へ向かって変化する

「そんな事は判りきってる」って言われそうな勢いの事が書かれているけれど、まずは人が解く場合を考えてからだと判りやすくなるよ。

お礼

なるほど！
基本的なところからよくわかっていなかったので，
とても助かります．
迅速に対応していただき，ありがとうございます．(^-^)