javascript实战——扑克牌案例 洗牌 比较大小

利用Javascript，实现扑克牌的洗牌和比较大小

实战前准备：

1、首先，需要准备一张整副扑克牌的图片

2、创建和初始化项目

HTML结构的编写

    <div id="desk">

    </div>
    <button onclick="goPlay()">开始游戏</button>
    <button onclick="hisBtn()">比赛记录</button>
    <div id="hisDiv">

    </div>

desk块作为桌面，用来放置54张扑克牌。
开始游戏按钮给它绑定一个onclick函数，执行洗牌、盖牌的操作。
比赛记录按钮用来点击显示已经比较过大小的比赛记录。
hisDiv块则是用来显示比赛记录。

CSS样式的编写

这里就不做太多的讲解，直接放上整体的css样式。（嘿嘿，不太懂可以来私信问我！）

* {
    margin: 0;
    padding: 0;
}

#desk {
    width: 100%;
}

.pooker {
    width: 133px;
    height: 189px;
    background: url(./pkr.jpg);
    display: inline-block;
}

.hisdiv {
    display: inline-block;
    border: 1px solid black;
    text-align: center;
    margin: 5px;
}

.hisItem1,
.hisItem2 {
    display: inline-block;
    margin: 5px;
    text-align: center;
}

.hisdiv h3 {
    margin: 10px 0;
}

JS部分，开始游戏功能实现

功能实现的整体思路就是通过两个数组分别表示扑克牌的花色以及数字，然后两个数字组合成不同的扑克牌标识，比如梅花A、方块K等，作为对象名生成一个对象，并在每一个对象中添加每张扑克牌所具有的值。

    var num = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
    var shape = ['黑桃', '红桃', '梅花', '方块'];
    var pookers = [];
    for (var i = 0; i < shape.length; i++) {
        for (var j = 0; j < num.length; j++) {
            var pooker = {
                name: shape[i] + num[j],
                xPos: -133 * j,
                yPos: -189 * i,
                value: j + (4 - i) * 0.1 + 1
            }
            pookers.push(pooker);
        }
    }
    var sKing = {
        name: '小王',
        xPos: -133 * 0,
        yPos: -189 * 4,
        value: 14
    }
    var bKing = {
        name: '大王',
        xPos: -133 * 1,
        yPos: -189 * 4,
        value: 15
    }
    var bgPooker = {
        name: '背景',
        xPos: -133 * 2,
        yPos: -189 * 4
    }
    pookers.push(sKing, bKing);

解析xPos、yPos和value的意义：
xPos、yPos：就是横纵坐标，这个值是用于定位背景图片开始位置，即左上角为图片作为背景图片的开始位置。我们会在desk中添加54个div作为54张扑克牌，那么这每一个div宽高应该都是一样的，且跟整张图片的每一个扑克牌的大小应该是一致的，我们就用backgroundPosition属性，去定位到每张扑克牌开始显示的左上角坐标，这样就可以把每一个扑克牌都显示在不同的div中。

value：当然是为了比较大小了。因为是通过for循环遍num数组，那数组下标一一对应着扑克牌的号码，所以j+1就是扑克牌的号码。号码可以比较之后，接下来就是花色的比较了。i值就是花色了，黑桃最大，其对应的i值是0，反而最小，所以通过一个算法使其最大，即4-i，则黑桃4，红桃3，梅花2，方块1，但是花色不能影响到号码的比较，所以我们给他变成小数，即(4-i)*0.1，则黑桃0.4，红桃0.3，梅花0.2，方块0.1，这样我们大致的比较思路就很清晰了，就是号码上花色的值去进行比较。

渲染

然后，我们就开始把每一张扑克牌进行渲染，在desk里面逐一显示出来：这里我们就用上一步骤得到的pookers数组，来渲染54张扑克牌，因为pookers里面存放的54个对象就是我们要渲染的54张扑克牌了。
接下来就是goPlay()函数的编写：

