梭哈遊戲之製作 專題學生：洪鈺婷、陳雅玲 指導老師：洪國勝 國勝工商資訊科. 摘要 使用 JavaScript 製作一個梭哈遊戲，讓使用 者連結本人網站時，即可分享本遊戲。 關鍵詞： JavaScript 、梭哈、遊戲.

Presentation on theme: "梭哈遊戲之製作 專題學生：洪鈺婷、陳雅玲 指導老師：洪國勝 國勝工商資訊科. 摘要 使用 JavaScript 製作一個梭哈遊戲，讓使用 者連結本人網站時，即可分享本遊戲。 關鍵詞： JavaScript 、梭哈、遊戲."— Presentation transcript:

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

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

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

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

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

6 （二）、演算分析 本專題的演算分析如下，此及為本間題創新所在， 因為此一程式雖可以在一些 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, 依此類推。

7 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]];

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

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

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

11 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 陣列分 別如下： 索引 0123456789101112 b1 每點的數量 11111 b2 出現的點數 12345 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)

12 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 。

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

14 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;

15 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; }

16 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; }

17 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; }

18 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]++; // 每種花色的數量 }

19 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; }

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

21 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; }

22 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; }

23 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; }

24 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; }

25 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; }

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

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

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

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

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

31