ビンゴゲームの作成

解決済

質問者：daida-kent9066
質問日時：2012/08/16 15:29
回答数：2件

9月に大学のゼミ旅行でビンゴ大会をすることになったのでをJavaScript使ってビンゴゲームを作成しています。(カードではなくマシンの方です)。

イメージとしては

(1)クリック（スタート）
↓
(2)画面上に数字が早いスピードで次々に切り替わりながら表示される。
↓
(3)クリック（ストップ）
↓
(4)クリックした瞬間に表示されていた数字を表示したままストップ

といったようなものです。
しかしこのビンゴゲームはする時間が限られているので、早く終わらせるために接待ビンゴみたいな感じで途中で指定の数字を出せるようにしなければなりません。
例：「51」が出ればビンゴが出る状況で、51を必ず出す。

当方はパソコン、特にプログラミングに関しては素人で困っています。
何とかネットで調べながら上記の(1)～(4)までは出来ましたが、指定の数字を出すというところは苦戦しています。

詳しい方よろしくお願いします。

一応ソースは載せておきます。

<html>
<head>
</head>
<body>
<div align="center" onClick="bingo()" id="output" style="font-size:500px; font-color:black; font-family:'ＭＳＰゴシック'">0</div>
<script language="JavaScript">
MAX=75; // 表示する最大数
DURATION=100; // 小さいほど速い
num=new Array();
n=0;
for(i=0;i<MAX;i++){
num[i]=i+1;
}
rolling=false;
rollId=null;
function bingo(){
if(rolling){
rolling=false;
num.splice(n,1);
MAX--;
clearInterval(rollId);
}
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ベストアンサー

回答者： yambejp
回答日時：2012/08/16 22:30

こんな感じでどうですか？

とめたい数字があれば、数字をうてば最後の２文字でとめられます

<html>
<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>
<body>
<hr>
<h1>ビンゴ</h1>
<hr>
<table id="t">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td><td>40</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td><td>49</td><td>50</td></tr>
<tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td><td>60</td></tr>
<tr><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td><td>70</td></tr>
<tr><td>71</td><td>72</td><td>73</td><td>74</td><td>75</td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<div onClick="bingo()" id="output" ></div>
<hr>
<input type="button" value="reset" onclick="resetFunc()">
</body>
</html>