JavaScript
光の回転（表のセルの背景色を変化させる）
← 押してください！ ●の位置で停止すると、ご褒美があります。
中のセルの分のプログラムを加えた為、動きが不規則になり難しくなっています。（6月13日）
（色、動き共、ランダムに変化、あまり真剣に見ると目が回る？ので注意！）
CLEARボタンを押すと、最初からやり直しになります（挑戦回数も水に流しましょう）。
START⇔STOPですと、挑戦回数を、当たるまで数えますし、その数に応じて、
ご褒美も変わります（笑）。でも、あまりに・・・ですと、・・・・
それと、あまりにも、時間の浪費をしている場合、時として変なメッセージも現れます。
それも、複数回・・・、ご注意？下さい。
（CLEARボタンあたりに秘密が・・・、HITした時にもチェックを入れます、強制的に（笑）、
まあ、普通にしていれば、滅多にお目にかかれないと思いますが・・・）
※色が薄くなっているボタンは使用不可。状況で変化します。※
セルの色の変化を付けて、いかにも回転しているような動きをさせるプログラムです。
（但し、以下は、ご褒美のないプログラムです。ご褒美付きはソースをご覧下さい。）
すべて、bodyタグ内の記述になります。
まず、表の作成ですが、今回、5×5、25マスを用意します。
（マスの外周に沿って、光を回転させます。）
以下の記述で表が作成されます。
・・・・・・・・・・
<table border="0" ID="tbl"width="300" cellspacing="0">
<tr>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
</tr>
<tr>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
</tr>
<tr>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
</tr>
<tr>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
</tr>
<tr>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
<td width="60" height="60"></td>
</tr>
</table><br>
・・・・・・・・・・
セル番号は0から始まり、上段左から右、そして、次の段に移り、同じように左から右へと
1ずつ、増えていきます。下のプログラム（関数）内で、その番号を利用することになりますので
一応、頭の中に入れておいて下さい。
次に、プログラムを制御するボタンを3個、作成します。
スタート、ストップ、クリアのボタンは以下の記述で作成されます。
・・・・・・・・・・
<input type="button" name="bgcolor" value="START" onClick="cellbgcolor()">
<input type="button" name="bgcolorstop" value="STOP" onClick="cellbgcolorstop()">
<input type="button" name="bgcolorclear" value="CLEAR" onClick="cellbgcolorclear()">
・・・・・・・・・・
最後に、動きを実現する関数の作成です。
以下のスクリプトの中には、
『cellcolor』 ⇒ セルのカラーの動きを実現
『cellcolorstop』 ⇒ 動きを停止
『cellcolorclear』 ⇒ カラーの消去
以上、3個の関数が含まれています。
・・・・・・・・・・
<SCRIPT LANGUAGE="JavaScript">
<!--
bgcolorstop.disabled=true;
bgcolorclear.disabled=true;
//最初に、ストップボタンとクリアボタンを使用不可に
var i=0;
cell_num0=0,cell_num1=0,cell_num2=0,cell_num3=0,cell_num4=0,cell_num5=0;
//変数i、cell_num0〜cell_num5を宣言し、0を代入
function cellbgcolor(){
//動きを作り出す関数（スタートボタン）
bgcolor.disabled=true;
bgcolorstop.disabled=false;
bgcolorclear.disabled=true;
//ボタンを押すと同時に各ボタンの使用可否を再設定
tbl.cells(cell_num5).style.background="#000000";
tbl.cells(cell_num4).style.background="#333300";
tbl.cells(cell_num3).style.background="#666600";
tbl.cells(cell_num2).style.background="#999900";
tbl.cells(cell_num1).style.background="#cccc00";
tbl.cells(cell_num0).style.background="#ffff00";
//セル番号に対応するカラーを決定
//意味はテーブルID『tbl』のセル番号『cell_num?』のカラーを#??????に
cell_num5=cell_num4;
cell_num4=cell_num3;
cell_num3=cell_num2;
cell_num2=cell_num1;
cell_num1=cell_num0;
//変数cell_num?を一つ前（?-1）の変数を代入
//そうすることにより、追いかけるようにカラーが変化
num=new Array(0,1,2,3,4,9,14,19,24,23,22,21,20,15,10,5 );
//配列を宣言、数値の並びは動きに合わせたセル番号
//この数字が、上で言った、外周に沿ったセル番号の並び
if(i<16){
cell_num0=num[i++];
}else{
cell_num0=num[0];i=1;
}
//ループさせます。配列の最後になったら、最初に戻させます。
timerID=window.setTimeout("cellbgcolor()",100);
//タイマー設定し、cellbgcolor関数を繰り返し、実行
}
function cellbgcolorstop(){
//動きを停止させる関数（ストップボタン）
clearTimeout(timerID);
//タイマーを停止
bgcolor.disabled=false;
bgcolorstop.disabled=true;
bgcolorclear.disabled=false;
//各ボタンの使用可否を再設定
}
function cellbgcolorclear(){
//表示されている色をクリアし、最初の状態にする関数（クリアボタン）
bgcolor.disabled=false;
bgcolorstop.disabled=true;
bgcolorclear.disabled=true;
//各ボタンの使用可否を再設定
for(j=0;j<25;j++){
tbl.cells(j).style.background="#000000";
}
//すべてのマスのカラーを消去（ブラック）
i=0;
cell_num0=0,cell_num1=0,cell_num2=0,cell_num3=0,cell_num4=0,cell_num5=0;
//変数を0に戻す
}
//-->
</SCRIPT>
・・・・・・・・・・
表を大きくしたり、変化させ、それに伴い、番号もイメージする通り、
並べれば、複雑な動きも可能です。ノート等に表を書き、その桝目に、
上で紹介（左から右、上から下）した通りの番号を書き入れ、それから、
どのような経路を走らすかを考え、その経路にあたる数字を順に書き出します。
みつわのトップページも光が複雑に走っているように見えますが、表の大きさや、
行単位でセルの数に変化をつけ、単に、その番号を並べただけのプログラムです。