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>齿轮钟塔 · The Clockwork Spire</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Serif+SC:wght@400;600;900&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
:root{--gold:#d8ab55;--gold-hi:#f4d28a;--panel:rgba(13,17,25,.82);--line:rgba(216,171,85,.4)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05070c;color:#cfd6e2;font-family:'Noto Serif SC',serif;user-select:none}
.disp{font-family:'ZCOOL XiaoWei','Noto Serif SC',serif}
.num{font-family:'Cinzel','Noto Serif SC',serif}
canvas{display:block}
#app{position:fixed;inset:0}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(3,5,9,.62) 100%)}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.panel{background:linear-gradient(160deg,var(--panel),rgba(8,10,15,.78));border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(244,210,138,.12);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);pointer-events:auto;backdrop-filter:blur(3px)}
#titleBlock{position:absolute;top:18px;left:20px;pointer-events:none}
#titleBlock h1{margin:0;font-size:clamp(26px,3.4vw,40px);letter-spacing:.3em;color:var(--gold-hi);text-shadow:0 0 22px rgba(216,171,85,.4),0 2px 4px #000}
#titleBlock .sub{margin-top:4px;font-family:'Cinzel';font-size:11px;letter-spacing:.52em;color:rgba(216,171,85,.75)}
#topRight{position:absolute;top:18px;right:20px;display:flex;gap:10px;align-items:center}
.badge{padding:8px 16px;font-size:14px;letter-spacing:.24em;color:var(--gold-hi)}
.iconBtn{width:40px;height:40px;display:grid;place-items:center;font-size:17px;cursor:pointer;color:var(--gold);background:rgba(13,17,25,.8);border:1px solid var(--line);transition:.2s}
.iconBtn:hover{color:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 0 14px rgba(216,171,85,.35);transform:translateY(-1px)}
#panelRiddle{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:min(300px,78vw);padding:16px 18px}
.panelHead{font-family:'ZCOOL XiaoWei';font-size:13px;letter-spacing:.34em;color:rgba(216,171,85,.8);border-bottom:1px solid rgba(216,171,85,.22);padding-bottom:8px;margin-bottom:10px}
#riddleTxt{font-size:15px;line-height:1.9;color:#e8ddc4;margin:0 0 14px}
#targetRow{display:flex;align-items:center;gap:14px}
#miniClock{width:82px;height:82px;border-radius:50%;flex:none;position:relative;background:radial-gradient(circle at 38% 32%,#1c2431,#0b0f16 70%);border:2px solid var(--line);box-shadow:inset 0 0 18px #000,0 0 16px rgba(216,171,85,.15)}
#miniClock .tick{position:absolute;left:50%;top:50%;width:2px;height:40px;margin-left:-1px;margin-top:-40px;transform-origin:bottom center}
#miniClock .tick::before{content:'';display:block;width:2px;height:7px;background:rgba(216,171,85,.75)}
.mcHand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:2px}
#mcH{width:4px;height:21px;margin-left:-2px;background:var(--gold-hi)}
#mcM{width:3px;height:31px;margin-left:-1.5px;background:#e8ddc4}
#miniClock::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--gold-hi)}
#targetMeta .lab{font-size:11px;letter-spacing:.3em;color:rgba(207,214,226,.55)}
#tgtTime{font-family:'Cinzel';font-size:30px;color:var(--gold-hi);text-shadow:0 0 14px rgba(216,171,85,.45)}
#panelTime{position:absolute;left:20px;bottom:20px;padding:14px 20px;min-width:250px}
#timeRow{display:flex;align-items:baseline;gap:6px}
#timeRow .num{font-size:46px;font-weight:700;color:var(--gold-hi);text-shadow:0 0 20px rgba(216,171,85,.45)}
#colon{animation:blinkc 1.2s steps(2) infinite}
@keyframes blinkc{50%{opacity:.2}}
.meterRow{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:rgba(207,214,226,.6);letter-spacing:.2em}
.meter{flex:1;height:5px;background:rgba(255,255,255,.07);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a5a22,var(--gold-hi));transition:width .15s;box-shadow:0 0 8px rgba(216,171,85,.5)}
.meterRow.aligned .meter i{background:linear-gradient(90deg,var(--gold),#ffe9b0)}
#statusTxt{margin:10px 0 0;font-size:12.5px;letter-spacing:.14em;color:rgba(216,171,85,.8)}
#statusTxt.hot{color:#ffe9b0;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
#panelCtl{position:absolute;right:20px;bottom:20px;padding:14px 16px;text-align:center}
#panelCtl .lab{font-size:11px;letter-spacing:.3em;color:rgba(207,214,226,.55);margin-bottom:10px}
.ctlRow{display:flex;gap:10px;justify-content:center}
.ctl{width:52px;height:46px;font-family:'Noto Serif SC';font-size:15px;letter-spacing:.1em;cursor:pointer;color:var(--gold-hi);background:linear-gradient(#241f12,#141007);border:1px solid.........完整代码请登录后点击上方下载按钮下载查看