プログラミングでのビンゴマシンの作成について

解決済

質問者：daida-kent9066
質問日時：2013/07/09 13:12
回答数：2件

メモ帳にビンゴマシンのソースを打ち込んでプログラミングでビンゴマシンを作成しています。
現段階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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： fujillin
回答日時：2013/07/17 16:15

//　以下つづき

　　
　return function(n , id1, id2, speed){
　/* Max number, id for drum, id for result, speed(1to10) */
　　var obj = new drum();
　　obj.max = n;
　　obj.drum = document.getElementById(id1);
　　obj.result = document.getElementById(id2);
　　obj.height = obj.drum.clientHeight;
　　obj.speed = Math.max(1, Math.min(10, speed));
　　obj.reset();
　　return obj;
　}
})();

//************ テスト用スクリプト

var testDrum = DrumCreate(75, "drum", "result", 5);
/* Max number, id for drum, id for result, speed(1to10) */

addEvent("reset", "click", function(){testDrum.reset();});
addEvent("switch", "click", function(){
　if(testDrum.status) testDrum.stop(); else testDrum.roll();
});

/*@cc_on@*/
function addEvent(elm, eventname, func){
(typeof elm === "string"?document.getElementById(elm):elm)./*@if(1)attachEvent(
'on' + @else@*/addEventListener(/*@end@*/ eventname, func, false);
}

</script>

</body>
</html>

…って、先ほど検索してみたら、ご提示のものとほぼ同じものがヒットしました。（サンプル不要でしたね）
　http://d.hatena.ne.jp/replication/20101125/12906 …

音の再生に関してはテストできる環境にないので、このあたりをご参考に。
（検索すればいろいろ見つかるはずです。）
　http://jabnz.blog69.fc2.com/blog-entry-546.html
　http://q.hatena.ne.jp/1179831319
　http://webos-goodies.jp/archives/50855398.html

- 0
- 件

通報する

この回答へのお礼

いえいえわざわざありがとうございました。
本当に感謝しています。

通報する

お礼日時：2013/07/21 12:26

No.1

回答者： fujillin
回答日時：2013/07/17 16:10

回答がないみたいなので…

ご提示のソースは2つの文書をまぜこぜにしたような？感じでよく理解できないのですが、これ（↓）のHTML版ということでしょうか？
　http://oshiete.goo.ne.jp/qa/7644357.html

＞出た数字を表示させる可能でしょうか？
ご提示のものを作成できるのならたいしたことは無いはずです。
表示したい要素の内容に、出た数字のテキストを追加すればよいので、入れ替わる数字を表示させているのとほぼ同様の方法で可能です。

ご提示のコードはいろいろな仕掛けをしているようですが、よくわからないので、勝手に単純な部分のみのサンプルを作成してみました。
　*生成する最大数とドラムに使用する要素のid、結果表示用要素のid、回転速度などを指定するようにしてあります。
　*おまけで、縦スライドで数字が変わるようにしていますが、速度を10にすれば一気にかわるので見た目はスライドしなくなります。
スイッチはとりあえずボタンにしてありますが、ご提示のような画面クリックやキー入力も同様に設定可能です。

（書きっぱなしのため要領が悪いようで、長くなったので2分割になってしまいました）

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body{ background-color: #fff; }
#drum{
width: 500px; height: 500px;
margin: 30px auto;
position: relative; overflow: hidden;
background-color: #fff;
border: 2px solid #eee;
border-color: #666 #eee #eee #666;
}
#drum span{
display: block;
color: #000; font-size: 500px;
height:500px; line-height: 500px;
text-align: center;
border-bottom: 2px groove #eee;
position: relative;
}
div.result{ background-color: #fff; padding: 0.5em; position:relative; }
#result{ width:100%; overflow:hidden; zoom:1; }
#result span{
display:block; float:left;
width:2.5em; text-align:center;
color: #000; font-weight: bold;
}
#result span:last-child{ color: #f00; }
</style>
</head>

<body>
<div>
<div id="drum"></div>
</div>
<hr>
<div>
<input type="button" id="reset" value="reset">
<input type="button" id="switch" value="start/stop">
</div>
<div class="result">
<div>◇◇ 結果 ◇◇</div>
<div id="result"></div>
</div>

<script type="text/javascript">
//********** rolling drum
var DrumCreate = (function(){
　var rand = function(n){ return Math.random() * n | 0; }

　var shuffle = function(ary){
　　　for(var i = ary.length - 1; i > 0; i--){
　　　　var j = rand(i + 1), tmp = ary[i];
　　　　ary[i] = ary[j], ary[j] = tmp;
　　　}
　}

　var add = function(elm, str, flag){
　　var e = document.createElement("span");
　　e.appendChild(document.createTextNode(str));
　　if(flag) elm.insertBefore(e, elm.firstChild)
　　　else elm.appendChild(e);
　}

　var clear = function(elm){
　　while(elm.firstChild) elm.removeChild(elm.firstChild);
　}

　var init = function(obj){
　　if(obj.intervalId) clearInterval(obj.intervalId);
　　for(var i=obj.max; i; i--) obj.nums[i-1] = i;
　　shuffle(obj.nums);
　　obj.status = false;
　　obj.step = obj.height/(11 - obj.speed) + 0.5 | 0;
　　clear(obj.drum);
　　clear(obj.result);
　　add(obj.drum, "-", true);
　}

　var setPos = function(elm, pos){
　　var nodes = elm.getElementsByTagName("span");
　　var i, node, p = -pos + "px";
　　for(i=0; node=nodes[i++];) node.style.top = p;
　}

　var slide = function(obj){
　　var pos = obj.height, n = obj.nums.length;
　　if(!n){
　　　clear(obj.drum);
　　　add(obj.drum, "-");
　　　obj.stop();
　　　return;
　　}
　　obj.index = rand(n);
　　obj.value = obj.nums[obj.index];
　　add(obj.drum, obj.value, true);
　　setPos(obj.drum, pos);
　　obj.intervalId = setInterval(function(){
　　　pos = pos>obj.step?pos-obj.step:0;
　　　setPos(obj.drum, pos);
　　　if(pos === 0){
　　　　clearInterval(obj.intervalId);
　　　　obj.drum.removeChild(obj.drum.lastChild);
　　　　if(obj.status) slide(obj)
　　　　else {
　　　　　add(obj.result, obj.value);
　　　　　obj.nums.splice(obj.index, 1);
　　　　　if(typeof obj.endRoll === "function") obj.endRoll.call(obj);
　　　　}
　　　}
　　}, 10);
　}

　var drum = function(n){ this.nums = []; };
　drum.prototype = {
　　roll: function(){
　　　if(this.status) return;
　　　this.status = true;
　　　if(typeof this.beforeRoll === "function") this.beforeRoll();
　　　slide(this);
　　},
　　stop: function(){ this.status = false; },
　　reset: function(){ init(this); },
　　beforeRoll: new Function(),
　　endRoll: new Function()
　}
　　
//　つづく