Bingo游戏简介

Bingo卡片是5×5的正方形,五个列上标着B-I-N-G-O,美国的Bingo游戏格子中的数字通常在70以内随机抽取,英国和澳大利亚的是在90以内。正中间通常是一个空的格子,常常印着单词free。每列可以包含的数字范围如下:

    B列包含着数字1~15

    I列包含着数字16~30

    N列包含着数字31~45

    G列包含着数字46~60

    O列包含着数字61~75

游戏规则:参与游戏的人没人拿一张Bingo,又另外一个人或专业人士叫号或随机抽取号码,就像拍卖会一样,游戏者根据叫号,迅速标出卡片上的这些数字,若有一个游戏者中奖,那么这一轮游戏就算结束。中奖样式有多种多样,BINGO可以是垂直、水平、或对角线分布的。美国的Bingo中奖方式有12种,即5横行,5纵列再加两个对角线。如下图是一种中奖方式:

 

现在,利用HTML+CSS+Javascript来制作一个bingo卡片,来进行宾果游戏。

 

如下是HTML代码:

 
  
  1. <body> 
  2. <center> 
  3. <h1>Create A Bingo Card</h1> 
  4. <table> 
  5.     <tr> 
  6.         <th>B</th> 
  7.         <th>I</th> 
  8.         <th>N</th> 
  9.         <th>G</th> 
  10.         <th>O</th> 
  11.     </tr> 
  12.     <tr> 
  13.         <td id="square0">&nbsp;</td> 
  14.         <td id="square5">&nbsp;</td> 
  15.         <td id="square10">&nbsp;</td> 
  16.         <td id="square14">&nbsp;</td> 
  17.         <td id="square19">&nbsp;</td> 
  18.     </tr> 
  19.     <tr> 
  20.         <td id="square1">&nbsp;</td> 
  21.         <td id="square6">&nbsp;</td> 
  22.         <td id="square11">&nbsp;</td> 
  23.         <td id="square15">&nbsp;</td> 
  24.         <td id="square20">&nbsp;</td> 
  25.     </tr> 
  26.     <tr> 
  27.         <td id="square2">&nbsp;</td> 
  28.         <td id="square7">&nbsp;</td> 
  29.         <td id="free">Free</td> 
  30.         <td id="square16">&nbsp;</td> 
  31.         <td id="square21">&nbsp;</td> 
  32.     </tr> 
  33.     <tr> 
  34.         <td id="square3">&nbsp;</td> 
  35.         <td id="square8">&nbsp;</td> 
  36.         <td id="square12">&nbsp;</td> 
  37.         <td id="square17">&nbsp;</td> 
  38.         <td id="square22">&nbsp;</td> 
  39.     </tr> 
  40.     <tr> 
  41.         <td id="square4">&nbsp;</td> 
  42.         <td id="square9">&nbsp;</td> 
  43.         <td id="square13">&nbsp;</td> 
  44.         <td id="square18">&nbsp;</td> 
  45.         <td id="square23">&nbsp;</td> 
  46.     </tr> 
  47. </table> 
  48. <p><a href="./3.1.html" id="reload">Click here</a>to create a new card</p> 
  49. </center> 
  50. </body> 

