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样式:
1
body
2
{
}{
3
background-color:White;
4
color:Black;
5
font-size:20px;
6
font-family:"Lucida Bright",Verdana,Arial,Helvetica,sans-serif;
7
}
8
9
h1,th
10
{
}{
11
font-family:Georgia,"Times News Roman",Times,Serif;
12
}
13
14
h1{
}{
15
font-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