JavaScriptでビンゴ! (PC )

友人が町内会の副班長になり、超ご多忙。
断れない性格だから、なんでも安請け合いしてるんだろうなぁ(^^;)
そんな彼から、「ビンゴゲームの抽選器となるソフトない?」との問い合わせ。
町内会のイベントでビンゴをやるらしいのだが、普通の「ガラガラ」回す抽選器が分かりにくい、との他の役員さんから要望があったらしい。

ご多忙な彼の手助けをするべく、JavaScriptで作っちゃいました。
Excelの方が簡単に作れるんだけど、現在、Ajaxがマイブームとなっているもので。
無駄な労力と言われそうですが・・・。

で、こんな感じになりました。

JavaScriptでビンゴ!

<HTML lang="ja">
<HEAD>

<STYLE TYPE="text/css">
td{
	width:50px;
	height:50px
}
font{
	font-size:20px;
	font-weight:bold;
}
div{
	width:35px;
	height:35px;
	padding:5px;
	float:left;
	margin:1px;
}
</STYLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META name="author" content="kuni">
<TITLE>ビンゴ抽選</TITLE>
</HEAD>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!--
timeID = 10;

maxnum = 99;//ビンゴの最大数
matrixrow = 5;//表の行数
matrixcol = 5;//表の列数
rnddisp = 10;//乱数確定前の乱数表示回数
rndinv = 0.01;//乱数表示間隔[秒]

//乱数発生
function rdm_num(){
	rdm=Math.ceil(Math.random()*maxnum);
	return rdm;
}
//乱数確定前の演出
function substart(){
	invnum = 0;
	m=eval(document.getElementById('number').firstChild.nodeValue);
	m=m+1;
	if(m<matrixrow*matrixcol){
		td=document.getElementById(m).parentNode;
		td.style.backgroundColor='red';
		timeID = setInterval('subdelay2('+m+')',1000*rndinv);
		//subdelay(m);
	}else{
		alert('終了しました');
	}
}
//乱数確定前のランダム表示演出
function subdelay2(place){
	k=rdm_num();
	document.getElementById(place).firstChild.nodeValue=k;
	if(invnum>rnddisp){
		clearInterval(timeID);
		document.getElementById(place).firstChild.nodeValue=num[place];
		document.getElementById('number').firstChild.nodeValue=place;
		return;
	}else{
		invnum++;
	}
}
//乱数を重複なく抽出
num=new Array();
for(i=0;i<matrixrow*matrixcol;i++){
	sameflg=false;
	num[i]=rdm_num();
	for(j=0;j<i;j++){
		if(num[j]==num[i]){
			sameflg=true;
			break;
		}
	}
    if(sameflg){i=i-1;}
}
//-->
</SCRIPT>

<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
<!--
//乱数表の表示
for(i in num){
	document.write("<DIV><FONT COLOR="#FFFFFF" id=""+i+"">-</FONT></DIV>");
	if(i%matrixrow==matrixrow-1)
	document.write("<BR CLEAR="all">");
}
//-->
</SCRIPT>

<INPUT TYPE="button" VALUE="スタート" onClick="substart();">
<INPUT TYPE="button" VALUE="クリア" onClick="location.reload()">
<FONT COLOR="#FFFFFF" id="number">-1</FONT>

</BODY>
</HTML>

それにしても、町内会でもIT化が進んでるのか(^^;)。

LINEで送る
Pocket

You can leave a response, or trackback from your own site.


コメントをどうぞ

*
コンメントされる際は、画像に表示された文字を入力してください。
Anti-spam image