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 {
 .........完整代码请登录后点击上方下载按钮下载查看