以下是CSS代码:

 
  
  1. <style type="text/css"> 
  2. body { 
  3.     background-color:#FFF; 
  4.     color:black; 
  5.     font-size:20px; 
  6.     font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 
  7.     } 
  8. h1,th { 
  9.     font-family:Georgia, "Times New Roman", Times, serif; 
  10.     } 
  11. h1{ 
  12.     font-size:28px; 
  13.     } 
  14. table { 
  15.     border-collapse:collapse; 
  16.     } 
  17. th , td { 
  18.     padding:10px; 
  19.     border:2px solid #666; 
  20.     text-align:center; 
  21.     width:20% 
  22.     } 
  23. #free, .pickedBG { <!--中间的空格和点击后表格的样式-->
  24.     background-color: #f66; 
  25.  
  26. .winningBG { 
  27.     background-p_w_picpath: url(p_w_picpaths/redFlash.gif); 
  28. </style> 

以下是Javascript代码:

 
  
  1. <script type="text/javascript"> 
  2.     window.onload = initAll
  3.     var usedNums = new Array(76);<!--设置标记数组,一个数字对应一个元素--> 
  4.      
  5.     function initAll(){ 
  6.         document.getElementById("reload").onclick = anotherCard
  7.         newCard(); 
  8.         } 
  9.          
  10.     function newCard(){ 
  11.         for(var i=0;i<24;i++){ 
  12.             setSquare(i); 
  13.             } 
  14.         } 
  15.      
  16.     function setSquare(thisSquare){ <!--向表格填充数字,形参为表格序号-->
  17.         var currSquare = "square" + thisSquare; <!--获得方格的id名-->
  18.         var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4); 
  19.         var colBasis = colPlace[thisSquare] * 15; 
  20.         var newNum; 
  21.          
  22.         do{ 
  23.             newNum = colBasis + getNewNum()+1; 
  24.             }while(usedNums[newNum]); <!--找出没被标记的元素,防止出现重复数字--> 
  25.             usedNums[newNum] = true; 
  26.             document.getElementById(currSquare).innerHTML = newNum
  27.             document.getElementById(currSquare).className = ""
  28.             document.getElementById(currSquare).onmousedown = toggleColor
  29.         }<!--end of setSquare--> 
  30.          
  31.     function toggleColor(evt){ <!--鼠标按下事件处理函数-->
  32.         if(evt){<!--W3c标准--> 
  33.             var thisSquare = evt.target; 
  34.             } 
  35.         else{<!--Microsoft标准--> 
  36.             var thisSquare = window.event.srcElement; 
  37.             } 
  38.         if(thisSquare.className == ""){ <!--如果没有定义类,那么为格子添加类-->
  39.             thisSquare.className = "pickedBG"
  40.             } 
  41.         else{ <!--如果按错再按一下便能恢复-->
  42.             thisSquare.className = ""
  43.             } 
  44.         checkWin();
  45.         }<!--end of toggleColor--> 
  46.          
  47.     function getNewNum(){ <!--获取15以内的随机数字,并取整-->
  48.         return Math.floor(Math.random()*15); 
  49.         } 
  50.          
  51.     function anotherCard(){ 
  52.         for(var i=1;i<usedNums.length;i++){ 
  53.             usedNums[i]=false; 
  54.             } 
  55.         newCard(); 
  56.         return false;<!--停止对用户单击的处理,这样就不会加载href指向的页面--> 
  57.         } 
  58.  
  59.     function checkWin(){ <!--检验是否获胜>
  60.         var winningOption = -1; 
  61.         var setSquares = 0;<!----> 
  62.         var winners = new Array(31,992,15360,507904,541729,557328,1083458,2162820,4329736,8519745,8659472,16252928); 
  63.          
  64.         for(var i=0;i<24;i++){ 
  65.             var currSquare = "square"+i; 
  66.             if(document.getElementById(currSquare).className != ""){ 
  67.                 document.getElementById(currSquare).className = "pickedBG"
  68.                 setSquaressetSquares = setSquares | Math.pow(2,i); 
  69.                 } 
  70.             } 
  71.              
  72.         for(var i=0;i<winners.length;i++){ 
  73.             if((winners[i] & setSquares) == winners[i]){ 
  74.                 winningOption = i; 
  75.                 } 
  76.             }  
  77.          
  78.         if(winningOption > -1){ 
  79.             for(var i=0;i<24;i++){ 
  80.                 if(winners[winningOption] & Math.pow(2,i)){ 
  81.                     currSquare = "square" + i; 
  82.                     document.getElementById(currSquare).className = "winningBG"
  83.                     } 
  84.                 } 
  85.             } 
  86.         } 
  87. </script>