青文字部分の最後に説明した、スタートボタンを押すと呼び出される関数move()がここで登場します。
| function move() { (この関数は長いので一部省略し、この部分は後で説明します。) uy=uy+Math.random()*5; ky=ky+Math.random()*5; document.usa.style.top=uy; document.kame.style.top=ky; setTimeout("move()",50); } |
前述したとおり{ から }の間に、この関数の処理内容を記述します。
uy=uy+Math.random()*5;は、ウサギのY座標に0〜5までのランダムな数字を足していく処理です。要は0〜5までのカードを目隠ししたコンピューターが引いて出た数字をウサギのY座標に足していくということです。Mathは元々用意されているオブジェクト名(グループ名)のことで、このグループの中には、ぺキ乗やルート、サイン、コサインといった計算処理をするための命令文一式が格納されています。でrandom()*5が0〜5までのくじを引くための命令文です。
ky=ky+Math.random()*5;は、カメのY座標に0〜5までのランダムな数字を加える処理です。
document.usa.style.top=uy;は、左から順に『オブジェクト名』.『ウサギ画像を識別する為の変数名』.『ウサギ画像の頭の座標』に、先ほど計算したウサギのY座標を代入するという処理です。これを記述する事で移動後のウサギが画面上に表示されます。
document.kame.style.top=ky;は同様にランダムに移動したカメを画面に表示する為の処理です。
setTimeout("move()",50);は、50ミリ秒後にもう一度move()関数を呼び出すという命令文です。
同じ関数を呼び出すごとに、ウサギとカメのY座標にランダムな数字をつけ加えられ、画面下に向かってウサギとカメが移動していきます。
しかし同じ関数を呼び出し続ければ、ウサギとカメは永遠に競争を続ける事になってしまいます。そこでこの関数が長いということで一部省略した部分が出てきます。これを次ページに示します。