适合正在学习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 }

把牌添加到指定的id中

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

基于JS的21点纸牌游戏系统