プログラミングでのビンゴマシンの作成について
メモ帳にビンゴマシンのソースを打ち込んでプログラミングでビンゴマシンを作成しています。
現段階1～75までの数字をランダムで表示するところまでは完成しています。
次の段階として図の赤で囲った部分にマシンを操作して出た数字を全て表示させればと考えています。htmlのビンゴマシンで出た数字を表示させる可能でしょうか？また可能な場合どの部分にどのようなタグを打ち込めばいいのですか？
またビンゴマシンを回している間にドラムロールを入れたいのですが、音声データを入れることも可能でしょうか？
以下はソースです。
<html>
<div>
<input type="text" id="input">
<input type="button" value="セット" onClick="svset();">
<input type="button" value="クリア" onClick="svclear();">
<p id="svecho"> </p>
</div>
<head>
<script>
window.onload=function(){resetFunc();}
try{
document.addEventListener('keydown',function(e){keydownfunc(e)},true);
}catch(e){
document.attachEvent('onkeydown',function(e){keydownfunc(e)});
}
var arr=new Array(); //開く順を配列にとっておく
var max=75; //上限
var cur=0; //いくつ開いているかカレント
var nxt=0; //次開きたい番号をとっておく場所
function resetFunc()
{
document.getElementById("output").innerHTML="-";
for(var i=0;i<max;i++){
arr[i]=i+1;
}
for(var i=0;i<max -1;i++){
var n1=Math.floor(Math.random()*(max-i-1));
var n2=arr[n1];
arr[n1]=arr[max-i-1];
arr[max-i-1]=n2;
}
var tds=document.getElementsByTagName("td");
for(var i in tds){tds[i].className="";}
cur=0;
}
function keydownfunc(e){
var t = (e.srcElement || e.target);
var k=e.keyCode;
if(k==13) bingo();
if(k>=96 && k<=105){
nxt=nxt%10*10+(k-96);
}
}
function bingo(){
if(typeof timerID!="undefined"){
clearInterval(timerID);
for(var i=cur;i<max;i++){
if(arr[i]==nxt){
var tmp=arr[i];
arr[i]=arr[cur];
arr[cur]=tmp;
nxt=0;
break;
}
}
var n=arr[cur];
document.getElementById("output").innerHTML=arr[cur];
delete(timerID);
cur++;
document.getElementById("t").rows[Math.floor((n-1)/10)].cells[(n-1)%10].className="sumi";
}else if(cur>=max){
document.getElementById("output").innerHTML="-";
resetFunc();
}else{
timerID=setInterval(function(){
var n=Math.floor(Math.random()*max)+1;
document.getElementById("output").innerHTML=n;
},100);
}
}
</script>
<style>
h1{
text-align:center;
}
div#output{
text-align:center;
height:520px;
font-size:500px;
color:black;
}
table#t{
position:absolute;
}
table#t td{
text-align:center;
}
td.sumi{background-Color:red;}
</style>
</head>
<style>
h1{
text-align:center;
}
div#output{
text-align:center;
height:520px;
font-size:500px;
color:black;
}
table#t{
position:absolute;
}
table#t td{
text-align:center;
}
td.sumi{background-Color:red;}
</style>
</head>
<body>
<div onClick="bingo()" id="output" ></div>
<hr>
<input type="button" value="reset" onclick="resetFunc()">
</body>
<head>
</head>
<body>
<script language="JavaScript">
MAX=75; // 表示する最大数
sval=-1; //接待用数字
svalinx=-1; //接待用数字の配列インデックス
DURATION=100; // 小さいほど速い
num=new Array();
n=0;
for(i=0;i<MAX;i++){
num[i]=i+1;
sval=-1; //接待用数字
svalinx=-1; //接待用数字の配列インデックス
}
rolling=false;
rollId=null;
function svset(){
var ii;
var svin=document.getElementById('input')
var sv=svin.value-0;
var svecho=document.getElementById('svecho');
svecho.innerHTML='x';
sval=-1;
svalinx=-1;
for(ii in num){
if(sv==num[ii]){sval=sv; svalinx=ii; break;}
}
if(sval > 0){
svecho.innerHTML=sval+','+svalinx;
svin.value='';
}
}
function svclear(){
var svecho=document.getElementById('svecho');
svecho.innerHTML='x';
sval=-1;
svalinx=-1;
}
function bingo(){
if(rolling){
rolling=false;
clearInterval(rollId); // 先に止めないと・・・
if(sval >= 0){ // ここが追加。接待番号にすりかえる。
n=svalinx;
document.getElementById("output").innerHTML=num[n];
sval=-1;
svalinx=-1;
document.getElementById('svecho').innerHTML='x';
}
num.splice(n,1);
MAX--;
}
else{
rolling=true;
rollId=setInterval("roll()", DURATION);
}
}
function roll(){
n=Math.floor(Math.random()*MAX);
document.getElementById("output").innerHTML=num[n];
}
</script>
</body>
</html>
お礼
とても参考になりました、ありがとうございます！