梭哈遊戲之製作 專題學生：洪鈺婷、陳雅玲 指導老師：洪國勝 國勝工商資訊科

摘要 使用 JavaScript 製作一個梭哈遊戲，讓使用 者連結本人網站時，即可分享本遊戲。 關鍵詞： JavaScript 、梭哈、遊戲

前言 有一天路過一家便利商店, 看到有人於電動遊戲台 玩梭哈遊戲, 遊戲內容如下：每次電腦自動發 5 張 樸克牌, 玩者可任意更換某些牌, 其方法是將那些 不要的牌蓋起來, 待全部確定之後, 按一下確定鈕, 即可重新補牌。然後, 電腦依據梭哈遊戲規則, 制 訂一些賠率。例如, 同花大順是 250 倍, 同花順是 50 倍, 鐵枝是 50 倍, 葫蘆是 9 倍, 同花是 6 倍, 順 子是 4 倍, 三條是 3 倍, 兩對是 2 倍, 一對是 1 倍。 學了一學年的程式、網頁設計之後, 乃興起使用 JavaScript 設計一個程式, 讓玩者可以於電腦玩這 一遊戲, 而因為這個遊戲類似梭哈遊戲, 所以將此 專題訂為梭哈遊戲之製作。

研究目的 傳統的梭哈遊戲大都建構在 Basic 或組合語言，僅能 在特製的機器上執行，但是目前網際網路及家用 電腦日益普及，我們希望可以設計一網路版梭哈 遊戲，供應全世界的人，在任何地方，任何時間 都能共同分享此一遊戲。本專題的目的如下： 1 、可以藉由此專題製作，充分探索高職階段所學 的 JavaScript 程式指令與方法。 2 、可以在網際網路上分享我們程式設計的學習成 果。

原理與分析 （一）、 JavaScript JavaScript 是由微軟公司與網景（ Netscape ）公司 所聯合發展的網頁描述語言 (Script) ，他的語法取 自於 Java ，所以稱為 JavaScript 。因為市面上主 要的瀏覽器都支援此一標準，也是目前客戶端程 式市場佔有率最高的 Script 語言，使用此一語言所 撰寫的程式，即可放在網際網路上，供應全世界 的同好共同分享，這也是我們選擇以 JavaScript 作為本專題網頁設計的主要原因。

（二）、演算分析 本專題的演算分析如下，此及為本間題創新所在， 因為此一程式雖可以在一些 Basic 的書找到，但是 卻無法理解其程式的來龍去脈，所以經由本組成 員實際以此紙牌玩此遊戲，重新思考牌型的判斷， 整理出以下的演算法。 1. 使用 a 陣列記錄莊家的 52 張樸克牌。 2. 樸克牌編碼：將 52 張樸克牌分別以 0 到 51 編 號, 0 代表 1c(one Club), 1 代表 1d (one Diamond), 3 代表 1h(One Heart), 4 代表 1s(One Spade), 5 代表 2c, 51 代表 ks, 依此類推。

3. 樸克牌的顯示：準備 53 張圖片如下圖, g0.jpg~g51.jpg 分別是 52 張牌面,g52.jpg 則代表蓋起來的圖片。 例如，以下 HTML 敘述可顯示此牌蓋起來。 以下則是以 JavaScript 顯示 One Club 圖案。 document.gra.src="g0.jpg" 以下則以陣列表示圖形檔案。 document.gra.src=d[0]; 以下則是以 gra[i] 陣列表示圖形方塊， a[] 表示樸克牌編碼。 document.gra[i].src=d[a[i]];

4. 使用 b2 陣列紀錄 5 張牌出現的點數, b1 陣列紀錄出現的點 數的數量,b3 陣列紀錄每種花色的數量。例如, 若拿到的 5 張牌分別是 3d 、 7c 、 7s 、 10h 、 13h, 則 b1 、 b2 陣列分別 如下： 索引 b1 每點的數量 1211 b2 出現的點數 b3 陣列如下： 索引 0123 花色 cdhs 每一花色數量 1121

