ようこそ　我が家の
Home Page 　へ
ピースをドラッグすると移動できます。
回転＼枠 外枠のみテンプレート有テンプレート＋絵 
回転有
ピースのダブルクリックで回転
回転無
 
DHTML応用のトップページです。
【JavaScript/DHTMLのポイント】

Valid HTML 4.01!

ジグソウパズル


  1. ロードが終わるとIniSet()関数がレイヤを設定したあと、ジグソウのフレームを横方向の中心に配置した後、Start()関数で各ピースをを所定位置に移動し表示した後、 タイマを使って500ｍｓ後にScatter()関数で枠の左右と下にピースをばら撒きます。
  2. ピースをドラッグすると、まずマウスが押されたときにMdown()関数が呼ばれ押された位置をdx,dyに保持され、押された画像番号がLNに記憶され 表示順(Zindex) が前面表示にされます。
    続いてマウスが移動するとMmove()関数が呼ばれ動いた分押された画像のレイヤを移動します。これで枡スのドラッグにあわせて画像が移動します。
    マウスが放されたときにMup()関数が呼ばれ　画像の回転向きが正規向きで正規の位置の２ピクセル以内にあればその画像のレイヤを正規の位置にあわせます。
    その後全てのピースの画像が正規の向きでその位置が正規の位置にあれば完成したことをダイアログで知らせ、完成画像のレイヤを表示します。
  3. 初期設定変更のボタンが押されるとRestart()関数が呼ばれ、フレームの種類(外枠のみ、ピースの線あり、画像も表示)をLevelJに、 ピースの回転有無をLevelRに記憶しStart()関数で再度開始する。
    回転ありが指定されたときはScatter()関数でばら撒くときに乱数を使って画像が回転される。
    また画像をダブルクリックすることによりDoubleClick()ｦは関数が呼ばれその画像を90度回転した画像に入れ替える。
  4. 画像が多くなるのでここでは使っていないが　ボタンを押すことでChangePic()関数は呼べば他の画像に切り替えることも可能である。
Java Script事例集トップページへ

鴈野さんちのHomePage TOPへ

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