HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

今夜は踊ろう！

　

m

　

　

　

　

　

　

Sample Source......................................................................>>>

<SCRIPT language="JavaScript"><!--
var idx,flg,n,m,w,ph;	//ｸﾞﾛｰﾊﾞﾙ変数
var Ax = new Array(10,10,20,30,40,50,60,70,80,90,100
	,110,120,130,140,150,140,135,130,125,120,110,100
	,90,85,80,70,75,80,85,90,95,100);
var Ay = new Array(-170,-100,-90,-80,-70,-60,-50,-40
	,-30,-25,-20,-10,0,5,10,20,25,30,35,40,50,60,70
	,80,85,90,100,110,120,125,130,140,150);
var Bx = new Array(350,350,320,310,300,290,280,270,260
	,250,240,230,220,215,210,215,220,225,230,235,240
	,245,250,245,240,235,230,225,220,215,210,205,200);
var By = new Array(-170,-100,-90,-80,-70,-60,-50,-40
	,-30,-25,-20,-10,0,10,20,25,30,35,40,50,55,60,70
	,80,90,95,105,115,120,130,140,150,160);

function Init(){	//初期化
  idx = 0;	//位置座標の配列Index番号
  flg = 1;	//動作を切り替えるためのﾌﾗｸﾞ変数
  n = 1;	//以下は動作切替えのﾀｲﾐﾝｸﾞをとるための変数
  m = 1;
  w = 1;
  ph =0;	//waveﾌｨﾙﾀのphase値を0に初期化
  dvB.style.filter = "";//踊り子画像のﾌｨﾙﾀを解除
  msg.innerHTML = "";	//[ｶｰﾃﾝ･ｺｰﾙ]ﾎﾞﾀﾝを消す
  
  Move1();
}
function Move1(){	//上方から登場する
  if(idx < Ax.length - 1){
    //移動するxy位置(leftとtop)を配列から指定
    dvA.style.left = Ax[idx];
    dvA.style.top = Ay[idx];
    dvB.style.left = Bx[idx];
    dvB.style.top = By[idx];

    idx++;		//配列Index番号を1づつ増やしていく
    setTimeout("Move1()",200);
  }else{
    msg.innerText = "今夜は思いっきり踊りましょう!!";
    setTimeout("Move2()",2000);
  }
}
function Move2(){	//踊る動作
  msg.innerText = "";	//ﾒｯｾｰｼﾞを消す
  if(flg == 1){		//踊り子が接近する
    dvB.style.pixelLeft -= 5;
    if(dvB.style.pixelLeft < 170)flg = 2;
    setTimeout("Move2()",400);
  }else if(flg == 2){		//二人そろって右移動
    dvA.style.pixelLeft += 13;
    dvB.style.pixelLeft += 13;
    n++;
    if(n >4){		//3回移動すると次の動作に
      flg = 3;
      n = 1;
    }
    setTimeout("Move2()",700);
  }else if(flg == 3){		//二人そろって左移動
    dvA.style.pixelLeft -= 13;
    dvB.style.pixelLeft -= 13;
    n++;
    if(n >4){		//3回移動すると次の動作に
      flg = 4;
      n = 1;
    }
    setTimeout("Move2()",700);
  }else if(flg == 4){	//左右の位置を交代する
    //踊り子の左右反転ﾌｨﾙﾀを適用／解除
    dvB.style.filter = (dvB.style.filter == "") ? "fliph()" : "";
    Aleft = dvA.style.left;
	Bleft = dvB.style.left;
    dvA.style.left = Bleft;
    dvB.style.left = Aleft;
    
    flg = 2;
    m++;		//mの回数により次の動作を切り替える
    if(m == 3 || m == 5)flg = 5;
    if(m == 6)flg = 6;
    setTimeout("Move2()",700);
  }else if(flg == 5){	//二人揃ってwaveする
    dvA.style.filter = "wave(freq=2,strength=8,phase="
			 + ph + ",lightstrength=0,add=0)";	
	dvB.style.filter = "wave(freq=2,strength=8,phase="
			 + ph + ",lightstrength=0,add=0)";
	ph += 7;
	w++;
	if(w > 20){	//一定回数後、次の動作に
	  flg = 2;
	  w = 1;
	  dvA.style.filter = "";
	  dvB.style.filter = "";
	}
	setTimeout("Move2()",200);
  }else if(flg == 6){
  	msg.innerText = "疲れたは、帰りましょ!!";
    setTimeout("Move3()",2000);
  }
}
function Move3(){	//上方に消えていく
  msg.innerText = "";
  if(idx >= 0){
    dvA.style.left = Bx[idx];
    dvA.style.top = By[idx];
    dvB.style.left = Ax[idx];
    dvB.style.top = Ay[idx];

    idx--;
    setTimeout("Move3()",200);
  }else{		//[ｶｰﾃﾝ･ｺｰﾙ]のﾎﾞﾀﾝを表示
    msg.innerHTML = 
		"<button onclick='Init()'>ｶｰﾃﾝ･ｺｰﾙ</button>";
  }
}
//--></SCRIPT>
</HEAD>

<BODY onload="Init()">
<DIV id="dvA" style="position:absolute;
	color:blue;font:130pt Webdings">m</DIV>
<DIV id="dvB" style="position:absolute;top:-150;left:300">
	<IMG border="0" src="../java/jadata/pic01.jpg">
</DIV>
<DIV id="msg" style="position:absolute
	;top:120;left:110;color:red"></DIV>

end(最終更新:12/11/12)