JavaScript案例开发之扑克游戏

2018-06-24 00:20:14来源：未知阅读 ()

随着时代的发展，知识也在日益更新，但是基础知识永远不会过时，它是新时代的基石，更是我们进一步学习的保障，下面带着大家用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 };