JavaScript案例開發之撲克游戲

本文轉載自查看原文 2017-09-21 08:54 3019 JavaScript案例開發

隨着時代的發展，知識也在日益更新，但是基礎知識永遠不會過時，它是新時代的基石，更是我們進一步學習的保障，下面帶着大家用JavaScript開發一款真正的撲克游戲，和大家一起分享，希望你們能夠喜歡；閑話不多說，現在開始引入我們的問題：當我們與朋友玩撲克牌的時候，每次開始前都會洗牌，然后按每人一張牌來循環的發牌，自己拿到一張牌都會按照大小的順序將牌插入到對應的位置。接下來讓我們通過JavaScript的知識來實現一個模擬打牌的程序。

大家可以看到這是一個撲克游戲的場景圖，首先大家可以看到頁面有五塊區域分別代表玩家一，玩家二，玩家三，玩家四，牌堆和三個按鈕創建，洗牌，發牌。

當我們點擊創建，會在牌堆創建一副完整的撲克牌帶有花色和牌值：

點擊洗牌按鈕執行洗牌操作，將牌組的順序打亂展示出來。

點擊發牌將牌按照順序循環的發給每個人，每個人拿到一張牌都會按照大小的順序將牌插入到對應的位置中。直到牌組發完，停止發牌。

發牌結束：

當然我們想要成功開發這款游戲，就要規范的按照軟件工程的開發思想進行開發，首先我們要做的當然是需求分析，下面就由我帶着大家分析一遍這款游戲的需求：

1）首先創建一副52張牌的牌組，實現在頁面上以圖形展示出紙牌

2）實現紙牌的洗牌功能

3）實現發牌功能，玩家拿到一張牌按從小到大的順序將牌插入到所應該在的位置

這款游戲大致就是這些主要需求，那么下面我們就來設計一下如何進行開發：

要實現這些需求，首先我們需要邏輯上建立一副撲克牌的數組存儲52張牌，再在HTML頁面上實現撲克牌的樣式展示。然后我們需要對數組進行洗牌，就是對撲克牌數組進行隨機排序。發牌將牌組從最上面的開始，循環的發給每個玩家，同時發出去的牌也要從撲克牌數組中刪除，牌組沒有牌的時候停止發牌。每個玩家也是一個數組，玩家拿到牌需要考慮下插入的位置，並插入形成新的順序。

1）根據上面的功能，一開始我們預計定義五個數組：

var compeleteCards = new Array();

var player1 = new Array();

var player2 = new Array();

var player3 = new Array();

var player4 = new Array();

2）從功能上我們需要幾個函數：

function CreatCompeleteCard() {}：創建一副撲克牌

function SortCards() {}：對撲克牌進行洗牌

function Show() {}：展示撲克牌

function DealCards () {}：發牌

function GetCards(CardObj) {}：玩家接受撲克牌CardObj插入自身的數組

function InCardsIndex(arr, obj) {}：考慮下插入的位置,arr參數是當前玩家的數組，obj是插入的撲克牌，函數返回這張撲克牌應該所處的位置

現在我們來看如何在邏輯上建立牌組模型，先觀察每張牌都應該有兩個屬性牌值（number）和花色（type）

而一副牌有52張牌（除去大小王）。我們可以把一張撲克牌看為一個對象，而一副撲克牌就是擁有52個撲克牌對象的數組。

1	`var` `compeleteCards =` `new` `Array(撲克牌1，撲克牌2，...);`

當然我們不可能一個一個的去創建52張牌對象，我們使用構造函數的方法，將牌抽象成一個類，通過實例化生成牌對象，最后通過循環的方法生成52個牌對象存入數組。

話不多說，我們上代碼：

HTML文件：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>Card</title>
 6         <style type="text/css">
 7             div#player1, div#player3 {
 8                 margin: 0 auto;
 9                 width: 460px;
10                 height: 70px;
11             }
12             div#player4, div#player2 {
13                 margin: 0 auto;
14                 width: 70px;
15                 height: 460px;
16                 margin-left: 100px;
17                 float: left;
18             }
19             div#player2 {
20                 margin-right: 100px;
21                 float: right;
22             }
23             div#footer, div#compeleteCards {
24                 clear: both;
25                 text-align: center;
26                 margin-top: 10px;
27             }
28             #create,#sort,#deal{
29                 font-size:18px;
30                 font-weight:500;
31             }
32             .center {
33                 height: 460px;
34             }
35             .card {
36                 width: 30px;
37                 height: 60px;
38                 border: solid 0.5px black;
39                 margin-left: 3px;
40                 float: left;
41                 -webkit-user-select: none;
42             }
43             .number {
44                 text-align: center;
45                 font-size: 18px;
46                 margin-top: 3px;
47             }
48             
49         </style>
50     </head>
51     <body>
52         <div id="container">
53 
54             <div id="player1">
55 
56             </div>
57             <div class="center">
58                 <div id="player4">
59 
60                 </div>
61 
62                 <div id="player2">
63 
64                 </div>
65             </div>
66             <div id="player3">
67 
68             </div>
69         </div>
70         <div id="footer">
71             <input id="create" type="button" value="創建"/>
72             <input id="sort" type="button" value="洗牌"/>
73             <input id="deal" type="button" value= "發牌" />
74         </div>
75         <div id="compeleteCards">
76 
77         </div>
78     </body>
79         <script type="text/javascript" src="js/poker.js"></script>
80 </html>