var eDesk = document.getElementById('desk');
function goPlay() {
    var randArr = [];
    eDesk.innerHTML = '';
    for (var i = 0; i < pookers.length; i++) {
        var ranIdx = Math.floor(Math.random() * pookers.length);//生成随机数
        if (randArr.indexOf(pookers[ranIdx]) == -1) {
            randArr.push(pookers[ranIdx]);//通过打乱原来数组，并添加到新数组中，实现洗牌功能，之后
            //点击扑克牌进行翻牌的操作所渲染的就是原来的数组了，而是这个randArr新数组。
        } else {
            i--;
        }
    }
    for (var i in pookers) {
        render(eDesk, bgPooker);//渲染54张显示背面的扑克牌
        var oPookerDiv = document.getElementsByClassName('pooker');
        addOnclick(i, oPookerDiv, randArr);//给每一张扑克牌添加点击事件
    }
}

function render(place, item) {//渲染扑克牌的函数，place表示所要渲染的额位置，item则是需要渲染的对象
    var createDeskDiv = document.createElement('div');
    createDeskDiv.className = 'pooker';
    createDeskDiv.style.backgroundPosition = item.xPos + 'px ' + item.yPos + 'px';
    place.appendChild(createDeskDiv);
}

比较大小

然后，我们来完成‘比较大小’功能的实现。
所需要达到的效果是，当我们每点击两张扑克牌之后，显示两张扑克牌的信息，并判断，显示比较结果，然后完成之后，将显示的扑克牌翻到背面，重新洗牌，进入下一轮的游戏。

var compareArr = [];
var hisArr = [];

function addOnclick(index, oPookerDiv, item) {
    oPookerDiv[index].onclick = function() {
        this.style.backgroundPosition = item[index].xPos + 'px ' + item[index].yPos + 'px';
        if (compareArr.indexOf(item[index]) == -1) {
            compareArr.push(item[index]);
            if (compareArr.length == 2) {
                setTimeout(() => {
                    compare();
                    hisArr.push(compareArr);
                    compareArr = [];
                }, 100)
            }
        } else {
            alert('不能选择同一张扑克牌！');
        }
    }
}

function compare() {
    if (compareArr[0].value > compareArr[1].value) {
        alert('第一张牌是：' + compareArr[0].name + '\n第二张牌是：' + compareArr[1].name + '\n恭喜玩家1赢了！');
    } else if (compareArr[0].value < compareArr[1].value) {
        alert('第一张牌是：' + compareArr[0].name + '\n第二张牌是：' + compareArr[1].name + '\n恭喜玩家2赢了！');
    }
    goPlay();
}

历史记录板块

var eHisDiv = document.getElementById('hisDiv');

function hisBtn() {
    eHisDiv.innerHTML = '';
    for (var i in hisArr) {
        var result = '玩家1胜利！';
        if (hisArr[i][0].value < hisArr[i][1].value) {
            result = '玩家2胜利！';
        }
        var createHisDiv = document.createElement('div');
        createHisDiv.className = 'hisdiv';
        createHisDiv.innerHTML = `
        <h1>第${i*1+1}轮比赛</h1>
        <div class="hisItems">
            <div class="hisItem1">
                <p>第一张扑克牌：</p>
                <h2>${hisArr[i][0].name}</h2>
            </div>
            <div class="hisItem2">
                <p>第二张扑克牌：</p>
                <h2>${hisArr[i][1].name}</h2>
            </div>
        </div>
        <h3>比赛结果：${result}</h3>
    `
        eHisDiv.appendChild(createHisDiv);
        var oHisItem1 = document.querySelectorAll('.hisItem1');
        var oHisItem2 = document.querySelectorAll('.hisItem2');
        render(oHisItem1[i], hisArr[i][0]);
        render(oHisItem2[i], hisArr[i][1]);
    }
}