- ベストアンサー
プログラミングでのビンゴマシンの作成について
- プログラミングでビンゴマシンを作成するには、htmlのビンゴマシンで出た数字を表示させることが可能です。赤枠で囲った部分にマシンを操作して出た数字を表示するためのタグを打ち込めば良いです。
- また、ドラムロールを入れることも可能ですが、音声データを取り入れる必要があります。
- ビンゴマシンのソースコードには、数字をランダムに表示する機能やクリア機能があります。ビンゴマシンを回すためには、セットボタンをクリックするかエンターキーを押す必要があります。
- daida-kent9066
- お礼率50% (68/134)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
// 以下つづき 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/1290614615 音の再生に関してはテストできる環境にないので、このあたりをご参考に。 （検索すればいろいろ見つかるはずです。） http://jabnz.blog69.fc2.com/blog-entry-546.html http://q.hatena.ne.jp/1179831319 http://webos-goodies.jp/archives/50855398.html
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… ご提示のソースは2つの文書をまぜこぜにしたような？感じでよく理解できないのですが、これ（↓）のHTML版ということでしょうか？ http://okwave.jp/qa/q7644357.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() } // つづく
お礼
いえいえわざわざありがとうございました。 本当に感謝しています。