JavaScriptでビンゴ! (PC )
友人が町内会の副班長になり、超ご多忙。
断れない性格だから、なんでも安請け合いしてるんだろうなぁ(^^;)
そんな彼から、「ビンゴゲームの抽選器となるソフトない?」との問い合わせ。
町内会のイベントでビンゴをやるらしいのだが、普通の「ガラガラ」回す抽選器が分かりにくい、との他の役員さんから要望があったらしい。
ご多忙な彼の手助けをするべく、JavaScriptで作っちゃいました。
Excelの方が簡単に作れるんだけど、現在、Ajaxがマイブームとなっているもので。
無駄な労力と言われそうですが・・・。
で、こんな感じになりました。
それにしても、町内会でもIT化が進んでるのか(^^;)。
<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>