ふわふわ■花火６　同時発射花火ランダム（画像）

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

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

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

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

背景色・黒色のgatc31.gif

背景色・透過のgatc31.png

パブリック・ドメイン（著作権無し）のフリー素材を
加工して作成した「街並み」画像です。
縮小表示していますが、横幅700px縦幅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{  /*★今回使用した背景画像は横幅700px高さ75pxの細い横長の画像です*/
background:url(gatc31.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/20
====================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★花火の画像指定。増減可能。画像を順番に"●",と区切って、いくつでも。更新毎に変化するランダム表示。最後の ] の前には ,(カンマ) 無し
var ga=["pe2.gif","piku6.gif","pe3.gif","pe20.gif","pe21.gif","soko20.gif","soko21.gif","soko22.gif"];
var myurl="";      //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

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。待ち時間。数値が小さいほど速い

//指定ここまで---------------------------------------------------------------
var len=ga.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++){
var ranga=ga[Math.floor(Math.random()*len)];//追加。画像のランダム指定
for(j=0;j<QB;j++){
opa[j]=Math.random()*(maxOp-miniOp)+miniOp;//追加
sss+="<img src="+myurl+ranga+" id='dot"+i+j+"' style='position:"+Pos+"; z-index:"+inZ+"; opacity:"+opa[j]+"; top:-100px; left:-100px;'>";
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/20

　花火６■同時発射花火ランダム（画像）　　　　UP日時 : 2016/05/20