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:'MS Pゴシック'">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>
No.2ベストアンサー
- 回答日時:
こんな感じでどうですか?
とめたい数字があれば、数字をうてば最後の2文字でとめられます
<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>
No.1
- 回答日時:
あ, C をやめて JavaScript にしたんだ.
それはど~でもいいけど, 「『51』が出ればビンゴが出る状況で、51を必ず出す。」ためには「『51』が出ればビンゴが出る状況」であることを判断しなきゃならない. どうすればできると思いますか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
netscapeでもinnerTextやinnner...
-
tableの任意行にfocusをあてる
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
テーブルのサイズを変更するこ...
-
一覧から選択した行の行番号を...
-
jqueryとscriptでTABLEのセルを...
-
javascriptで表のます目と画像...
-
リンク色の変更
-
カレンダーの年月日の横に翌月...
-
マウスをブラウザの外に出した...
-
HTML中のTABLEのデータを抽出す...
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
return trueとreturn falseの用...
-
javascript による POST 送信時...
-
テキストボックスに入力された...
-
プルダウンメニューを表の中に...
-
VBSでブラウザ上のテキストボッ...
-
ラジオボタンの選択で解答・点...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報