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, maximum-scale=1.0, user-scalable=no">
<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>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0b0f16;font-family:'Noto Serif SC','Songti SC',serif;color:#f2e7cd;-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0}
#stage canvas{display:block;touch-action:none;cursor:crosshair}
.vig{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(4,7,11,.62) 100%)}
.corner{position:fixed;width:30px;height:30px;border:2px solid rgba(216,171,84,.55);z-index:4;pointer-events:none}
.c-tl{top:14px;left:14px;border-right:0;border-bottom:0}
.c-tr{top:14px;right:14px;border-left:0;border-bottom:0}
.c-bl{bottom:14px;left:14px;border-right:0;border-top:0}
.c-br{bottom:14px;right:14px;border-left:0;border-top:0}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#titleBox{position:absolute;top:30px;left:28px;display:flex;flex-direction:column;align-items:flex-start}
#titleBox .trow{display:flex;gap:12px;align-items:flex-start}
#titleBox h1{writing-mode:vertical-rl;font-family:'Ma Shan Zheng',serif;font-weight:400;font-size:62px;line-height:1;color:#f2e7cd;letter-spacing:.18em;text-shadow:0 2px 16px rgba(0,0,0,.65)}
#titleBox .sub{writing-mode:vertical-rl;font-size:13px;letter-spacing:.55em;color:rgba(216,171,84,.85);margin-top:8px}
.seal{margin-top:14px;background:#b83227;color:#f7ead0;font-family:'Ma Shan Zheng',serif;font-size:22px;line-height:1;padding:6px 6px;transform:rotate(4deg);box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(247,234,208,.55)}
#scoreBox{position:absolute;top:32px;right:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.slots{display:flex;gap:9px}
.slot{position:relative;width:30px;height:2px;background:linear-gradient(90deg,#f0d692,#b58b3e);opacity:.95;transition:.35s;transform-origin:right center}
.slot::before{content:'';position:absolute;left:-1px;top:-3px;width:0;height:0;border-right:7px solid #f0d692;border-top:4px solid transparent;border-bottom:4px solid transparent}
.slot::after{content:'';position:absolute;right:-1px;top:-2px;width:4px;height:6px;background:#b83227}
.slot.used{opacity:.13;filter:grayscale(1);transform:rotate(-16deg) translateX(6px)}
.scoreRow{display:flex;align-items:baseline;gap:10px}
.scoreRow .lbl{font-size:14px;letter-spacing:.45em;color:rgba(216,171,84,.9)}
#scoreNum{font-family:'Ma Shan Zheng',serif;font-weight:400;font-size:46px;color:#e8c377;line-height:1;min-width:56px;text-align:right;text-shadow:0 0 18px rgba(232,195,119,.35)}
#streak{font-size:13px;letter-spacing:.3em;color:#ff8d6b;opacity:0;transition:.3s;text-shadow:0 0 12px rgba(255,141,107,.4)}
#streak.on{opacity:1}
#mute{pointer-events:auto;position:absolute;right:32px;bottom:28px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(216,171,84,.5);background:rgba(14,19,28,.6);color:#d8ab54;font-size:15px;font-family:'Noto Serif SC',serif;cursor:pointer;transition:.25s}
#mute:hover{background:rgba(216,171,84,.16);transform:scale(1.08)}
.credit{position:fixed;left:24px;bottom:22px;font-size:11px;letter-spacing:.3em;color:rgba(242,231,205,.32);z-index:5;pointer-events:none}
#hint{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);z-index:5;poin.........完整代码请登录后点击上方下载按钮下载查看