テニスゲームの制作

Japanease only.

２．ボールを移動させる

　ボールの位置はどのように指定？

　さて、先のサンプル(demo.htm)を実行すると下図のように表示されます。*もし、セキュリティ保護によるアクセス制限のメッセージが出た場合は、一度そのメッセージをクリックしてコンテンツの実行を許可して下さい。
さらに、スタートボタンを押すとボールが斜め下に少し動きます。　*再び動かすには、ブラウザの更新(リロード)ボタンを押す必要があります。実は、このスタートボタンにある仕掛けが施されています。まず、メニューバーの[表示(V)]-[ソース(C)]を選択し、メモ帳を起動してください。メモ帳でこのHTMLの記述を確認すると、下から９行目に<INPUT TYPE="button" VALUE="スタート" onClick="kaishi()">とあります。これは、「ボタンを押した時に、kaishi()を実行しなさい」となっているのです。では、次にJavaScriptのfunction kaishi()部分を観てみましょう。

サンプルdemo.htmにおけるJavaScriptの記述
<script language="JavaScript"></script>

　function kaishi()の範囲は、｛　｝で表されています。その{ 　}内の２行の記述は、"document.ball.style."までが共通で、"top","left"と続いています。topと続く方はボールの縦位置(y方向)を表しており、値を大きくすると表示位置が下がります。また、leftは横の位置(x方向)を表しており、値を大きくすると表示位置が右へ移動するしくみになっています。では、試しにそれらの値を変えて、ボールの表示位置を確認してみましょう。下の例１にならい、メモ帳で位置データを変更して下さい。　*変更後は、メモ帳のメニューバー　[ファイル(F)]-[上書き保存(S)]を選び、一度ファイルを更新します。実行を確認するには、ブラウザへ戻り、更新ボタン（もしくは[表示（Ｖ）]-[最新の情報に更新（R）]）を押して、スタートボタンより確認を行います。

例1）
<script language="JavaScript"></script>

* ;(セミコロン)を各行の終わりにつけてください。

タイマを使ってボールを連続的に移動する

　現在は、スタートボタンを押してボールが１度動くのみですが、連続的に移動するには？　そこで、次の例を参考にしてください。

例2)
<script language="JavaScript"></script>

　新たに加えたのは、function idou()とfunction kaishi()内のsetTimeout("idou()",1000);です。setTimeout()は、ボール画像を(200,130)の位置に表示した後に1000ミリ秒(=１秒)の時間を計り、その後にidou()を実行させる命令です。ですから、スタートボタンを押してから１秒後にidouが実行されるということになります。idou()では、先に説明したボールの表示位置指定が（230,130)に変更されていますので、ボールが2度動くということになります。

< setTimeout (セットタイムアウト) >　タイマ関数

記述 setTimeout("a", t );

内容 tミリ秒後にaを実行。

例 setTimeout("gotoB()",100); 　//100ミリ秒後にgotoBを実行

　次にボール表示位置を直接数値で指定するのではなく、変数を使って表すことを考えます。下記の例は、数値の変わりにpx, pyという変数を使用した例です。まず、スタートボタンを押した後に実行されるkaishi()の中では、py=100, px=60として最初の表示位置の値を代入します。1000ミリ秒経過するとidou()へ移行し、py+10及びpx+10の計算が行われます。それぞれ計算された値はpy, pxに戻されます。次のdocument.ball.style.topやdocument.ball.style.left では、その新たな計算後の値が指定されていますので、表示位置が変わるしくみです。その後、setTimeout()命令によって再び1000ミリ秒後、idou()の処理が実行されます。

例3) demo2.htm(サンプルダウンロード可）
<script language="JavaScript"><!--

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

setTimeout("idou()",1000);
}
function kaishi(){
py=100;
px=60;
document.ball.style.top = py;
document.ball.style.left = px;

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

　このプログラムには、実は問題（バグ）があります。pyやpxに10を足す操作が永遠に繰り返されてしまうのです。そこで、プログラム制御命令if文を使い、pyが300に達したらsetTimeを実行しないように修正します。

< if (イフ) >プログラム制御命令

記述 if (条件式) {　式や命令　}

内容 ( )内の条件式が成立している(真である)場合、{　}内の式や命令が実行される。もし、式や命令が一文ならば{ }は不要。

例 if (px>=20) { px=20; py=10; } 　//　pxが20以上である場合、px=20, py=10とされる。

補足条件式には次のような記号が用いられます。
等しい ==　，等しくない !=　，より大きい >　，より小さい <　，以上 >=　，以下 <=

例4）
<script language="JavaScript"></script>

　以上がボールを移動させるための基本です。次は、コートの境界におけるボールの跳ね返しを考えます。

Last up date:2006/12/25

< setTimeout (セットタイムアウト) >　タイマ関数
記述	setTimeout("a", t );
内容	tミリ秒後にaを実行。
例	setTimeout("gotoB()",100); 　//100ミリ秒後にgotoBを実行

< if (イフ) >プログラム制御命令
記述	if (条件式) {　式や命令　}
内容	( )内の条件式が成立している(真である)場合、{　}内の式や命令が実行される。もし、式や命令が一文ならば{ }は不要。
例	if (px>=20) { px=20; py=10; } 　//　pxが20以上である場合、px=20, py=10とされる。
補足	条件式には次のような記号が用いられます。等しい ==　，等しくない !=　，より大きい >　，より小さい <　，以上 >=　，以下 <=