Tumbling Dice

Tumbling Dice

Example

Source

_1	__	<HEAD>
_2		<SCRIPT LANGUAGE="JavaScript">
_3		<!--
_4		__var myImage1 = new Image(); myImage1.src = "dice1.gif";
_5		__var myImage2 = new Image(); myImage2.src = "dice2.gif";
_6		__var myImage3 = new Image(); myImage3.src = "dice3.gif";
_7		__var myImage4 = new Image(); myImage4.src = "dice4.gif";
_8		__var myImage5 = new Image(); myImage5.src = "dice5.gif";
_9		__var myImage6 = new Image(); myImage6.src = "dice6.gif";
10		__var img =0;
11		__fileName = new Array("dice1.gif","dice2.gif","dice3.gif","dice4.gif","dice5.gif","dice6.gif");
12		__function rotate() {
13		____document.images["dice"].src = fileName[img];
14		____img++;
15		____if ( img > 5 ) { img =0; }
16		____timer = setTimeout("rotate()",50);
17		__}
18		__function stop() {
19		____clearTimeout(timer);
20		__}
21		// -->
22		</SCRIPT>
23		</HEAD>
24
25		<BODY>
26		<IMG SRC="dice1.gif" NAME="dice">
27		<FORM ACTION="javascript://">
28		__<INPUT TYPE="submit" VALUE="start" onClick="rotate()">
29		__<INPUT TYPE="submit" VALUE="stop" onClick="stop()">
30		</FORM>

Explain

4 ～ 9 行は、このスクリプトで使う画像をキャッシュに読み込ませる処理だ。キャッシュに読み込ませないと、画像が切り替わるたびにサーバーにアクセスしてしまい、処理が非常に遅くなるので注意してほしい。
10 行目は変数の宣言だ（初期値を 0 に設定）。今回の場合、変数 img は配列番号と同等になる。（13行目の fileName[img] のこと）
11 行目は配列名（fileName）の宣言と、その各要素（Arrayの括弧内）の設定である。
12 ～ 17 行で回転する処理を行っている。
12 行目で関数 rotate() の宣言だ。
13行目は「オブジェクト名 dice の位置に要素番号（変数）img の画像を表示せよ」という命令だ。
14 行目では要素番号の値を +1 している。この +1 された値は次に関数 rotate() が呼び出されたときに適用される。
15 行目はタイマーの設定で、括弧内の数値（今回は50）に基づき、直前に指定した関数が呼び出される。（数値の単位はミリセコンド）
16 行目は要素番号 img の値が 5 を越えないようにする処理である。要素数は 6 個しか設定してないので、この値を越えると表示する画像が無くなってしまう。それなので、この処理が必要になるのだ。ちなみに、要素番号は 0 からカウントされるので、要素番号の最大値は要素数 - 1 になる。
18 ～ 20 行は回転を停止させる処理を行っている。
18 行目で関数 stop() を宣言し、19行目で実際の停止処理を行う。ここでは単純に 15 行目で設定した timer をクリアしているだけである。
26 行目はページの読み込み時に表示させる画像の指定だ。ここの NAME が 13行目で使われるオブジェクト名になる。
27 ～ 30 行で回転を start ＆ stop させるボタンを設定している。
27 行目の ACTION 先は処理を JavaScript で行うので、このような記述にしている。
28 行目は start ボタンの設定で、クリックしたときに関数 rotate() を呼び出している。
29 行目は stop ボタンの設定で、クリックしたときに関数 stop() を呼び出している。

これでサイコロを回転させるスクリプトの完成だ。
次回は乱数からサイコロの目を得る（実際のサイコロとほぼ同じ）スクリプトを紹介しよう。

[ back ] | [ next ] | [ index ]