- ベストアンサー
ビンゴゲームの作成方法
- JavaScriptを使用してビンゴゲームを作成する方法を解説します。
- クリックして数字がランダムに表示されるビンゴゲームの作り方を解説します。
- ビンゴゲームに指定の数字を出す機能を追加する方法を解説します。
- みんなの回答 (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>
その他の回答 (1)
- Tacosan
- ベストアンサー率23% (3656/15482)
あ, C をやめて JavaScript にしたんだ. それはど~でもいいけど, 「『51』が出ればビンゴが出る状況で、51を必ず出す。」ためには「『51』が出ればビンゴが出る状況」であることを判断しなきゃならない. どうすればできると思いますか?
お礼
詳しい回答ありがとうございました。