ビンゴマシン
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>
お礼
回答ありがとうございます。 これってそんなに前の仕様だったんですか？ 何もそこのところ知らないのでちょっとびっくり。 ちょっと専門的すぎて理解に苦しんでいるのですが具体的にはどのように対応していく方がいいのでしょうか？