three做个三维月饼堆叠游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由mimo-2.6 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维月饼堆叠游戏

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<title>月宫叠饼 · Three.js</title>
<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=IBM+Plex+Mono:wght@500&family=Noto+Sans+SC:wght@400;500&family=Noto+Serif+SC:wght@500;600&display=swap" rel="stylesheet">
<style>
:root{
  --canvas-ink:#070A18; --sky-deep:#0D1326; --surface-metal:#151D35; --surface-metal-light:#202A46;
  --moonstone:#F3D9A4; --moon-shadow:#D4A85D; --gold:#E9B85B; --gold-light:#FFF0A6;
  --voltage:#F5C86B; --ink-muted:#AAB3C7; --ink-faint:#56627D; --line-gold:#B88A43;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%;overflow:hidden;background:var(--canvas-ink)}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink-muted);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;
}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.atmos{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 80% at 50% 42%, rgba(7,10,24,0) 42%, rgba(7,10,24,.55) 82%, rgba(7,10,24,.9) 100%);
  mix-blend-mode:multiply}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:5;padding:32px;padding-top:max(32px,env(safe-area-inset-top));
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr auto;gap:0 16px;pointer-events:none}
.brand{grid-column:1/5;grid-row:1}
.brand h1{font-family:"Noto Serif SC",serif;font-weight:500;font-size:clamp(28px,4.4vw,64px);line-height:1;
  color:var(--gold-light);letter-spacing:.02em}
.brand .eyebrow{margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;color:var(--gold);opacity:.72}

.score{grid-column:9/13;grid-row:1;justify-self:end;text-align:right;min-width:104px}
.score .label{font-family:"Noto Serif SC",serif;font-size:14px;color:var(--ink-muted);letter-spacing:.04em}
.score .label small{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-faint);margin-left:8px}
.score .num{font-family:"IBM Plex Mono",monospace;font-size:72px;line-height:.95;color:var(--moonstone);
  font-variant-numeric:tabular-nums;margin-top:8px;transition:color .42s ease}
.score .num.perfect{color:var(--gold-light)}
.score .rule{height:2px;background:var(--line-gold);width:100%;margin-top:12px;
  transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.16,1,.3,1)}
.score .rule.on{transform:scaleX(1)}
.score .plus{position:absolute;right:0;top:100%;margin-top:2px;font-family:"IBM Plex Mono",monospace;
  font-size:13px;color:var(--voltage);opacity:0;transform:translateY(0);letter-spacing:.04em}
.score{position:relative}

.bottom{grid-column:1/13;grid-row:3;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.bottom .side{width:150px;flex:0 0 auto}
.depth{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-faint)}
.hint{flex:1 1 auto;text-align:center;padding-bottom:2px}
.hint .icon{display:block;margin:0 auto 12px;color:var(--gold);opacity:.72}
.hint .lead{font-size:18px;font-weight:500;color:var(--moonstone);letter-spacing:.02em}
.hint .sub{font-family:"Noto Serif SC",serif;font-size:13px;color:var(--ink-muted);margin-top:8px;opacity:.85}
.actions{width:150px;flex:0 0 auto;display:flex;justify-content:flex-end}
button{pointer-events:auto;font-family:"Noto Sans SC",sans-serif;cursor:pointer}

.btn-reset{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 16px;border:0;
  border-radius:2px;background:transparent;color:var(--gold);font-size:13px;letter-spacing:.04em}
.btn-reset svg{color:var(--line-gold);transition:color .3s ease}
.btn-reset:hover,.btn-reset:focus-visible{background:var(--surface-meta.........完整代码请登录后点击上方下载按钮下载查看