5. b1 與 b2 陣列同時依照每一點出現的數量 (b1) 由 大而小排序, 所以 b1 、 b2 陣列如下： 索引 b1 每點的數量 2111 b2 出現的點數

6. 判斷是否同花： 若 b3 陣列有任一花色的數量為 5, 則為同 花。例如,3c 、 7c 、 9c 、 11c 、 13c, 那 b3(0)=5, 所以只要逐一檢查 b3 陣列任一索 引的值為 5, 則為同花。 ( 本例 same_color 為 true)

7. 判斷是否為順或大順： A. 構成順的首要條件是 b1 陣列索引 0 到 4 均要為 1 。 B. 1 (ACE) 有兩種身份, 分別是 0 與 13, 若為 13 則為大順。 C. 1 先以 1 考慮。 D. 將 b2 陣列前 5 筆資料由小而大排序。例如, 1h 2c 3d 4h 5h, 則 b1 、 b2 陣列分 別如下： 索引 b1 每點的數量 b2 出現的點數 E. 若 b2 陣列的內容兩兩相減, 其差均為 1, 則我們肯定其為順。 ( 本例 straight 為 true) F. 1 再以 13 考慮, 此時僅只要判斷 b2(0) 、 b2(1) 、 b2(2) 、 b2(3) 、 b2(4) 是否同時 為 0, 9, 10, 11, 12, 此即為大順。 ( 本例 biger 為 true 且 straight 為 true)

8. 判斷是否鐵支。因為 b1 陣列已經由大而小排序, 所以只要 b1(0)=4 則為鐵支。 9. 判斷是否葫蘆。因為 b1 陣列已經由大而小排序, 所以只要 b1(0) = 3 And b1(1) = 2 則為葫蘆。 10. 判斷是否三條。因為 b1 陣列已經由大而小排序, 所以只要 b1(0) = 3 則為三條。 11. 判斷是否 Two Pair 。因為 b1 陣列已經由大而小 排序, 所以只要 b1(0) = 2 And b1(1) = 2 則為 Two Pair 。 12. 判斷是否 One Pair 。因為 b1 陣列已經由大而小 排序, 所以只要 b1(0) = 2 則為 One Pair 。

四、軟硬體系統 本專題的系統方塊圖如下圖 :

1 、初值設定的程式如下： var i,j; // 牌面初值 var a =new Array(53); // 對應的圖形 var d=new Array("g0.jpg","g1.jpg","g2.jpg","g3.jpg","g4.jpg","g5.jpg","g6.jpg","g7.jpg","g8.jpg","g9.jpg", "g10.jpg","g11.jpg","g12.jpg","g13.jpg","g14.jpg","g15.jpg","g16.jpg","g17.jpg","g18.jpg","g19.jpg", "g20.jpg","g21.jpg","g22.jpg","g23.jpg","g24.jpg","g25.jpg","g26.jpg","g27.jpg","g28.jpg","g29.jpg", "g30.jpg","g31.jpg","g32.jpg","g33.jpg","g34.jpg","g35.jpg","g36.jpg","g37.jpg","g38.jpg","g39.jpg", "g40.jpg","g41.jpg","g42.jpg","g43.jpg","g44.jpg","g45.jpg","g46.jpg","g47.jpg","g48.jpg","g49.jpg", "g50.jpg","g51.jpg","g52.jpg","g53.jpg") ; var same_color; // 同花 var straight; // 順子 var straight1; var b; var s; var b1=new Array(14); var b2=new Array(14); var b3=new Array(4); var j; var cover=new Array(5); // 蓋者或翻開 var biger;

