jquery实现windows经典蜘蛛纸牌扑克小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现windows经典蜘蛛纸牌扑克小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta content="webkit" name="renderer" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <style>
        body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select {
    	margin:0;
    	padding:0
    }
    body {
    	font:14px 微软雅黑,宋体,arial narrow,HELVETICA;
    	background:#fff;
    	-webkit-text-size-adjust:100%
    }
    a {
    	color:#2d374b;
    	text-decoration:none
    }
    a:hover {
    	color:#cd0200;
    	text-decoration:underline
    }
    em {
    	font-style:normal
    }
    li {
    	list-style:none
    }
    img {
    	border:0;
    	vertical-align:middle
    }
    table {
    	border-collapse:collapse;
    	border-spacing:0
    }
    p {
    	word-wrap:break-word
    }
    body {
    	background:#f7f7f7
    }
    input,textarea,select,button {
    	outline:0;
    	font-size:15px;
    	color:#333;
    	padding:0;
    	margin:0
    }
    button {
    	border:0
    }
    table {
    	border-collapse:collapse;
    	border:1px solid #c1c1c1
    }
    .layer {
    	position:absolute;
    	left:0;
    	right:0;
    	top:0;
    	bottom:0;
    	background:rgba(0,0,0,.3);
    	z-index:999
    }
    .clear:after {
    	content:'';
    	height:0;
    	clear:both;
    	display:block
    }
    input:focus,textarea:focus,select:focus {
    	border-color:#66afe9!important;
    	outline:0!important;
    	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important;
    	box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)!important
    }
    ::-webkit-input-placeholder {
    	color:#a1a1a1
    }
    ::-moz-placeholder {
    	color:#a1a1a1
    }
    :-moz-placeholder {
    	color:#a1a1a1
    }
    :-ms-input-placeholder {
    	color:#a1a1a1
    }
    .none {
    	display:none!important
    }
    .flexP1 {
    	flex:1;
    	-webkit-flex:1;
    	box-flex:1;
    	-webkit-box-flex:1
    }
    .disFlex {
    	display:-webkit-box;
    	display:box;
    	display:-webkit-flex;
    	display:flex
    }
    .widAuto {
    	-webkit-box-pack:center;
    	box-pack:center;
    	-webkit-justify-content:center;
    	justify-content:center
    }
    .widStart {
    	-webkit-box-pack:start;
    	box-pack:start;
    	-webkit-justify-content:flex-start;
    	justify-content:flex-start
    }
    .widEnd {
    	-webkit-box-pack:end;
    	box-pack:end;
    	-webkit-justify-content:flex-end;
    	justify-content:flex-end
    }
    .heiAuto {
    	-webkit-box-align:center;
    	box-align:center;
    	-webkit-align-items:center;
    	align-items:center
    }
    .heiStart {
    	-webkit-box-align:start;
    	box-align:start;
    	-webkit-align-items:flex-start;
    	align-items:flex-start
    }
    .heiEnd {
    	-webkit-box-align:end;
    	box-align:end;
    	-webkit-align-items:flex-end;
    	align-items:flex-end
    }
    .borBox {
    	box-sizing:border-box
    }
    .columnFlex {
    	-webkit-box-orient:vertical;
    	box-orient:vertical;
    	-webkit-flex-direction:column;
    	flex-direction:column
    }
    .jcb {
    	-webkit-box-pack:justify;
    	-webkit-justify-content:space-between;
    	box-pack:justify;
    	justify-content:space-between
    }
    .threeFlex {
    	width:33.3%;
    	flex:1;
    	-webkit-flex:1;
    	box-flex:1;
    	-webkit-box-flex:1
    }
    .twoFlex {
    	width:50%;
    	flex:1;
    	-webkit-flex:1;
    	box-flex:1;
    	-webkit-box-flex:1
    }
    .gameView {
    	width:1220px;
    	height:800px;
    	background-repeat:no-repeat;
    	background-position:center center no-repeat;
    	background-size:cover;
    	margin:30px auto;
    	position:relative;
    	background-color:#317c5d
    }
    .gameBg {
    	width:100%;
    	height:100%;
    	background:#000;
    	opacity:.2
    }
    .pokerBox {
    	position:absolute;
    	left:0;
    	right:0;
    	top:0;
    	bottom:0;
    	z-index:9999
    }
    .pokerBr {
    	width:100px;
    	height:148px;
    	border:1.5px dashed #e1e1e1;
    	position:absolute;
    	left:20px;
    	top:20px;
    	box-sizing:border-box;
    	border-radius:7px;
    	z-index:666
    }
    .pokerLine {
    	width:100px;
    	position:absolute;
    	left:20px;
    	top:20px;
    	bottom:190px;
    	z-index:667
    }
    .pokerLi {
    	width:100px;
    	height:38px;
    	z-index:667
    }
    .pokerLi .img {
    	width:100px;
    	height:148px;
    	border:1px solid #666;
    	box-sizing:border-box;
    	overflow:hidden;
    	border-radius:7px
    }
    .pokerLi .img img {
    	width:100%;
    	display:none
    }
    .pokerLi[isOpen=no] img[name=back] {
    	display:block
    }
    .pokerLi[isOpen=yes] img[name=face] {
    	display:block
    }
    .pokerLi[state=move] {
    	opacity:.6
    }
    .pokerDeposit {
    	width:100px;
    	height:148px;
    	position:absolute;
    	left:20px;
    	bottom:20px;
    	z-index:668
    }
    .pokerLine .pokerLi.importantClass {
    	position:relative;
    	left:0!important;
    	top:0!important
    }
    .pokerDeposit .pokerLi {
    	position:absolute;
    	left:0;
    	top:0
    }
    .pokerMoveGroup {
    	display:none;
    	width:100px;
    	position:fixed;
    	left:0;
    	top:0;
    	z-index:669
    }
    .pokerMoveGroup .pokerLi {
    	position:relative;
    	left:0!important;
    	top:0!important
    }
    .pokerDoneGroup {
    	width:100px;
    	height:148px;
    	position:absolute;
    	right:20px;
    	bottom:20px;
    	z-index:668
    }
    .pokerDoneGroup .pokerLi {
    	position:absolute!important;
    	left:0!important;
    	top:0!important;
    	z-index:999
    }
    .gAlert {
    	position:fixed;
    	left:50%;
    	margin-left:-200px;
    	width:400px;
    	top:-300px;
    	background:rgba(0,0,0,.8);
    	z-index:9999;
    	font-size:16px;
    	color:#efefef;
    	border-radius:8px;
    	transition:top .4s ease-in-out
    }
    .gAlert .txt {
    	line-height:24px;
    	padding:8px 12px;
    	text-align:justify
    }
    .gAlert .tool {
    	padding:6px 0 16px
    }
    .gAlert .btn {
    	font-size:14px;
    	padding:0 8px;
    	line-height:30px;
    	border-radius:6px;
    	text-align:center;
    	min-width:60px;
    	cursor:pointer
    }
    .gAlert .btn1 {
    	background:#cc650d
    }
    .gAlert .btn2 {
    	background:#529a25;
    	margin-left:28px
    }
    .gAlert .btn3 {
    	background:#1c99ad;
    	margin-left:28px
    }
    .gAlert .btn1:hover {
    	background:#ab550c
    }
    .gAlert .btn2:hover {
    	background:#427b1e
    }
    .gAlert .btn3:hover {
    	background:#178394
    }
    .gAlert.out {
    	top:-300px!important
    }
    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>

