three实现三维扑克牌炸金花游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维扑克牌炸金花游戏代码

下面为部分代码预览，完整代码请点击下载或在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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#e8b64c; --gold2:#f7df9a; --red:#c8283c;
  --panel:linear-gradient(160deg,rgba(34,18,10,.9),rgba(12,6,4,.92));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Noto Sans SC',"PingFang SC","Microsoft YaHei",sans-serif;
  color:#f3e7cf;user-select:none;
  background:radial-gradient(1100px 700px at 50% 12%, #4c1214 0%, #200607 52%, #0b0203 100%);
}
#c{position:fixed;inset:0;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(0,0,0,.6) 100%)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud button{pointer-events:auto}

/* ── 顶栏 ── */
#top{position:fixed;top:14px;left:18px;right:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-family:'Ma Shan Zheng',serif;font-size:40px;line-height:1;color:var(--gold2);
  text-shadow:0 0 18px rgba(232,182,76,.45),0 3px 0 #5c3b0e;letter-spacing:4px}
.logo span{font-family:'Noto Sans SC';font-size:13px;font-weight:700;color:#caa64f;letter-spacing:6px;margin-left:10px;vertical-align:8px}
.pill{background:var(--panel);border:1px solid rgba(232,182,76,.4);border-left:3px solid var(--gold);
  padding:8px 16px;font-size:14px;color:#e7d3a4;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.pill b{color:#ffe9ad;font-size:17px;margin-left:4px}
#top .spacer{flex:1}
.ghost{background:rgba(20,10,6,.7);border:1px solid rgba(232,182,76,.45);color:#f0d79a;
  padding:8px 14px;border-radius:6px;cursor:pointer;font-size:15px;transition:.2s}
.ghost:hover{border-color:var(--gold2);box-shadow:0 0 14px rgba(232,182,76,.3);transform:translateY(-2px)}

/* ── 玩家面板 ── */
.panel{position:fixed;display:flex;gap:12px;align-items:center;background:var(--panel);
  border:1px solid rgba(232,182,76,.35);border-radius:8px;padding:12px 18px;min-width:190px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);transition:opacity .4s,filter .4s,box-shadow .3s}
.panel .ava{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:radial-gradient(circle at 35% 30%,#5a2f18,#2a1208);
  border:2px solid rgba(232,182,76,.6);flex:none}
.pname{font-weight:900;font-size:17px;color:#ffe3a1}
.pname em{font-style:normal;font-size:11px;font-weight:500;color:#b89a5e;border:1px solid rgba(232,182,76,.4);
  padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:2px}
.pchip{margin-top:5px;font-size:14px;color:#e7d3a4}
.pchip span{color:#ffe9ad;font-weight:700;font-size:16px}
.panel.down{opacity:.35;filter:grayscale(.9)}
.panel.turn{box-shadow:0 0 0 2px var(--gold),0 0 26px rgba(232,182,76,.45),0 8px 24px rgba(0,0,0,.5)}
#panel1{top:96px;left:18px}
#panel2{top:96px;right:18px}
#panel0{bottom:16px;left:16px}

/* ── 操作区 ── */
#dock{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#statusTxt{margin-bottom:8px;font-size:14px;color:#e0c88f;text-shadow:0 2px 6px #000;letter-spacing:1px}
#btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#btns button{
  font-family:inherit;font-size:15px;font-weight:700;color:#f6dfae;cursor:pointer;
  min-width:92px;padding:12px 14px;border-radius:8px;
  background:linear-gradient(#31200f,#170c05);border:1px solid #b78a3a;
  box-shadow:inset 0 1px 0 rgba(255,225,150,.25),0 4px 12px rgba(0,0,0,.5);
  transition:.18s}
#btns button i{font-style:normal;color:#ffd77a;font-size:13px;margin-left:5px}
#btns button:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold2);
  box-shadow:0 8px 22px rgba(232,170,60,.3),inset 0 1px 0 rgba(255,225,150,.3)}
#btns button:active:not(:disabled){transform:translateY(0)}
#btns button:disabled{opacity:.32;cursor:default}
#bFold{border-color:#a04545;color:#f5c1c1}
.hint.........完整代码请登录后点击上方下载按钮下载查看