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

当然我们不可能一个一个的去创建52张牌对象，我们使用构造函数的方法，将牌抽象成一个类，通过实例化生成牌对象，最后通过循环的方法生成52个牌对象存入数组。

话不多说，我们上代码：

 HTML文件：

poker.js文件：

var compeleteCards = new Array();var mytimer;var cardSequence = 1;var player1 = new Array();//储存玩家一的手牌var player2 = new Array();//储存玩家二的手牌var player3 = new Array();//储存玩家三的手牌var player4 = new Array();//储存玩家四的手牌function Cards(number,type){    var card = {        number: number,        type: type    }    return card;}function CreatCompeleteCard() {    var arr = new Array();    for (var i = 3; i <= 15; i++) {        for (var j = 1; j <= 4; j++) {            var card = Cards(i, j);            arr.push(card);        }    }    return arr;}function Show() {    function typeShow(type) {        var t;        switch(type) {        case 1:            t = "♠";            break;        case 2:            t = "♣";            break;        case 3:            t = "♦";            break;        case 4:            t = "♥";            break;        }        return t;    };    function numberShow(number) {        var n = number;        switch(number) {        case 11:            n = "J";            break;        case 12:            n = "Q";            break;        case 13:            n = "K";            break;        case 14:            n = "A";            break;        case 15:            n = "2";            break;        }        return n;    };    function arrayToShow(array, id) {        var html = "";        for (var i = 0; i < array.length; i++) {            html += "
    
     " + typeShow(array[i].type) + "
     
      " + numberShow(array[i].number) + "
     
    
";        }        document.getElementById(id).innerHTML = html;    };    arrayToShow(compeleteCards, "compeleteCards");    arrayToShow(player1, "player1");    arrayToShow(player2, "player2");    arrayToShow(player3, "player3");    arrayToShow(player4, "player4");}function SortCards() {    if (compeleteCards.length == 52) {        compeleteCards.sort(function(a, b) {            return 0.5 - Math.random();        });    }}function DealCards() {    if (compeleteCards.length == 52) {        mytimer = setInterval("GetCards(compeleteCards.shift())", 100);    }}function GetCards(CardObj) {    switch(cardSequence) {    case 1:      var k = InCardsIndex(player1, CardObj);      player1.splice(k, 0, CardObj);      cardSequence = 2;      break;    case 2:      var k = InCardsIndex(player2, CardObj);      player2.splice(k, 0, CardObj);      cardSequence = 3;      break;    case 3:      var k = InCardsIndex(player3, CardObj);      player3.splice(k, 0, CardObj);      cardSequence = 4;      break;    case 4:      var k = InCardsIndex(player4, CardObj);      player4.splice(k, 0, CardObj);      cardSequence = 1;      break;}            if (compeleteCards.length == 0) {        window.clearTimeout(mytimer);    }    Show();}//在此添加代码function InCardsIndex(arr, obj) {  var len = arr.length;  if (len == 0) {      return 0;  } else if (len == 1) {    if (obj.number >= arr[0].number) {        return 1;    } else {        return 0;    }}   else {    var backi = -1;    for (var i = 0; i < len; i++) {      if (obj.number <= arr[i].number) {        backi = i;        break;      }    }    if (backi == -1) {        backi = len;    }    return backi;}   }document.getElementById("create").onclick = function() {    compeleteCards = CreatCompeleteCard();    Show();};document.getElementById("sort").onclick = function() {    SortCards();    Show();};document.getElementById("deal").onclick = function() {    DealCards();};