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>
・・・・・・・・・・

表を大きくしたり、変化させ、それに伴い、番号もイメージする通り、
並べれば、複雑な動きも可能です。ノート等に表を書き、その桝目に、
上で紹介(左から右、上から下)した通りの番号を書き入れ、それから、
どのような経路を走らすかを考え、その経路にあたる数字を順に書き出します。

みつわのトップページも光が複雑に走っているように見えますが、表の大きさや、
行単位でセルの数に変化をつけ、単に、その番号を並べただけのプログラムです。