DHTML応用のトップページです。
1〜15に並べ変えるゲームです。
空白位置の隣の駒をクリックすると空白位置に移動します。

【JavaScript/DHTMLのポイント】

15ゲーム


  1. ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をし、枠の画像と1〜15までの数字画像のレイヤをDisp()関数で初期位置に配置します。
    その後数字をばらばらに再配置するためタイマーを使って1秒後にRandomize()関数を呼びます。
  2. Randomize()関数で0〜15の位置にある数字を記憶するNum[]配列に一旦0〜15の数字を入れたあとシャッフルします。 シャッフル後Disp()関数を呼び0〜15の数字レイヤ(0は背景と同じ透過画像にしてある)をそれぞれの位置に移動します。
  3. 数字画像をクリックするとClick()関数が呼ばれ、先ず数字レイヤを移動中でないか(stepが0でないか)判定し、 移動中でなければ隣の駒位置が空白(0)か判断し空白であればそれぞれGoUp(),GoDown(),GoLeft(),GoRight()関数を呼び、上下左右に移動させます。
  4. GoXx()関数ではstepが0なら先ず数字のレイヤの入れ替え(空白と指定数字)をし、空白のレイヤは直ぐ新しい場所へ移動します。 数字レイヤは目的の場所へ向かい1/6移動し、タイマを使って同じ関数を呼びます。
  5. タイマで呼び出されるたびに1/6ずつ移動します。この移動はstep=1〜6まで行われ6になったら0に設定して終わります。

Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

ご感想などは鴈野 敏生 まで。