積もる雪(TumoruYuki)
編集：2008.03.24 by T.A..IMG要素があるとその上に積もります。
積もった雪を除けられる（ドラッグしてください）。そして大幅修正。
|
●TumoruYuki.htm この色の所を修正してください。
<HTML> <HEAD> <TITLE>積もる雪</TITLE> <META http-equiv="content-type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <STYLE type="text/css"><!-- BODY {background:rgb(70,130,70) url("../Img/4.jpg") repeat} .BODY {padding:10; line-height:120%; background:white} H1 {margin-top:3px; margin-bottom:5px; font-size:120%; line-height:120%} .User {color:red} .Comment {color:blue} PRE.Rei {margin:4 1em 1ex 1ex; border:1px solid black; padding:5; font-size:90%; line-height:120%; background-color:white} #Box {position:relative; width:300px; height:200px; border:1px solid black; overflow:hidden} .Yuki {border:0} --></STYLE> </HEAD> <BODY onload="Init()"> <SCRIPT type="text/JavaScript" src="TumoruYuki/TumoruYuki.js"></SCRIPT> <DIV class=BODY> <H1>積もる雪(TumoruYuki)</H1> 編集：2007.09.30 by T.A..<BR> IMG要素があるとその上に積もります。<BR> 積もった雪を除けられる（ドラッグしてください）。そして大幅修正。<BR> <TABLE style="background-color:#88F"> <TR><TD style="padding:20px"> <IMG src="Test.jpg"><BR> <IMG src="Test.jpg"> </TABLE>
●TumoruYuki.js この色の所を変更してください。
//TumoruYuki.js //編集：2008.03.24 by 雨宮徹也 //積もる雪の模擬表示 //呼出： // <BODY onload="Init()"> // <SCRIPT type="text/JavaScript" src="TumoruYuki.js"></SCRIPT> var DebugF; //¶Debug用。true=デバッグモード var GamenKousin=1/10; //画面更新時間[s] var TimeGamen=GamenKousin*1E3; //タイマー値：画面更新時間[ms] var Yuki=new Array(); //降る雪のデータ。Yuki[ｎ]=undefined=IMG要素なし //.Sts=状態（furu=降る、none=降らない） //.X=降る位置X[px] //.Y=降る位置Y[px] //.SpeedX=X方向の移動スピード //.SpeedY=Y方向の移動スピード //.Dir=X方向の移動方向（-1=左、1=右） var YukiClass="Yuki"; //雪画像のclass名 var HasseiRitu=0.3; //雪の発生率 var YukiN=40; //降る雪の最大個数 var YukiSpeedX=2; //降る雪のX方向の基本スピード[px] var YukiSpeedY=10; //降る雪のY方向の基本スピード[px] var FuruBasyo=document.body; //雪を降らせる場所 var FuruStartXSet=0; //降る範囲のX方向の始め（使用できるデータ形式はGetArea()を参照） var FuruWidthXSet=230; //降る範囲のX方向の幅 var FuruStartYSet=50; //降る範囲のY方向の始め var FuruWidthYSet=300; //降る範囲のY方向の幅 var Tumotta=new Array(); //積もった雪のデータ。Tumotta[ｎ]=undefined=オブジェクト要素なし //.Sts=状態（tumotta=積もっている、none=積もっていない） //.TumottaIti=積もった位置（Debug用。left、right、top、under） var Otiru=new Array(); //落ちる雪のデータ。Otiru[ｎ]=undefined=オブジェクト要素なし //.Sts=状態（otiru=落ちる、none=落ちていない） //.X=落ちる位置X[px] //.Y=落ちる位置Y[px] //.d=落ちる度合い（2剰してYに加算する） var Tukamu=new Array(); //掴む物のデータ。Tukamu[ｎ]=undefined=オブジェクト要素なしオブジェクトなど //.Num=Tumotta[ｎ]のｎ。Tumotta[ｎ].X=移動開始位置X、Tumotta[ｎ].Y=移動開始位置Y、Tumotta[ｎ].Sts="yokeru"となる。 //Debug表示エリア document.write("<SPAN id=DocDebug style=\"position:absolute; z-index:100; background-color:#EEE\"></SPAN>"); var YukiWidth; //雪の横幅[px] var YukiWidthP2; //雪の横幅/2[px] var YukiHeight; //雪の高さ[px] var YukiHeightP2; //雪の高さ[px] var TumottaWidthP2; //積もった雪の横幅の半分 var TumottaHeight; //積もった雪の高さ var TumottaChk=new Array(); //積もったチェック場所（降る雪座標に加算） var TumottaHosei=new Array(); //積もった画像の補正（積もっている雪座標に加算） var Path="Sub/",ZI=0; var FuruGaz=new Array(),I=0; //降る雪の画像 FuruGaz[I]=["Yuki0.gif"]; I++; FuruGaz[I]=["Yuki1.gif"]; I++; ZI=ZI+I; var TumottaGaz=new Array(),I=0; //積もった雪の画像 TumottaGaz[I]=["Tumotta0.gif"]; I++; TumottaGaz[I]=["Tumotta0a.gif"]; I++; TumottaGaz[I]=["Tumotta0b.gif"]; I++; TumottaGaz[I]=["Tumotta0c.gif"]; I++; TumottaGaz[I]=["Tumotta0d.gif"]; I++; TumottaGaz[I]=["Tumotta0e.gif"]; I++; TumottaGaz[I]=["Tumotta0f.gif"]; I++; TumottaGaz[I]=["Tumotta0g.gif"]; I++; //TumottaGaz[I]=["Tumotta0h.gif"]; I++; //オプション //TumottaGaz[I]=["Tumotta0i.gif"]; I++; //オプション //TumottaGaz[I]=["Tumotta0k.gif"]; I++; //オプション LastTumottaGaz=TumottaGaz[TumottaGaz.length-1]; ZI=ZI+I; var OtiruGaz=new Array(),I=0; //落ちる雪の画像 OtiruGaz[I]=["Otiru0.gif"]; I++; OtiruGaz[I]=["Otiru0a.gif"]; I++; OtiruGaz[I]=["Otiru0b.gif"]; I++; OtiruGaz[I]=["Otiru0c.gif"]; I++; OtiruGaz[I]=["Otiru0d.gif"]; I++; OtiruGaz[I]=["Otiru0e.gif"]; I++; OtiruGaz[I]=["Otiru0f.gif"]; I++; OtiruGaz[I]=["Otiru0g.gif"]; I++; OtiruGaz[I]=["Otiru0h.gif"]; I++; OtiruGaz[I]=["Otiru0i.gif"]; I++; OtiruGaz[I]=["Otiru0j.gif"]; I++; OtiruGaz[I]=["Otiru0k.gif"]; I++; OtiruGaz[I]=["Otiru0l.gif"]; I++; ZI=ZI+I; var YukiZI=ZI; //降る雪のz-index …途中省く… //● //処理：雪表示 //編集：2007.09.30 by T.A. function DispYuki(){ var I; if(!DispYuki.TimerID){ DispYuki.TimerID=setInterval("DispYuki()",TimeGamen); DispYuki.I=0; //処理速度軽減 DispYuki.TimeSa=0; } DispYuki.TimeS=new Date().getTime(); //¶Debug if(Math.random()<HasseiRitu){ //雪の発生 TourokuFuru(); } var I,Obj,X,Y; for(I=0; I<Yuki.length; I++){ //降る if(Yuki[I]!=undefined && Yuki[I].Sts=="furu"){ Obj=eval("IMGYuki"+I); X=Yuki[I].X; Y=Yuki[I].Y; Obj.style.left=X+"px"; Obj.style.top=Y+"px"; if(X>=FuruStartX && X<FuruStartX+FuruWidthX && Y>=FuruStartY-50 && Y<FuruStartY+FuruWidthY){ //降る範囲なら if(CheckTumoru(Obj,X,Y)){ //積もる Yuki[I].Sts="none"; Obj.style.display="none"; continue; }else{ //降る if(Yuki[I].Dir<1){ Yuki[I].X=Yuki[I].X-Yuki[I].SpeedX; }else{ Yuki[I].X=Yuki[I].X+Yuki[I].SpeedX; } Yuki[I].Y=Yuki[I].Y+Yuki[I].SpeedY; } }else{ //降る範囲ではない Yuki[I].Sts="none"; Obj.style.display="none"; } } } …省略… //● //処理：雪が積もるかのチェック //編集：2007.09.24 by T.A. //呼出：CheckTumoru(FuruObj,FuruX,FuruY,InhId) //戻値：true=積もるまたは降る範囲外。false=降る。 function CheckTumoru(FuruObj,FuruX,FuruY,InhId){ var FuruGazName,FuruW,FuruH; var CXL,CYL,ObjDL,StsL; var CXR,CYR,ObjDR,StsR; var CXU,CYU,ObjDU,StsU; var CXT,CYT,ObjDT,StsT; FuruGazName=FuruObj.src; //積もるかチェック FuruW=FuruObj.clientWidth; FuruH=FuruObj.clientHeight; CXL=FuruX-2; //左チェック位置 CYL=FuruY+FuruH/2; //note：document.elementFromPoint(X,Y)は、ウインドウの左上が(0,0)。座標がマイナス値だとnullになった。 ObjDL=document.elementFromPoint(CXL-FuruBasyo.scrollLeft,CYL-FuruBasyo.scrollTop); StsL=TumottaSts(ObjDL,InhId); if(StsL=="tumotta"){ //｢ && ObjDL.src.lastIndexOf(LastTumottaGaz)<0｣（｢｣内をif文の条件に加えると積もり方が変わる） TourokuTumotta(FuruGazName,FuruX,FuruY,"right",ObjDL); return true; } CXR=FuruX+FuruW+2; //右チェック位置 CYR=FuruY+FuruH/2; ObjDR=document.elementFromPoint(CXR-FuruBasyo.scrollLeft,CYR-FuruBasyo.scrollTop); StsR=TumottaSts(ObjDR,InhId); if(StsR=="tumotta"){ //｢ && ObjDR.src.lastIndexOf(LastTumottaGaz)<0｣（｢｣内をif文の条件に加えると積もり方が変わる） TourokuTumotta(FuruGazName,FuruX,FuruY,"left",ObjDR); return true; } CXT=FuruX+FuruW/2; //上チェック位置 CYT=FuruY-1; ObjDT=document.elementFromPoint(CXT-FuruBasyo.scrollLeft,CYT-FuruBasyo.scrollTop); StsT=TumottaSts(ObjDT,InhId); if(StsT=="tumotta"){ //｢ && ObjDT.src.lastIndexOf(LastTumottaGaz)<0｣（｢｣内をif文の条件に加えると積もり方が変わる） TourokuTumotta(FuruGazName,FuruX,FuruY,"under",ObjDT); return true; } CXU=FuruX+FuruW/2; //下チェック位置 CYU=FuruY+FuruH+2; ObjDU=document.elementFromPoint(CXU-FuruBasyo.scrollLeft,CYU-FuruBasyo.scrollTop); StsU=TumottaSts(ObjDU,InhId); if(StsU=="tumotta"){ //｢ && ObjDU.src.lastIndexOf(LastTumottaGaz)<0｣（｢｣内をif文の条件に加えると積もり方が変わる） TourokuTumotta(FuruGazName,FuruX,FuruY,"top",ObjDU); return true; } if(DispYuki.TimeSa>TimeGamen*1.5)return false; //初期の積もるチェック if(typeof StsT=="string" && StsT==""){ TourokuTumotta(FuruGazName,FuruX,FuruY,"under",ObjDT); return true; } if(typeof StsU=="string" && StsU==""){ TourokuTumotta(FuruGazName,FuruX,FuruY,"top",ObjDU); return true; } return false; //積もらない } …省く… //● //処理：落ちる雪の登録 //編集：2007.09.27 by T.A. //呼出：TourokuOtiru(GazNum,X,Y,KuzureruId) //引数： // GazNum=画像番号（1～ｎ） // X=落ちる位置X[px] // Y=落ちる位置Y[px] // KuzureruId=崩れるオブジェクトのID。 function TourokuOtiru(GazNum,X,Y,KuzureruId){ var I,Id,Gaz,S; if(GazNum>OtiruGaz.length)GazNum=OtiruGaz.length; //上限; for(I=0; I<Otiru.length+1; I++){ if(Otiru[I]==undefined){ //IMG要素がない Id="IMGYuki"+(YukiN+I); // Gaz=OtiruGaz[GazNum-1][0]; //落ちる画像を使う場合 Gaz=TumottaGaz[GazNum-1][0]; //落ちる画像を使わない場合 // ZI=OtiruGaz[GazNum-1][1]; //落ちる画像を使う場合 ZI=TumottaGaz[GazNum-1][1]; //落ちる画像を使わない場合 S="<IMG id="+Id+" class="+YukiClass+" src=\""+Path+Gaz+"\" style=\"position:absolute; left:"+X+"px; top:"+Y+"px; z-index:"+ZI+";\">"; document.body.insertAdjacentHTML("beforeEnd",S); Otiru[I]=new Array(); Otiru[I].Sts="otiru"; Otiru[I].X=X; Otiru[I].Y=Y; Otiru[I].d=0; Otiru[I].InhId=KuzureruId; break; }else if(Otiru[I].Sts=="none"){ //IMG要素はある Id="IMGYuki"+(YukiN+I); Obj=eval(Id); // Obj.src=Path+OtiruGaz[GazNum-1][0]; //落ちる画像を使う場合 Obj.src=Path+TumottaGaz[GazNum-1][0]; //落ちる画像を使わない場合 Obj.style.left=X+"px"; Obj.style.top=Y+"px"; // Obj.style.zIndex=OtiruGaz[GazNum-1][1]; //落ちる画像を使う場合 Obj.style.zIndex=TumottaGaz[GazNum-1][1]; //落ちる画像を使わない場合 Obj.style.display="inline"; Otiru[I].Sts="otiru"; Otiru[I].X=X; Otiru[I].Y=Y; Otiru[I].d=0; Otiru[I].InhId=KuzureruId; break; } } } …省く…