2 、發牌程式如下： function aa(){ document.myname.T3.value=""; document.myname.B1.disabled=true; document.myname.T2.disabled=true; document.myname.B2.disabled=false; // 設定初值 for (i=0;i<=51;i++) a[i]=i; // 洗牌 for (i=0;i<=51;i++) { r=Math.floor(52*Math.random()); t=a[i];a[i]=a[r];a[r]=t; } // 顯示前五張 for (i=0;i<=4;i++) document.gra[i].src=d[a[i]]; // 記錄前 5 張是否蓋者 for (i=0;i<=4;i++) cover[i]=false; }

3 、換牌程式如下： （假如蓋者就翻開，翻開就蓋起來） function g1(nx){ if (cover[nx]==true) { document.gra[nx].src=d[a[nx]]; cover[nx]=false; } else { document.gra[nx].src=d[52]; cover[nx]=true; }

4 、檢查牌型程式如下： （此為本題創新所在，自行將演算法轉為 JavaScript 程式） function judge_card(){ var e=new Array("Club","Dimand","Heart","Spade"); var t; var color,point; same_color=false; var k=""; for (i=1;i<=13;i++){ b1[i]=0; b2[i]=0; } for (i=0;i<=3;i++){ b3[i]=0; }

A 、計算各點的張數、與各花色的數量 for (i=0;i<=4;i++){ color=a[i]%4; point=Math.floor(a[i]/4)+1; b1[point]=b1[point]+1; // 該點的張數 b2[point]=point; // 點數 b3[color]++; // 每種花色的數量 }

B 、 b1,b2 陣列同時依照每點的數量由大到小排序 for (i=1;i<=12;i++) for (j=1;j<=13-i;j++) if (b1[j]< b1[j+1]){ t=b1[j];b1[j]=b1[j+1];b1[j+1]=t; t=b2[j];b2[j]=b2[j+1];b2[j+1]=t; }

C 、判斷是否同花 same_color=false; for (i=0;i<=3;i++) if (b3[i]==5) // 同花 same_color=true;

D 、判斷是否同花大順 if (b1[1]==1 && b1[2]==1 && b1[3]==1 && b1[4]==1 && b1[5]==1){ // 順子 biger=false; //1 先以 1 考慮 judge_straight(); straight1=straight; biger=true; //1 再以 14 考慮，判斷是否大順 judge_straight(); straight=straight ||straight1; if (straight && same_color && biger ){ b=e[color] + " 同花大順 "; s=250; return; }

E 、判斷是否為順 function judge_straight(){ var t; straight=false; if (b2[1]==1 && biger==true) b2[1]=14; for (i=1;i<=4;i++) for (j=1;j<=5-i;j++) if (b2[j]>b2[j+1]){ t=b2[j];b2[j]=b2[j+1];b2[j+1]=t; } if(b2[5]-b2[4]==1 && b2[4]-b2[3]==1 && b2[3]-b2[2]==1 && b2[2]-b2[1]==1) straight=true; if (b2[1]==10) biger=true; }

F 、牌型認定（一） if (straight && same_color){ b=e[color] + " 同花順 "; s=50; return; } if (same_color) { b=e[color] + " 同花 "; s=4; return; } if (straight) { b= " 順子 "; s=6; return; }

F 、牌型認定（二） if (b1[1]==4){ b=b2[1]+" "+" 鐵枝 "; s=250; return; } if (b1[1]==3 && b1[2]==2){ b=b2[1]+" "+b2[2]+" 葫蘆 "; s=9; return; } if (b1[1]==3 && b1[2]==1){ b=b2[1]+" "+" 三條 "; s=9; return; }

F 、牌型認定（三） if (b1[1]==2 && b1[2]==2){ b=b2[1]+" "+b2[2]+"Two pair"; s=2; return; } if (b1[1]==2 ){ b=b2[1]+" "+"One pair"; s=1; return; }

五、專題成果與比較 1 、本專題執行，初始畫面如下，

2 、按一下 “ 發牌 ” ，畫面如下：

3 、將想要更換的牌蓋起來，畫面如下：

4 、按一下 “ 換牌確定 ” ，畫面下：

七、參考文獻 1 、洪國勝， Visual Basic 程式設計，全華圖 書有限公司 2 、高雄應用科大電子系，電子設計創意競賽。