当前位置：首页 > news >正文

JavaScript案例开发之扑克游戏

news 来源：原创 2024/5/3 3:54:28

2019独角兽企业重金招聘Python工程师标准>>>

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Card</title>
        <style type="text/css">
            div#player1, div#player3 {
                margin: 0 auto;
                width: 460px;
                height: 70px;
            }
            div#player4, div#player2 {
                margin: 0 auto;
                width: 70px;
                height: 460px;
                margin-left: 100px;
                float: left;
            }
            div#player2 {
                margin-right: 100px;
                float: right;
            }
            div#footer, div#compeleteCards {
                clear: both;
                text-align: center;
                margin-top: 10px;
            }
            #create,#sort,#deal{
                font-size:18px;
                font-weight:500;
            }
            .center {
                height: 460px;
            }
            .card {
                width: 30px;
                height: 60px;
                border: solid 0.5px black;
                margin-left: 3px;
                float: left;
                -webkit-user-select: none;
            }
            .number {
                text-align: center;
                font-size: 18px;
                margin-top: 3px;
            }
            
        </style>
    </head>
    <body>
        <div id="container">

            <div id="player1">

            </div>
            <div class="center">
                <div id="player4">

                </div>

                <div id="player2">

                </div>
            </div>
            <div id="player3">

            </div>
        </div>
        <div id="footer">
            <input id="create" type="button" value="创建"/>
            <input id="sort" type="button" value="洗牌"/>
            <input id="deal" type="button" value= "发牌" />
        </div>
        <div id="compeleteCards">

        </div>
    </body>
        <script type="text/javascript" src="js/poker.js"></script>
</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 = "<font color='#FF0000'>♦</font>";
            break;
        case 4:
            t = "<font color='#FF0000'>♥</font>";
            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 += "<div class='card'><b>" + typeShow(array[i].type) + "</b><div class='number'>" + numberShow(array[i].number) + "</div></div>";
        }
        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();
};

转载于:https://my.oschina.net/sichunchen/blog/1542298