Japanease only.

３．ボールをコートの境界で跳ね返す

　ボールを跳ね返す？

　ボールの移動が可能になったところで、次はコート際におけるボールの跳ね返りです。(実際のテニスでそのようなことはありませんが...）

　例えば、下図のようなイメージです。現在、ボールがp1の位置(px, py)=（30, 70)であるとします。ボールが左下向きに進む場合は、１秒毎にpxを-10, pyを+10します。その結果として、１秒後はp2（20, 80)の位置に、さらに１秒後はp3(10, 90)になります。そのp3の位置でボールが跳ね返り、p4の（20, 100)とするためには、pxに+10, pyに+10の計算が必要です。つまり、px=10となったとき、次回pxに加算する値を-10から+10に変更すれば良いことになります。例5では、変数sy, sxを用いて次回加算する値を表しています。そして、function idou()が繰り返される度にif文によってpx=10となる時を検査し、sxの値を+10に切り替えています。

例5）demo3.htm(ダウンロード可）
<script language="JavaScript"><!--

function idou(){
py=py+sy;
px=px+sx;
document.ball.style.top = py;
document.ball.style.left = px;

if(px==10) sx=10;

if(py<300){ setTimeout("idou()",1000);
document.myform.tensu.value=py; }
}
function kaishi(){
py=70;
px=30;
sy=10;
sx=-10;
document.ball.style.top = py;
document.ball.style.left = px;

setTimeout("idou()",1000);
}

　上下のライン境界でもボールを跳ね返す

　先の段階では、未だ左側のラインでしかボールが跳ね返りません。次に、上下のラインでもボールを跳ね返す処理を加えます。まず、コートの座標を確認すると、左上は(x,y)=(10,50)、左下は(10,350)、ラケットが移動するのはx=380のラインです。また、ボールの直径が20ですので、ボール右下の座標は(px+20,py+20)と表されます。ボールが上のラインを超えるのは、ボールのy座標pyが50より小さい場合です。また、下のラインを超えるのは、ボール下部のy座標値py+20が350より大きい場合です。それぞれの場合について次に加算する値の正負(プラスマイナス)を変化させれば、ボールの進行方向を変えることが可能になります。

　まず、ボールが上のラインを超えた場合、以降はpyの値を増やしていく必要があるので、
　 if (px<=50) sy=10;

ボールが下のラインを超えた場合は、ｐｙの値を減らしていく必要があるので、
　 if (py+20>=350) sy=-10;

を追加します。さらに、ラケットが移動するライン上でもボールを跳ね返すとすれば、
　if (px+20>=380) sx=-10;
の条件が必要になります。　*px, sxに対する記述であることに注意！

例6）
<script language="JavaScript"><!--

function idou(){
　py=py+sy;
　px=px+sx;
　document.ball.style.top = py;
　document.ball.style.left = px;

　if(px<=10) sx=10;
　if(py<=50) sy=10;
　if(py+20>=350) sy=-10;
　if(px+20>=380) sx=-10;

　setTimeout("idou()",1000);

　document.myform.tensu.value=py;
}
function kaishi(){
　py=70;
　px=30;
　sy=10;
　sx=-10;
　document.ball.style.top = py;
　document.ball.style.left = px;

　setTimeout("idou()",1000);
}
// --></script>

Last up date:2006/12/25