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

代码语言:html

所属分类:游戏

代码描述:jquery实现windows经典蜘蛛纸牌扑克小游戏代码

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

网友评论0