BINGO卡片游戏是西方一种非常流行的赌博休闲游戏,具体规则是在一张5*5的表格上,每列的标题为B,I,N,G,O,第一列的数字只能是0~15,第二列16~30,第三列31~45,第四列56~60,第五列61~75。在表格中任意位置写上FREE,表格中的数字不能重复,这个实现起来不是很难。
页面代码:
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BINGO.aspx.cs" Inherits="JSDemo.EX.Base.BINGO" %>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml" >
5<head runat="server">
6 <title>BINGOFOR</title>
7 <script src="http://www.cnblogs.com/JS/bingoFor.js" type="text/javascript"></script>
8 <link href="http://www.cnblogs.com/CSS/BingoCSS.css" type="text/css" rel="Stylesheet" />
9</head>
10<body>
11 <form id="form1" runat="server">
12 <div>
13 <h1>A BINGO CARD</h1>
14 <table id="bingoTable">
15 <tr>
16 <th width="20%">B</th>
17 <th width="20%">I</th>
18 <th width="20%">N</th>
19 <th width="20%">G</th>
20 <th width="20%">O</th>
21 </tr>
22 <tr>
23 <td id="square0"> </td>
24 <td id="square1"> </td>
25 <td id="square2"> </td>
26 <td id="square3"> </td>
27 <td id="square4"> </td>
28 </tr>
29 <tr>
30 <td id="square5"> </td>
31 <td id="square6"> </td>
32 <td id="square7"> </td>
33 <td id="square8"> </td>
34 <td id="square9"> </td>
35 </tr>
36 <tr>
37 <td id="square10"> </td>
38 <td id="square11"> </td>
39 <td id="Free">Free</td>
40 <td id="square12"> </td>
41 <td id="square13"> </td>
42 </tr>
43 <tr>
44 <td id="square14"> </td>
45 <td id="square15"> </td>
46 <td id="square16"> </td>
47 <td id="square17"> </td>
48 <td id="square18"> </td>
49 </tr>
50 <tr>
51 <td id="square19"> </td>
52 <td id="square20"> </td>
53 <td id="square21"> </td>
54 <td id="square22"> </td>
55 <td id="square23"> </td>
56 </tr>
57 </table>
58 <p><a href="BINGO.aspx" id="reload">cilck here</a> to create a new card</p>
59 </div>
60 </form>
61</body>
62</html>
63
64
JS脚本:
window.onload = newcard;
var usedNums = new Array(76);
var colplace = new Array(0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 3, 4, 0, 1, 2, 3, 4,0,1,2,3,4);
function newcard() {
for (var i = 0; i < 24; i++) {
do {
var newnumber = (colplace[i] * 15) + Math.floor(Math.random() * 15) + 1;
}
while (usedNums[newnumber])
usedNums[newnumber] = true;
document.getElementById("square" + i).innerHTML = newnumber;
}
function anothercard() {
for(var i=0;i<usedNums.length;i++) {
usedNums[i] = false;
}
newcard();
return false;
}
}
css样式:
1body
2{}{
3 background-color:White;
4 color:Black;
5 font-size:20px;
6 font-family:"Lucida Bright",Verdana,Arial,Helvetica,sans-serif;
7}
8
9h1,th
10{}{
11 font-family:Georgia,"Times News Roman",Times,Serif;
12}
13
14h1{}{
15font-size:28px;
16}
17
18#bingoTbale{}{
19 border-collapse:collapse;
20 }
21#bingoTbale th,td{}{
22 padding:10px;
23 border:2px #666 solid;
24 text-align:center;
25 font-size:24px;
26 }
27#Free{}{
28 background-color:#F66;
29 }
30
31