基於JS的21點紙牌游戲系統

適合正在學習JS的小白瀏覽

利用JS編寫一個簡單的21點紙牌游戲系統

設計一款以21點玩法為主的紙牌類游戲，該程序是一個21點的撲克牌游戲，玩家一共可以要5張牌，如果牌的點數超過21，則暴了，自動出局；在不超過21點的情況下，玩家與庄家（計算機）比較牌點數的大小，大者為贏。

一、功能要求

（1）程序中一共有52張撲克牌可以隨機抽取，大於10的點數全部為半點；

（2）高級玩家可以查看下一張牌，點擊隱藏位置多次看牌，並決定是否要牌。當然，在游戲規則上不能泄露這個秘密；

（3）可以編寫作弊程序，點擊某個特殊位置多次，去查看計算機的牌面，並根據計算機所得的牌來輸入自己想要的牌，當然，在界面上不能顯示這點秘密

（4）每次要牌后可以設定下注值，即如果開始下的是10金幣的注，如果牌好，你可以要求再下注，當然不能超過你所有的總錢數

二、簡單操作

1.動態生成卡組的函數

// 生成卡組
function createCardArray(){
    var type = ["方塊","梅花","紅桃","黑桃"];
    var MAXNUM = 13;
    var cardArray = new Array();
    for(i=0;i<type.length;++i) {
        for(num=1;num<=MAXNUM;++num) {
            var card = type[i]+num;
            cardArray.splice(cardArray.length,0,card);
            // Array.splice("需要操作的數組下標","需要刪除的元素個數","需要添加的元素1","需要添加的元素2"...)
        }
    }
    return cardArray;
};

var cardArray = createCardArray();
console.log(cardArray); // Array(52) [ "方塊1", "方塊2", "方塊3", "方塊4", "方塊5", "方塊6", "方塊7", "方塊8", "方塊9", "方塊10", … ]

 

2.隨機抽出一張牌並獲得點數

// 隨機生成卡牌
function randomCard(){
    var cardArrayIndex = Math.floor(Math.random() * cardArray.length);
    // 數組長度 = 數組最大下標值 + 1，利用Math.floor()向下取整函數正好取到數組的下標
    var card = cardArray[cardArrayIndex];
    cardArray.splice(cardArrayIndex,1); // 從卡組中取出（刪除）
    return card;
}

// 得到卡牌的點數
function getCardNum(card){
    var RegExp = /\d{1,2}/; // 匹配1到2為數字
    var num = card.match(RegExp);// 如果匹配到返回匹配到的字符串，沒有則返回null
    return parseInt(num); // 轉化成int型然后返回
}

var card = randomCard(); // 如果是 "紅桃8"
console.log(cardArray); // 51張牌,缺少"紅桃8"
var num = getCardNum(card); 
console.log("card:"+card+",num:"+(num+0)); // card:紅桃8,num:8 

 

3.把卡牌圖片添加到指定的id下

// 把牌添加到指定的id中
function addCard(idName, card, type) {
    // idName是被添加的id，card是卡牌的信息，type為true添加卡牌正面、false添加卡牌背面
    var src; // 保存圖片路徑
    if(type)
        src = "img/背面.jpg";
    else
        src = "img/" + card + ".jpg";
    var imgElement = document.createElement("img"); // 生成一個img節點
    imgElement.src = src; // 為img節點添加圖片路徑
    idName.appendChild(imgElement); // 為指定id添加剛剛生成的img節點
}

window.onload = function() { // 如果HTML標簽還沒有加載就獲取DOM元素會報錯，解決方法是把JS代碼放到HTML標簽后面，但為了方便我們等待瀏覽器加載完畢后在執行操作。
    var card1 = randomCard();
    var card2 = randomCard();
    var idName = document.getElementById("cardArea");
    addCard(idName, card, true);
    addCard(idName, card, false);
}

4.移除電腦卡背

window.onload = function() {
    // 把電腦卡背移除，並添加相應卡牌正面
    var computerCard = ["方塊1", "方塊2", "方塊3"];
    var computerArea = document.getElementById("computerArea");
    for(i = 0; i < computerCard.length; ++i) {
        var card = computerCard[i];
        addCard(computerArea, card, true);
    }
    
    // 方法一:利用removeChild() 刪除電腦卡背 
//    var childNodes = computerArea.childNodes;
//    console.log(childNodes);
//    for(i=childNodes.length-1;i>=0;--i) {
//        computerArea.removeChild(childNodes[i]);
//    }
    
    // 方法二:利用innerHTML覆蓋HTTML 刪除電腦卡背
    computerArea.innerHTML = "";
    
}

5.事件的添加與移除

// 事件的添加與移除
window.onload = function() {
    var buttonDOM = document.getElementById("button");
    var e1 = function() {
        alert("點擊事件1");
    };
    var e2 = function() {
        alert("點擊事件2");
        buttonDOM.removeEventListener("click", e1);
    };
    buttonDOM.addEventListener("click", e1);
    buttonDOM.addEventListener("click", e2);
}

三、游戲源碼

GitHub:https://github.com/lemon-Xu/21-point-card-game