ふわふわ■花火８　同時発射花火ランダム（文字）

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

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

上記の花火のJavaScriptを改造しました。
打ち上げられる複数の花火の文字種類指定数を多くして、その中から同時発射数分（見本では４個）を、ランダムに選択して発射します。

この場合のランダムは、一度４個選択されるとその選択された花火だけが、ずっと発射され続けます。
そのために「花火変更」ボタンを設置しました。
このボタンは実は単なる「更新」ボタンです。
ボタンを押すことで、違う４個のランダム選択がされるので、違う花火を見ることができます。
４個の花火のランダム選択では、同じ文字種類が複数選択されることもあります。

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

背景色・黒色のcc2.gif

背景色・透過のcc2.png

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

<!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高さ96pxの細い横長の画像です*/
background:url(cc2.gif) repeat-x left bottom fixed #000;/*★下側に横並び指定。固定位置。背景色黒色*/
overflow-y:scroll;/*★縦スクロールバーを表示する。この方がチラチラしないが不要ならこの1行は削除*/
overflow-x:hidden;/*★横スクロールバーを出さない。横スクロールバーが出ないと困るならこの1行は削除*/
}

/*★必須。花火変更用のボタンの位置指定*/
#Hbt{
position:fixed;/*★固定位置指定。お好みで*/
top:100px;/*★ボタンの上からの位置*/
left:30px;/*★ボタンの左からの位置*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記１行はボタン指定-->
<input type="button" value="花火変更" id="Hbt">

<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=["●","・","+","◆","★","◎","X","∴","☆"];
//★文字の色。色の数は花火の同時発射数と同じか以下で。順番表示なので同時発射数より多くしても表示しない
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++){
ranmoj=moj[Math.floor(Math.random()*len)];//追加。文字のランダム指定
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+"'>"+ranmoj+"</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);
}
document.getElementById("Hbt").onclick=function (){location.reload();}//更新することで花火変更
main();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

花火８■同時発射花火ランダム（文字） UP日時 : 2016/05/21

　花火８■同時発射花火ランダム（文字）　　　　UP日時 : 2016/05/21