ふわふわ■花火７　同時発射花火（文字）

●2016/05/21：即時関数で囲んで、グローバル変数を消しました。

■画像の花火で、画像種類が同時発射数以下のJavaScriptはこちら→　花火５■同時発射花火（画像）

上記の花火のJavaScriptを改造しました。
花火が画像ではなく文字で、複数の文字の花火が同時に発射される、花火のJavaScriptです。
文字と文字色が複数指定できますが、どちらの数値も同時発射数と同じか以下で指定して下さい。
ランダムではなく順番表示なので、同時発射数以上を指定しても表示されません。

少しでも派手に見せる（笑）ために、JavaScriptのソースの中で、CSSの「text-shadow（文字の影指定）」を付けました。
見本では、花火の文字に黄色の影が付けてあります。
ただし、この「text-shadow（文字の影指定）」を付けると、PCに負荷がかかって速度が遅くなります。
お好みで指定して下さい。

■花火の文字種類をランダムに変更できるJavaScriptはこちら→　花火８■同時発射花火ランダム（文字）

背景色・黒色のgatc32.gif

背景色・透過のgatc32.png

パブリック・ドメイン（著作権無し）のフリー素材を
加工して作成した「街並み」画像です。
縮小表示していますが、横幅600px縦幅75pxです。
右クリックでどうぞ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ふわふわ■花火７　同時発射花火（文字）</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{  /*★今回使用した背景画像は横幅600px高さ75pxの細い横長の画像です*/
background:url(gatc32.gif) repeat-x left bottom fixed #000;/*★下側に横並び指定。固定位置。背景色黒色*/
overflow-y:scroll;/*★縦スクロールバーを表示する。この方がチラチラしないが不要ならこの1行は削除*/
overflow-x:hidden;/*★横スクロールバーを出さない。横スクロールバーが出ないと困るならこの1行は削除*/
}
--></style>
<!--★背景画像指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==================================================================================
同時発射花火（文字）By Original: WakuWaku (http://hp.vector.co.jp/authors/VA012735/script/happys.htm)
Web Site:  http://homepage1.nifty.com/wakuhome/java/
最新ブラウザ対応にして複数文字指定、透過指定追加。★2016/05/21
====================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★文字指定。順番表示なので花火の同時発射数と同じか以下で。最後の ] の前には ,(カンマ) 無し
var moj=["●","∴","+","★"];
//★文字の色指定。順番表示なので色の数は花火の同時発射数と同じか以下で。同時発射数より多くしても表示しない
var Clrs=["#f0f","#0f0","#f00","#6cf"];  
var fz=12;         //★花火の文字のサイズ。単位px。ブラウザのクロムとオペラが対応しないので10px以下は指定しない

var QA=4;          //★原本3。花火の同時発射数
var QB=15;         //★原本15。花火の破裂ドット数(花火が開いた時の画像数)
var maxH=10;       //★原本5。爆発の時の花火の最大の大きさ
var inZ=-1;        //★画像や文章の上に流れるなら 1 。下に隠れるなら -1
var Pos="fixed";   //★スクロールで移動するか？　固定:fixed 　移動:absolute
var maxOp=1;       //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.5;    //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var speed =30;	   //★原本10。待ち時間。数値が小さいほど速い

/*★↓文字の影指定をCSS形式で記述。黄色の影指定。好みで変更可。指定不要ならvar fcss="";で。この指定をするとPCの速度が遅くなる*/
var fcss="text-shadow:0px -5px 5px #ff0;";

//指定ここまで---------------------------------------------------------------
var len=moj.length, clen=Clrs.length, opa=[];//追加
var move=true;
var n,i,j;
var w=window.innerWidth;
var h=window.innerHeight;
var sx=0,sy=0;
var s=new Array(QA), vx=new Array(QA), vy=new Array(QA), x=new Array(QA), y=new Array(QA), c=new Array(QA);
function doubleArray(array,n){for(i=0;i<array.length;i++){array[i]=new Array(n);}}
doubleArray(s,QB); doubleArray(vx,QB); doubleArray(vy,QB); doubleArray(x,QB); doubleArray(y,QB); doubleArray(c,4);
var b=new Array(QA);
for(n=0;n<QA;n++){b[n]=-1;}
var sss="";
for(i=0;i<QA;i++){ for(j=0;j<QB;j++){
opa[j]=Math.random()*(maxOp-miniOp)+miniOp;//追加
sss+="<span id='dot"+i+j+"' style='position:"+Pos+"; font-size:"+fz+"px; z-index:"+inZ+"; opacity:"+opa[j]+"; top:-100px; left:-100px; color:"+Clrs[i%clen]+";"+fcss+"'>"+moj[i%len]+"</span>";
document.write(sss);
}}
function main(){
for(n=0;n<QA;n++){
	switch(b[n]){
		case -1:
			x[n][0]=Math.random()*(w-100)+50+sx;
			s[n][0]=Math.random()*15+11;	//初速度
			y[n][0]=h-100+sy;//■原本h-31+syだと花火の位置が下過ぎるので修正。元に戻しても可
			b[n]=0;
			c[n][0]=Math.floor(Math.random()*80)+5;	//打ち上げまでの時間
			c[n][2]=Math.floor(Math.random()*2);
			c[n][3]=0;
			break;
		case 0:
			c[n][0]--;
			if(c[n][0]==0){b[n]=1;}
			break;
		case 1:
			y[n][0]-=s[n][0];
			s[n][0]-=1;
			document.getElementById("dot"+n+0).style.top=y[n][0]+"px";
			document.getElementById("dot"+n+0).style.left=x[n][0]+"px";
			if(s[n][0]<=0){b[n]=2;}
			break;
		case 2:
			var k=Math.floor(Math.random()*maxH+1);	//爆発の大きさ
			for(i=0;i<QB;i++){
			y[n][i]=y[n][0];
			x[n][i]=x[n][0];
			var jj=Math.random()*k+1.0;
			var m=Math.random()*Math.PI*2;
			vx[n][i]=jj*Math.cos(m);
			vy[n][i]=jj*Math.sin(m);
			}
			b[n]=3;
			c[n][1]=0;
			break;
		case 3:
			c[n][3]++;
			var bool=true;
			for(i=0;i<QB;i++){
				if(y[n][i]<h-20+sy){
					bool=false;
					document.getElementById("dot"+n+i).style.top=y[n][i]+"px";
					document.getElementById("dot"+n+i).style.left=x[n][i]+"px";
					x[n][i]+=vx[n][i];
					y[n][i]+=vy[n][i];
					if(c[n][3]>5){vy[n][i]+=1.0;}
					}else{document.getElementById("dot"+n+i).style.top=-100+"px";}
				}
				if(bool){b[n]=-1;}
			}
	}
setTimeout(main, speed);
}
main();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

花火７■同時発射花火（文字） UP日時 : 2016/05/21

　花火７■同時発射花火（文字）　　　　UP日時 : 2016/05/21