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.0">
<title>聚宝坊 · 买大买小</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{ --gold:#e8c15a; --gold-dim:#9a7a33; --red:#a3271f; --ink:#120b06; --paper:#efe2c0; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0d0705;font-family:'Noto Serif SC',serif;color:var(--paper);user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 42%,transparent 44%,rgba(5,2,0,.62) 100%)}
.hud{position:fixed;z-index:10;pointer-events:none}
button{pointer-events:auto;font-family:inherit;cursor:pointer}
button:disabled{filter:grayscale(.75) brightness(.55);cursor:not-allowed!important}

/* ---- 银两牌 ---- */
#balanceBox{top:18px;left:18px;display:flex;align-items:center;gap:14px}
.plaque{background:linear-gradient(160deg,#2b1a0c,#1a0f07 60%,#241505);border:2px solid #7c5a22;border-radius:6px;
  padding:10px 22px;box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.6),inset 0 0 18px rgba(232,193,90,.08)}
.plaque .lbl{font-size:12px;letter-spacing:8px;color:#c9a25a}
.plaque .num{font-family:'Ma Shan Zheng';font-size:46px;color:var(--gold);line-height:1.05;text-shadow:0 0 18px rgba(232,193,90,.35)}
.plaque .num small{font-size:20px;margin-left:4px}
.plaque.flash{animation:shakeX .4s}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---- 路单 ---- */
#luBox{top:18px;right:18px;text-align:right}
#luBox .lbl{font-size:12px;letter-spacing:8px;color:#c9a25a;margin-bottom:6px}
#lu{display:flex;gap:6px;flex-wrap:wrap;max-width:300px;justify-content:flex-end}
.luDot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Ma Shan Zheng';font-size:16px;border:1px solid rgba(232,193,90,.5);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.lu-da{background:radial-gradient(circle at 35% 30%,#d05a3a,#7c1d12);color:#ffe9c9}
.lu-xiao{background:radial-gradient(circle at 35% 30%,#5aa37a,#1d5c3c);color:#eaffe9}
.lu-bao{background:radial-gradient(circle at 35% 30%,#ffd97a,#a3721d);color:#4a2c00}
.luDot.new{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---- 庄家说话 ---- */
#say{top:14%;left:50%;transform:translateX(-50%);font-size:17px;letter-spacing:4px;color:#e8cfa0;opacity:0;
  transition:opacity .5s;background:rgba(18,10,4,.6);border:1px solid rgba(232,193,90,.35);padding:7px 24px;border-radius:4px;white-space:nowrap}
#say.show{opacity:1}

/* ---- 大字横幅 ---- */
#banner{top:33%;left:50%;transform:translate(-50%,-50%);font-family:'Ma Shan Zheng';font-size:92px;color:#f6d78a;
  text-shadow:0 0 34px rgba(246,215,138,.35),0 5px 0 rgba(0,0,0,.55);opacity:0;letter-spacing:12px;white-space:nowrap;z-index:12}
#banner.lose{color:#e09a82;text-shadow:0 0 30px rgba(224,154,130,.3),0 5px 0 rgba(0,0,0,.55)}
#banner.bao{color:#ffe08a;text-shadow:0 0 46px rgba(255,224,138,.6),0 5px 0 rgba(0,0,0,.55)}
#banner.show{animation:slam 2.3s ease forwards}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-4deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
  72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}}

/* ---- 底部操作区 ---- */
#bottomBar{left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px}
#chips{display:flex;gap:14px}
.chip{width:66px;height:66px;border-radius:50%;position:relative;border:3px solid #5d431c;
  background:radial-gradient(circle at 35% 30%,#8a6a33,#4a3313 72%);color:#f4dfae;font-family:'Ma Shan Zheng';
  box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 12px rgba(0,0,0,.5);transition:transform .15s,box-shadow .15s}
.chip::before{content:'';position:absolute;left:50%;top:8px;transform:translateX(-50%);width:11px;height:11px;background:#1b1108;border:2px solid #6e5426}
.chip span{position:absolute;left:0;right:0;bottom:8px;font-size:21px}
.chip:hover{transform:translateY(-4px)}
.chip.sel{border-color:var(--gold);transform:translateY(-6px) scale(1.07);box-shadow:0 0 20px rgba(232,193,90,.7),0 4px 10px rgba(0,0,0,.6)}
#actions{display:flex;gap:16px;align-items:stretch}
.betBtn{min-width:132px;padding:8px 20px 12px;border-radius:10px;border:2px solid;position:relative;text-align:center;transition:transform .12s,filter .12s}
.betBtn b{font-family:'Ma S.........完整代码请登录后点击上方下载按钮下载查看