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