基于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