js实现扑克牌掼蛋人机对战游戏代码-html代码-BFW代码库

js实现扑克牌掼蛋人机对战游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现扑克牌掼蛋人机对战游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>掼蛋 · 人机对战</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;user-select:none}
html,body{width:100%;height:100%;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 42%,#2f8f57 0%,#1c6b3f 45%,#0d4a2a 80%,#07351d 100%);font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#fff}
#table{position:relative;width:100%;height:100%}
#table::before{content:"";position:absolute;left:50%;top:47%;width:72vmin;height:46vmin;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.13);border-radius:50%;pointer-events:none}

.pinfo{position:absolute;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:6px 14px;text-align:center;min-width:150px;z-index:6;transition:.3s}
.pinfo .pname{font-size:14px;font-weight:bold}
.pinfo .pmeta{font-size:12px;opacity:.85;margin-top:2px}
.pinfo .pcnt{font-size:12px;color:#ffd76a;margin-top:2px}
.pinfo.active{border-color:#ffd700;box-shadow:0 0 16px rgba(255,215,0,.8)}
.pinfo.done{opacity:.5}
.pinfo .badge{display:none;background:#ffd700;color:#333;font-size:11px;border-radius:8px;padding:0 6px;margin-left:4px}
.pinfo.done .badge{display:inline-block}
#info0{left:16px;bottom:16px}
#info1{right:12px;top:44%}
#info2{left:50%;top:10px;transform:translateX(-50%)}
#info3{left:12px;top:44%}

.ahand{position:absolute;z-index:4}
#hand1{right:14px;top:54%}
#hand3{left:14px;top:54%}
#hand2{left:50%;top:62px;transform:translateX(-50%)}
.back{width:40px;height:56px;border-radius:5px;background:linear-gradient(135deg,#3056a8,#1b3470);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.45);display:inline-block}
#hand1 .back,#hand3 .back{display:block}
#hand2 .back{margin-left:-22px}
#hand1 .back{margin-top:-40px}
#hand3 .back{margin-top:-40px}
#hand1 .back:first-child,#hand3 .back:first-child,#hand2 .back:first-child{margin:0}

.zone{position:absolute;min-width:130px;min-height:70px;text-align:center;z-index:5;pointer-events:none}
#zone0{left:50%;top:53%;transform:translate(-50%,0)}
#zone2{left:50%;top:19%;transform:translate(-50%,0)}
#zone3{left:17%;top:38%}
#zone1{right:17%;top:38%}
.zone .pass{display:inline-block;background:rgba(0,0,0,.45);padding:6px 16px;border-radius:20px;font-size:16px;color:#ddd}
.zone .cards{display:flex;justify-content:center}
.zone .cards .card{margin-left:-20px}
.zone .cards .card:first-child{margin-left:0}

.card{width:58px;height:82px;background:#fffef8;border:1px solid #bbb;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.4);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;position:relative;flex:none}
.card .r{font-size:22px;font-weight:bold}
.card .s{font-size:24px;margin-top:3px}
.card.black{color:#222}.card.red{color:#d02020}
.card.jk .s{font-size:20px;font-weight:bold}
.card.wild{box-shadow:0 0 8px 2px rgba(255,200,0,.95);border-color:#e0a800}
.card.wild::after{content:"配";position:absolute;top:2px;right:3px;font-size:10px;color:#c8860a;f.........完整代码请登录后点击上方下载按钮下载查看