javascript實例--教你實作撲克牌洗牌功能_javascript技巧

我們通常都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊（記得小時候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實現這個功能來熟悉下js中排序數組等相關知識。

用到知識點：

1.工廠方式建立物件

2.js陣列sort()方法

複製程式碼 程式碼如下:

  var testArr = [🎜>

  var testArr = [1, 23] ;
     testArr.sort(function (a,b) {
         return a - b;
    🎜>     testArr.sort(function (a, b) {
         return b- a;
    

3.js-Math.radom()隨機數

Math.random();//0-1 取得的隨機數大於等於0且小於1

4.js數組splice用法

複製程式碼 程式碼如下:

//第一個參數是插入的起始位置

//第二個參數是從起始位置開始刪除元素的個數
//第三個參數是起始位置開始插入的元素  
//範例
var testArr = [1, 3, 4, 2];
testArr.splice(1, 0, 8);
alert(testArr.toString());//1,8,3,4,2

var testArr1 = [1, 3, 4, 2];testArr1.splice(1, 1, 8);

alert(testArr1.toString());//1,8,3, 4,2

5.js數組shift用法

複製代碼 代碼如下:

    //取出數組中的首個元素返回，數組組中的首個元素返回，數組組中的首個元素返回，數組組中的首個元素返回，數組組中的首個元素返回，數組組中的首個元素返回，數組中的首個元素。刪除第一個元素

   //範例
    var testArr = [1, 3, 4, 2];
     var k=  testArr.shift();
;//3,4,2
     alert(k);//1

有了這些基礎知識，咱們可以開始打牌了，假設就一個人摸牌，底牌是隨機的，我們每次摸來一張牌的時候就要把他插到手上的牌中，保證順序是從小到大！

第一步：首先我們要寫一個生產撲克牌物件的方法：

複製代碼 代碼如下:

/*工廠模式創建各種牌

/*工廠模式創建各種牌
number:牌上的數字
*type:牌的花色
*/
var Cards = (function () {
var Card = function (number, type) {
this.number = number;
this.type = type;
}
return function (number, type) {
return new Card(number, type);
}
})()

第二步：建立撲克牌，洗牌，存放

複製程式碼

程式碼如下:

    var RadomCards = [];//隨機牌儲存陣列
    var MyCards = [];//儲存摸起來的牌

 
 1-梅花2-方塊  3-紅桃4-大鬼  5-小鬼
    //數值0-13代表鬼,1,2,3,4,5,6,7,8,9,10,J ,Q,K;
    function CreatCompeleteCard() {
        var index = 2;
      ) {
            if (i == 0) {
               arr[1] = new Cards(i, 5);
            } else {
for (var j = 0; j                     arr[index] = index ;
                }
           >        RadomCards = SortCards(arr);
        Show();//在頁面上顯示目前的牌
        arr.sort (function (a, b) {
            return 0.5 - Math.random();
       >

第三步：開始摸牌，摸牌的時候我們首先要判斷插入的位置，然後把新牌插入到指定位置，形成新的整齊的順序





複製程式碼


程式碼如下:

//摸牌方法
    function GetCards(CardObj) {
        var k = InCardsIndex(MyCards, CardObj);//考慮下插入的位置
        MyCards.splice(k, 0 , CardObj); // 插入形成新的順序
    }
    /*【取得牌應該插入的位置】
     *arr:目前手中的牌
  
     */
    function InCardsIndex(arr, obj) {
        var len = arr && arr           return 0;
        }else if (len == 1) {
            if (obj.number >=               } else {
                0;
}
        } else {
            var backi = -1;
                    if (obj.number                     backi = i;
               }
            }
           = len;
            }
return backi;
        }
    }



好啦！透過html上的button按鈕出發Start來摸牌，點一次摸一張牌！並展示出來

複製程式碼

程式碼如下:

  function Start() {//摸牌方法，一次摸一張        if (RadomCards.length > 0) {            GetCards(RadomCards.sh       } else {            alert("沒有了") ;        }    }

//該show方法是用來展示頁數的動向

    function Show       var lenNew = MyCards.length;
        var html = "";
        for (var i = 0; i div domCards [i].type "-

" RadomCards[i].number "

";
        }
     ").innerHTML=html;
        html = "";
        for (var i = 0; i   " MyCards[i].type "-

" MyCards[i].number "

";
        }
    "new").innerHTML=html;
    }

上html和css的程式碼

複製代碼 代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">