<body>

    <div class="gameView" id="gameView">
        <div class="gameBg"></div>
        <div class="pokerBox" id="pokerBox"></div>
    </div>

    <script type="text/javascript">
        $('#pokerBox').on('mousedown', 'img', function (event) {
            event.preventDefault();
        })

        var pickLeft = pickTop = 0;
        var pickObj = null;
        $('body').on('mousedown', '#pokerBox .pokerLine .pokerLi', function (event) {
            var check = checkCanPickPoker(this);
            if (check.state) {
                var e = event || window.event;
                pickLeft = e.offsetX;
                pickTop = e.offsetY;
                pickObj = $(this);

                var groupTop = Number($(this).attr('groupTop'));
                var html = '';
                $(this).closest('.pokerLine').find('.pokerLi').each(function () {
                    if ($(this).attr('groupTop') >= groupTop) {
                        html += $(this).prop('outerHTML');
                        $(this).attr('state', 'move');
                    }
                });

                var itLeft = e.clientX - pickLeft;
                var itTop = e.clientY - pickTop;
                $('#pokerBox .pokerMoveGroup').show().css({
                    top: itTop,
                    left: itLeft,
                }).html(html);
            } else {
                gAlert({
                    txt: '该牌不允许被拖动',
                });
            }
        }).on('mousemove', function (event) {
            if (pickObj) {
                var e = event || window.event;
                var itLeft = e.clientX - pickLeft;
                var itTop = e.clientY - pickTop;
                $('#pokerBox .pokerMoveGroup').css({
                    top: itTop,
                    left: itLeft,
                })
            }
        }).on('mouseup', function (event) {
            if (pickObj) {
                var endLeft = Number($('#pokerBox .pokerMoveGroup').css('left').replace('px', '')) + 50;
                var leftKb = $('#gameView')[0].offsetLeft;
                var range = 0;
                if (endLeft <= leftKb + 120 + 10) { // 处于第一列
                    range = 1;
                } else if (endLeft >= leftKb + 120 * 9 + 10) { // 处于最后一列
                    range = 10;
                } else {
                    range = Math.ceil((endLeft - leftKb) / 120);
                }

                var moveCard = pickObj;
                var endCard = $('#pokerBox .pokerLine[group="' + range + '"] .pokerLi:last');

                if (endCard.length > 0) {
                    var moveCardSplit = moveCard.attr('card').split('-');
                    var endCardSplit = endCard.attr('card').split('-');
                    // if(moveCardSplit[0]==endCardSplit[0]&&moveCardSplit[1]==endCardSplit[1]-1){
                    if (moveCardSplit[1] == endCardSplit[1] - 1) {
                        $('#pokerBox .pokerLine[group="' + range + '"]').append($('#pokerBox .pokerMoveGroup').html());
                        $('#pokerBox .pokerLine[group="' + range + '"] .pokerLi').attr({
                            grouptop: function () { return $(this).index() + 1 },
                            groupleft: range,
                        })
                        $('#pokerBox .pokerLine .pokerLi[state="move"]').remove();
                    }
                } else {
                    $('#pokerBox .pokerLine[group="' + range + '"]').append($('#pokerBox .pokerMoveGroup').html());
                    $('#pokerBox .pokerLine[group="' + range + '"] .pokerLi').attr({
                        grouptop: 1,
                        groupleft: range,
                    })
                    $('#pokerBox .pokerLine .pokerLi[state="move"]').remove();
                }

                $('#pokerBox .pokerLine .pokerLi[state="move"]').removeAttr('state');

                $('#pokerBox .pokerMoveGroup').hide().css({
                    top: 0,
                    left: 0,
                }).empty();
                pickLeft = pickTop = 0;
                pickObj = null;
            }

            checkNoOpenPoker(); // 检测并翻开没有翻开的扑克
            checkDonePoker(); // 检测是否可以直接收取正确排序的卡牌
        })

        $('#pokerBox').on('click', '.pokerDeposit', function () {
            keepSendPoker();
        })

        // 初始化页面布局
        function initView() {
            var html = html2 = '';
            for (var i = 1; i <= 10; i++) {
                html += '<div class="pokerBr" style="left: ' + (120 * i - 100) + 'px" group="' + i + '"></div>';
                html2 += '<div class="pokerLine" style="left: ' + (120 * i - 100) + 'px" group="' + i + '"></div>';
            }
            var html3 = '<div class="pokerDeposit"></div>'; // 牌堆
            var html4 = '<div class="pokerMoveGroup"></div>'; // 移动牌组
            var html5 = '<div class="pokerDoneGroup"></div>'; // 完成牌组
            $('#pokerBox').html(html + html2 + html3 + html4 + html5);
        }

        // 生成随机扑克牌数组
        var pokerData = {
            type: ['a', 'b', 'c', 'd'], // [a 方片] [b 梅花] [c 黑桃] [d 红桃]
            num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        };
        var pokerAllCount = 0;
        var pokerAllPet = [];
        var pokerSendNum = 0;
        var pokerDifficult = 1; // [1 简单（单色）] [2 中等（双色）] [3 困难（四色）]
        function initRandomPoker() {
            pokerAllCount = 0;
            pokerAllPet = [];
            pokerSendNum = 0;
            for (var i = 1; i <= pokerData.type.length; i++) {
                for (var t = 1; t <= pokerData.num.length; t++) {
                    var d = pokerData.type[i - 1] + '-' + pokerData.num[t - 1];
                    pokerAllPet.push(d, d);
                }
            }
            // console.log(pokerAllPet);
            pokerAllCount = pokerAllPet.length;
            pokerAllPet = shuffle(pokerAllPet);
        }

        // 数组随机排序
        function shuffle(arr) {
            var len = arr.length;
            for (var i = 0; i < len - 1; i++) {
                var idx = Math.floor(Math.random() * (len - i));
                var temp = arr[idx];
                arr[idx] = arr[len - i - 1];
                arr[len - i - 1] = temp;
            }
            return arr;
        }

        // 生成扑克牌卡片
        function initPokerCard() {
            var html = '';
            for (var i = 1; i <= pokerAllCount; i++) {
                var sort = pokerAllCount - i + 1;
                var card = pokerAllPet[sort - 1];

                // if(sort == 34){
                // 	card = 'a-3'
             .........完整代码请登录后点击上方下载按钮下载查看