ビンゴマシン
Java scriptとメモ帳使って作成したビンゴマシンを改良して、マシンのスタートとストップをEnterキーによる操作も出来るようにしたいと考えています。
しかしどうプログラミングしたらいいか分からず困っています。詳しい方ご教示よろしくお願い致します。
<style type="text/css">
body{ background-color: #fff; }
#drum{
width: 450px; height: 450px;
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: 450px;
height:450px; line-height: 450px;
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" or onClick="svset();"></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() }
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>
お礼
ありがとうございました！ 出来ました～！（＞＜ 「IEではテキストノードに対して、replaceChildとかinsertBeforeなどの操作が効かない」←これが原因なのですね・・・ ブラウザによって動いたり動かなかったりと、javascriptって難しいですね 教えて頂いたスクリプトをきちんと理解出来るように勉強します 本当にありがとうございました