前節のサイコロはゲームには使えない
サイコロは転がして使うものなのに、すぐ目が出てしまう！
そこで、クリックしたら転がり始め、もう一度クリックしたら止まるように改造する。
さらに、クリックという動作を省略して、マウスを乗せるだけで出来るようにしてみます。
１、クリックしたら一定間隔で繰返しサイコロを入れ替える。
理屈は明白、前節で作った、乱数表でサイコロの目を入れ変える命令を
一定の時間間隔で繰返し実行させればいい。
こういうときはタイマー時計を使います。
タイマーを起動するには
タイマー置場名＝ｓｅｔＴｉｍｅｏｕｔ（”命令（ ）”，間隔）；
と書きます。
書く場所は繰り返す命令の中に書きます。
具体的には
<![CDATA[
function chg(){
r=Math.random()*6; //乱数表で
rr=Math.floor(r)+1; //切り捨て
document.saikoro.src=sai_file[rr]; //入れ替える
]]>
<![CDATA[
tim=setTimeout("chg()",200); //tim置場にchg()を50/1000秒ごと
//繰り返すタイマーを設置
]]>
}
のように書きます。
２、クリックしたらサイコロを静止させる。
静止させるにはタイマーを止めればいい
その書式は
ｃｌｅａｒＴｉｍｅｏｕｔ（タイマー置き場）；
と書きます。
具体的には
clearTimeout(tim);
の様に書きます。
３、タイマーの起動？、それとも停止？。
ところで、サイコロを、クリックしたときに
「転がせ！」、なのか「静止しろ」！なのかを判別しなければならない。
判別用の置場をつくり、タイマー作動中は「１」、停止したら「０」をセットして判断用に使うとよい。
具体的に書いてみると
<![CDATA[
flg=0; //判別用の置場を設け「０」をセットして準備
//起動と停止
function at(){
if(flg==1){ //もし作動中なら
clearTimeout(tim); /タイマー停止
flg=0; //判別置場に「０」をセットし
}else{ //作動中でなかったら
flg=1; //判別置場に「１」をセットし
chg(); //サイコロを転がす命令よびだし
}
}
]]>
サイコロをクリックしたらＡｔ（ ）を呼び出すように変更しておく
<![CDATA[
<a href="JavaScript:at()">
]]>
<![CDATA[
<img src="sai1.gif" name="saikoro" width=200 height=200 border=0>
</a>
]]>
のように書き換えます。
４、体験してみよう
サイコロをクリックしてください
５、マウスを置くだけで
いちいち、マウスボタンをクリックしなくても、マウスを乗せるだけでも転がせます。
「クリックしたら」ＪａｖａＳｃｒｉｐｔの命令を呼び出すのには
<a href="JavaScript:at()">
と書きましたが、
今度は「クリックした時は何もしない」と書きかえるて置かなければいけない
その場合は、何もしない命令
ｖｏｉｄ（０）
を使えばいい。
そして、マウスを載せたらＪａｖａＳｃｒｉｐｔの命令を呼び出すのは
ｏｎＭｏｕｓｅｏｖｅｒ＝”命令（ ）”
逆にマウスを外したらＪａｖａＳｃｒｉｐｔの命令を呼び出すのは
ｏｎＭｏｕｓｅＯｕｔ＝”命令（ ）”
と書きます。
具体的には
<![CDATA[
<a href="JavaScript:void(0)" onMouseover="chg()" onMouseOut="at()">
]]>
のように書きます。
マウスを乗せた時は、転がらせる命令
ｆｕｎｃｔｉｏｎ ｃｈｇ（ ）｛
を直接呼び出すようにして
マウスが外れてとめるときは
ｆｕｎｃｔｉｏｎ ａｔ（ ）｛
の静止させる部分だけ残して使うことにします。
具体的には
function at(){
clearTimeout(tim); /タイマー停止
}
のように改造します。
６、体験してみよう
サイコロにマウスを乗せてください
ソース
<![CDATA[
<html>
<head>
<title>javascript入門no23</title>
<script language="javascript">
<!--
//サイコロファイルを立体置場に//
sai_file=new Array("sai0.gif","sai1.gif","sai2.gif","sai3.gif","sai4.gif","sai5.gif","sai6.gif");
//タイマー切
function at(){
clearTimeout(tim);
}
//サイコロ入れ替え
function chg(){
r=Math.random()*6+1;
rr=Math.floor(r);
document.saikoro.src=sai_file[rr];
tim=setTimeout("chg()",200);
}
//-->
</script>
</head>
<body>
<center>
サイコロをクリックしてください<br>
<table border=1 bgcolor=#eeeeee><tr><td>
<a href="JavaScript:void(0)" onMouseover="chg()" onMouseout="at()">
<img src="sai1.gif" name="saikoro" width=200 height=200 border=0>
</a>
</td></tr></table>
</center>
</body>
</html>
]]>
|
