7週目

動かす

HTML上である指定したオブジェクト(たとえばDIVなどのタグで囲ったもの)の座標を変化させ,動いているように見せるために,命令としてSetTimeoutもしくはSetIntervalを用いる.これはタイマーを用いて,関数を呼び出すという命令である.これを用いて,物体の座標を変え表示し,また関数を呼び出して繰り返すということで動いているように見せることができる.
まず,最初に指定した座標に物体を表示させることを行う.
week7_1.html
<html>
<head>
<title>week7_1</title>
<script language="JavaScript">
ballx=100;            // ボールのX座標の初期値
bally=100;            // ボールのY座標の初期値
function hyouji(){
  ball.style.left=ballx;
  ball.style.top=bally;
}
function zahyou(){
 mx=event.clientX;     // マウスのX座標を取得
 my=event.clientY;     // マウスのY座標を取得
 card.innerText="マウスの座標("+mx+","+my+")";
}
function idou(){
   ballx=mx-10;           // ボールの座標にマウスの座標を代入
   bally=my-10;           // ただし,マウスカーソルの位置に合うように調整
   hyouji();          // ボールの表示関数 hyouji()を呼び出す
}
document.onmousemove=zahyou;
document.onmousedown=idou;
</script>
</head>
<body onload="hyouji()">
<p id="card"></p>
<div id="ball" style="position:absolute;color:red">●</div>
</body>
</html>

次に,SetTimeoutを用いてボールが移動してくる様子を表現する.関数idou()を次のように書き換える. week7_2.html
function idou(){
   ballx=Math.round(ballx+(mx-ballx)/10);   //x方向に距離の10分の1だけ進む
   bally=Math.round(bally+(my-bally)/10);   //y方向に距離の10分の1だけ進む
   hyouji();           // ボールの表示関数 hyouji()を呼び出す
   ugo=setTimeout("idou()",100);  // 1000分の1秒後にこの関数を呼び出す
   var hitAny=document.elementFromPoint(mx,my);  // 座標にあるものをhitAnyと置く
   status=hitAny.id;                             // 下のステータスバーにIDを表示する
   if(hitAny.id=="ball") clearTimeout(ugo);      // マウスとボールが重なっていれば,
}                                            // setTimeoutをクリアーする