适合正在学习JS的小白浏览
利用JS编写一个简单的21点纸牌游戏系统
设计一款以21点玩法为主的纸牌类游戏，该程序是一个21点的扑克牌游戏，玩家一共可以要5张牌，如果牌的点数超过21，则暴了，自动出局；在不超过21点的情况下，玩家与庄家（计算机）比较牌点数的大小，大者为赢。
一、功能要求
（1）程序中一共有52张扑克牌可以随机抽取，大于10的点数全部为半点；
（2）高级玩家可以查看下一张牌，点击隐藏位置多次看牌，并决定是否要牌。当然，在游戏规则上不能泄露这个秘密；
（3）可以编写作弊程序，点击某个特殊位置多次，去查看计算机的牌面，并根据计算机所得的牌来输入自己想要的牌，当然，在界面上不能显示这点秘密
（4）每次要牌后可以设定下注值，即如果开始下的是10金币的注，如果牌好，你可以要求再下注，当然不能超过你所有的总钱数
二、简单操作
1.动态生成卡组的函数
1 // 生成卡组
2 function createCardArray(){
3 var type = ["方块","梅花","红桃","黑桃"];
4 var MAXNUM = 13;
5 var cardArray = new Array();
6 for(i=0;i<type.length;++i) {
7 for(num=1;num<=MAXNUM;++num) {
8 var card = type[i]+num;
9 cardArray.splice(cardArray.length,0,card);
10 // Array.splice("需要操作的数组下标","需要删除的元素个数","需要添加的元素1","需要添加的元素2"...)
11 }
12 }
13 return cardArray;
14 };
15
16 var cardArray = createCardArray();
17 console.log(cardArray); // Array(52) [ "方块1", "方块2", "方块3", "方块4", "方块5", "方块6", "方块7", "方块8", "方块9", "方块10", … ]
2.随机抽出一张牌并获得点数
1 // 随机生成卡牌
2 function randomCard(){
3 var cardArrayIndex = Math.floor(Math.random() * cardArray.length);
4 // 数组长度 = 数组最大下标值 + 1，利用Math.floor()向下取整函数正好取到数组的下标
5 var card = cardArray[cardArrayIndex];
6 cardArray.splice(cardArrayIndex,1); // 从卡组中取出（删除）
7 return card;
8 }
9
10 // 得到卡牌的点数
11 function getCardNum(card){
12 var RegExp = /\d{1,2}/; // 匹配1到2为数字
13 var num = card.match(RegExp);// 如果匹配到返回匹配到的字符串，没有则返回null
14 return parseInt(num); // 转化成int型然后返回
15 }
16
17 var card = randomCard(); // 如果是 "红桃8"
18 console.log(cardArray); // 51张牌,缺少"红桃8"
19 var num = getCardNum(card);
20 console.log("card:"+card+",num:"+(num+0)); // card:红桃8,num:8
3.把卡牌图片添加到指定的id下
1 // 把牌添加到指定的id中
2 function addCard(idName, card, type) {
3 // idName是被添加的id，card是卡牌的信息，type为true添加卡牌正面、false添加卡牌背面
4 var src; // 保存图片路径
5 if(type)
6 src = "img/背面.jpg";
7 else
8 src = "img/" + card + ".jpg";
9 var imgElement = document.createElement("img"); // 生成一个img节点
10 imgElement.src = src; // 为img节点添加图片路径
11 idName.appendChild(imgElement); // 为指定id添加刚刚生成的img节点
12 }
13
14 window.onload = function() { // 如果HTML标签还没有加载就获取DOM元素会报错，解决方法是把JS代码放到HTML标签后面，但为了方便我们等待浏览器加载完毕后在执行操作。
15 var card1 = randomCard();
16 var card2 = randomCard();
17 var idName = document.getElementById("cardArea");
18 addCard(idName, card, true);
19 addCard(idName, card, false);
20 }
4.移除电脑卡背
1 window.onload = function() {
2 // 把电脑卡背移除，并添加相应卡牌正面
3 var computerCard = ["方块1", "方块2", "方块3"];
4 var computerArea = document.getElementById("computerArea");
5 for(i = 0; i < computerCard.length; ++i) {
6 var card = computerCard[i];
7 addCard(computerArea, card, true);
8 }
9
10 // 方法一:利用removeChild() 删除电脑卡背
11 // var childNodes = computerArea.childNodes;
12 // console.log(childNodes);
13 // for(i=childNodes.length-1;i>=0;--i) {
14 // computerArea.removeChild(childNodes[i]);
15 // }
16
17 // 方法二:利用innerHTML覆盖HTTML 删除电脑卡背
18 computerArea.innerHTML = "";
19
20 }
5.事件的添加与移除
1 // 事件的添加与移除
2 window.onload = function() {
3 var buttonDOM = document.getElementById("button");
4 var e1 = function() {
5 alert("点击事件1");
6 };
7 var e2 = function() {
8 alert("点击事件2");
9 buttonDOM.removeEventListener("click", e1);
10 };
11 buttonDOM.addEventListener("click", e1);
12 buttonDOM.addEventListener("click", e2);
13 }
三、游戏源码
GitHub:https://github.com/lemon-Xu/21-point-card-game
来源：https://www.cnblogs.com/xiaoxu-xmy/p/9238870.html