論基于JavaScript語言的Bingo游戲實現

鄧家榮 吳 焱

(1.文山學院，云南 文山 663000；2.昆明冶金高等專科學校，云南 昆明 650033)

1.引言

“Bingo”是一種填寫格子的卡片游戲，因游戲中第一個成功者以喊“Bingo”表示取勝而得名。在英美國家有一個說法是：“If you have never played Bingo before，then you are probably in am inority.”[1]。在廣泛使用互聯網和互聯網服務的今天，在網站上進行Bingo游戲也是玩家的新選擇。

JavaScript是一種能給網頁創建動態的用戶界面、控制瀏覽器、處理表單、設置cookie、即時構建HTML頁面以及創建基于Web的應用程序[2]。用JavaScript語言實現Bingo游戲可以更好地讓用戶體驗到網站游戲的魅力。

2.Bingo游戲規則

首先，所有參加游戲的人購買一張或多張Bingo票。一張Bingo票是一張5格x5格的卡片，如圖1所示。卡片中的5列分別對應著“B”、“I”、“N”、“G”、“O”5個字母。每張卡片上隨機地分布著從1到75的24個號碼。卡片上中間那個格為空白區域，稱作“Free Space”，可以代表“填充”或“不填充”，依參賽者的意愿而定[1]。

圖1 Bingo票示例

“B”列中的號碼取自從1到15的數；“I”列中的號碼取自從16到30的數；“N”列中的號碼取自從31到45的數；“G”列中的號碼取自從46到60的數；“O”列中的號碼取自從61到75的數。

游戲開始時由叫號員依次隨機地選取1到75的號碼，并念出來。如念出來的號碼出現在游戲玩家自己的Bingo卡片上，參賽者則將該號碼所在的格子涂黑（填充）。如果自己的某張卡片上涂黑的格子組成了規定的Bingo圖案中的任何一個，則高喊“Bingo”！第一個正確地喊出“Bingo”的參賽者即為獲勝者。

不同的游戲比賽場所可以規定不同的Bingo圖案，如圖2所示為部分典型的Bingo圖案。

圖2 典型的Bingo圖案

3.游戲的算法設計

3.1 卡片界面的實現：

用HTML的＜table>、＜tr>、＜th>、＜td>標簽制作出Bingo卡片的框架，并為每個單元格設定id屬性，便于在程序中操縱單元格的內容。

3.2 卡片單元格中內容的填寫：

使用循環控制語句，將用隨機函數生成的從1到75的數字[3]依次填寫到卡片中。

3.3 各列不同取數范圍的實現：

為各列分配編號，B列為0、I列為1、N列為2、G列為3、O列為4；

設定各列基數為列編號*15，則B列基數為0、I列基數為15、N列基數為30、G列基數為45、O列基數為60；

用隨機函數生成從1到15的數字，再加上單元格所在的列基數，就得到符合規則的數字，即B列為1到15的數，I列為16到30的數，N列為31到45的數，G列為46到60的數，O列為61到75的數。

3.4 剔除重復的數字：

多次調用隨機函數可能會計算出相同的結果，而卡片中不能出現重復的數字。采用數組[3]記錄1到75個數字的使用狀態，每計算出一個數字，就在數組中查詢其狀態，如果已經使用了，就再調用隨機函數重新計算一個，如果還沒使用過，就將其填入卡片的單元格并在數組中記錄下新狀態。

3.5 由用戶控制新卡片的創建：

當瀏覽器加載HTML頁面時，程序運行生成卡片，同時，還允許用戶點擊頁面上的鏈接來重新運行程序。這樣就可以在瀏覽器中由用戶控制生成卡片，不會產生額外的服務器負載。

3.6 允許用戶糾正選錯的格子：

首先查明被用戶點擊的格子，將該單元格的背景色改為紅色，表示已經選中該單元格；如果用戶點擊了紅色的單元格，則將單元格背景色恢復為白色，表示取消對該單元格的選擇。這里使用預設的CSS樣式文件來實現單元格樣式的應用。

3.7 檢查獲勝狀態：

檢查用戶選中的單元格是否構成獲勝的Bingo圖案，如果確認獲勝，則頁面閃爍。

獲勝圖案中被選中的單元格用1標識，空白的單元格用0標識，將單元格從右下角向左上角依次記下其01序列，如圖2中獲勝圖案（a）的編碼是：00000000000000000011111，即十進制數31。將用戶的圖案也用同樣的標識代替，用戶圖案的編碼與獲勝圖案的編碼進行按位與運算[3]，結果與獲勝圖案的編碼相同，則可判定用戶獲勝。

4.游戲的實現及核心代碼

4.1 制作Bingo卡片的頁面（bingo1.htm l）：

4.2 CSS樣式表文件(bingo1.css)：

4.3 JavaScript程序(bingo1.js)：

5.結束語

JavaScript是用于Web應用程序開發的主要腳本語言。它與HTML、CSS結合起來，可以在一個網頁中鏈接多個對象，實現與網絡客戶的交互作用。

用JavaScript實現的Bingo游戲，界面友好，交互便捷，不占用服務器資源。

如果再增加登錄入口、叫號員叫號、獲勝信息上傳等模塊，就可以實現多用戶的實時Bingo游戲。

[1]撲克論壇 http：//www.preferpoker7.com/forum/read.php? tid=25787

[2]Tom Negrino.JavaScript基礎教程作者[M].北京：人民郵電出版社，2009.

[3]趙增敏.JavaScript動態網頁編程[M].北京：電子工業出版社，2010.