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