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

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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, user-scalable=no">
<meta name="theme-color" content="#0a1026">
<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&display=swap" rel="stylesheet">
<style>
  :root{ --gold:#f2c76e; --gold-soft:#f7e9c0; --red:#c3452e; }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; height:100%; overflow:hidden; overscroll-behavior:none; }
  body{
    font-family:'Noto Sans SC',sans-serif; color:var(--gold-soft); user-select:none;
    background:
      radial-gradient(1100px 750px at 74% 16%, rgba(255,236,180,.10), transparent 60%),
      radial-gradient(900px 620px at 18% 82%, rgba(90,120,220,.12), transparent 60%),
      linear-gradient(#0e1633 0%, #0a1026 46%, #050810 100%);
  }
  #app{ position:fixed; inset:0; }
  #app canvas{ display:block; touch-action:none; }
  .vignette{ position:fixed; inset:0; z-index:5; pointer-events:none;
    background:radial-gradient(120% 92% at 50% 42%, transparent 55%, rgba(3,5,12,.55) 100%); }
  .hud{ position:fixed; z-index:10; pointer-events:none; }

  /* ── 左上题名 ── */
  .brand{ top:18px; left:22px; }
  .title-row{ display:flex; align-items:flex-start; gap:10px; }
  .brand h1{
    margin:0; font-family:'Ma Shan Zheng',cursive; font-weight:400; line-height:1;
    font-size:clamp(30px,5.4vw,52px); letter-spacing:.08em; color:#f8ecc4;
    text-shadow:0 0 20px rgba(255,214,120,.35), 0 2px 0 rgba(0,0,0,.45);
  }
  .seal{
    margin-top:8px; width:30px; height:30px; display:grid; place-items:center; flex:none;
    font-family:'Ma Shan Zheng'; font-size:19px; color:#fff3e2; border-radius:4px;
    background:linear-gradient(155deg,#cf5638,#a5301f); transform:rotate(7deg);
    box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,244,224,.85);
  }
  .tagline{ margin:9px 0 0; font-size:11px; letter-spacing:5px; color:rgba(242,199,110,.72); }

  /* ── 右上得分 ── */
  .score-panel{
    top:18px; right:20px; min-width:158px; padding:12px 16px 11px; text-align:right;
    border:1px solid rgba(242,199,110,.30);
    background:linear-gradient(180deg, rgba(16,22,46,.72), rgba(10,14,30,.58));
  }
  .score-panel::before,.score-panel::after{ content:''; position:absolute; width:14px; height:14px; }
  .score-panel::before{ top:-1px; left:-1px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
  .score-panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
  .label{ font-size:11px; letter-spacing:7px; color:rgba(242,199,110,.75); text-indent:7px; }
  .value{
    font-family:'Ma Shan Zheng'; font-size:clamp(34px,5vw,50px); line-height:1.05;
    color:#ffdf94; text-shadow:0 0 16px rgba(255,190,80,.35);
  }
  .value.bump{ animation:bump .32s ease; }
  .meta{ margin-top:3px; display:flex; gap:9px; justify-content:flex-end; font-size:11px; color:rgba(240,230,200,.62); }
  .meta .divider{ width:1px; background:rgba(242,199,110,.3); }
  .meta b{ color:rgba(255,223,148,.9); font-weight:500; }
  .combo{ margin-top:5px; font-size:12px; letter-spacing:2px; color:#ff9d6e; }

  /* ── 底部提示 & 按钮 ── */
  .hint{
    bottom:20px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:9px; padding:9px 20px; white-space:nowrap;
    border-radius:999px; border:1px solid rgba(242,199,110,.25); background:rgba(9,13,28,.55);
    font-size:12.5px; letter-spacing:.........完整代码请登录后点击上方下载按钮下载查看