梭哈遊戲之製作

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敘述可顯示此牌蓋起來。 <img name="gra" border="0" src="g52.jpg" width="72" height="98"> • 以下則是以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 陣列分別如下： b3 陣列如下：

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

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 陣列分別如下： 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、高雄應用科大電子系，電子設計創意競賽。