JavaScript案例开发之扑克游戏

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

新老客户大回馈,云服务器低至5折

随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用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案例开发之扑克游戏,欢迎大家来浏览指正!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用javascript获取父级元素

下一篇:js表单序列化判断空值