poker.js文件：

  1 var compeleteCards = new Array();
  2 var mytimer;
  3 var cardSequence = 1;
  4 var player1 = new Array();
  5 //儲存玩家一的手牌
  6 var player2 = new Array();
  7 //儲存玩家二的手牌
  8 var player3 = new Array();
  9 //儲存玩家三的手牌
 10 var player4 = new Array();
 11 //儲存玩家四的手牌
 12 
 13 function Cards(number,type){
 14     var card = {
 15         number: number,
 16         type: type
 17     }
 18     return card;
 19 }
 20 
 21 function CreatCompeleteCard() {
 22     var arr = new Array();
 23     for (var i = 3; i <= 15; i++) {
 24         for (var j = 1; j <= 4; j++) {
 25             var card = Cards(i, j);
 26             arr.push(card);
 27         }
 28     }
 29     return arr;
 30 }
 31 
 32 
 33 function Show() {
 34     function typeShow(type) {
 35         var t;
 36         switch(type) {
 37         case 1:
 38             t = "♠";
 39             break;
 40         case 2:
 41             t = "♣";
 42             break;
 43         case 3:
 44             t = "<font color='#FF0000'>♦</font>";
 45             break;
 46         case 4:
 47             t = "<font color='#FF0000'>♥</font>";
 48             break;
 49         }
 50         return t;
 51     };
 52 
 53     function numberShow(number) {
 54         var n = number;
 55         switch(number) {
 56         case 11:
 57             n = "J";
 58             break;
 59         case 12:
 60             n = "Q";
 61             break;
 62         case 13:
 63             n = "K";
 64             break;
 65         case 14:
 66             n = "A";
 67             break;
 68         case 15:
 69             n = "2";
 70             break;
 71         }
 72         return n;
 73     };
 74 
 75     function arrayToShow(array, id) {
 76         var html = "";
 77         for (var i = 0; i < array.length; i++) {
 78             html += "<div class='card'><b>" + typeShow(array[i].type) + "</b><div class='number'>" + numberShow(array[i].number) + "</div></div>";
 79         }
 80         document.getElementById(id).innerHTML = html;
 81     };
 82     arrayToShow(compeleteCards, "compeleteCards");
 83     arrayToShow(player1, "player1");
 84     arrayToShow(player2, "player2");
 85     arrayToShow(player3, "player3");
 86     arrayToShow(player4, "player4");
 87 }
 88 
 89 function SortCards() {
 90     if (compeleteCards.length == 52) {
 91         compeleteCards.sort(function(a, b) {
 92             return 0.5 - Math.random();
 93         });
 94     }
 95 }
 96 
 97 function DealCards() {
 98     if (compeleteCards.length == 52) {
 99         mytimer = setInterval("GetCards(compeleteCards.shift())", 100);
100     }
101 }
102 
103 function GetCards(CardObj) {
104     switch(cardSequence) {
105     case 1:
106       var k = InCardsIndex(player1, CardObj);
107       player1.splice(k, 0, CardObj);
108       cardSequence = 2;
109       break;
110     case 2:
111       var k = InCardsIndex(player2, CardObj);
112       player2.splice(k, 0, CardObj);
113       cardSequence = 3;
114       break;
115     case 3:
116       var k = InCardsIndex(player3, CardObj);
117       player3.splice(k, 0, CardObj);
118       cardSequence = 4;
119       break;
120     case 4:
121       var k = InCardsIndex(player4, CardObj);
122       player4.splice(k, 0, CardObj);
123       cardSequence = 1;
124       break;
125 }
126         
127 
128     if (compeleteCards.length == 0) {
129         window.clearTimeout(mytimer);
130     }
131     Show();
132 }
133 
134 //在此添加代碼
135 function InCardsIndex(arr, obj) {
136   var len = arr.length;
137   if (len == 0) {
138       return 0;
139   } else if (len == 1) {
140     if (obj.number >= arr[0].number) {
141         return 1;
142     } else {
143         return 0;
144     }
145 }   else {
146     var backi = -1;
147     for (var i = 0; i < len; i++) {
148       if (obj.number <= arr[i].number) {
149         backi = i;
150         break;
151       }
152     }
153     if (backi == -1) {
154         backi = len;
155     }
156     return backi;
157 }   
158 }
159 document.getElementById("create").onclick = function() {
160     compeleteCards = CreatCompeleteCard();
161     Show();
162 };
163 document.getElementById("sort").onclick = function() {
164     SortCards();
165     Show();
166 };
167 document.getElementById("deal").onclick = function() {
168     DealCards();
169 };

以上就是我們的JavaScript案例開發之撲克游戲，歡迎大家來瀏覽指正！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 模擬德州撲克對戰游戲 Python-----模擬撲克紙牌游戲 JAVA collection集合之撲克牌游戲撲克11點游戲（python代碼） HTML5游戲開發案例教程合集 Unity3d開發的知名大型游戲案例 Android+3D游戲開發技術詳解與典型案例 5個小時寫一個撲克牌游戲——金鈎釣魚 C++小游戲：撲克牌21點 Python實現撲克24點小游戲，從此我就沒輸過