three做个三维中秋放飞孔明灯游戏代码-html代码-BFW代码库

three做个三维中秋放飞孔明灯游戏代码

代码语言：html

所属分类：其他

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

代码描述：三维中秋放飞孔明灯游戏

下面为部分代码预览，完整代码请点击下载或在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 { width:100%; height:100%; overflow:hidden; background:#05070f; }
  body { font-family:'Noto Serif SC', serif; color:#f0c987; }
  #app { position:fixed; inset:0; touch-action:none; }
  canvas { display:block; }

  /* 电影感暗角，服务夜色氛围与文字可读性 */
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:2;
    background:radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(2,4,12,.55) 100%); }

  #ui { position:fixed; inset:0; z-index:3; pointer-events:none; }
  .hidden { opacity:0 !important; visibility:hidden !important; }

  /* —— 顶部 HUD —— */
  #hud { position:absolute; inset:0; transition:opacity .5s; }
  #titleBox { position:absolute; top:22px; left:22px; display:flex; gap:10px; align-items:flex-start; }
  #titleBox h1 { writing-mode:vertical-rl; font-family:'Ma Shan Zheng', serif; font-weight:400;
    font-size:clamp(22px,3.4vw,30px); letter-spacing:.28em; color:#f5d9a0;
    text-shadow:0 0 18px rgba(255,170,80,.35), 0 1px 2px rgba(0,0,0,.8); }
  .seal { width:34px; height:34px; margin-top:2px; background:#b3342a; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Ma Shan Zheng', serif; font-size:15px; line-height:1.05; color:#ffe9d2;
    writing-mode:vertical-rl; box-shadow:0 2px 10px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.3); }
  #scoreBox { position:absolute; top:20px; right:24px; text-align:right; }
  #score { font-size:clamp(30px,5vw,44px); font-weight:900; line-height:1;
    color:#ffe4b0; text-shadow:0 0 22px rgba(255,160,70,.4), 0 1px 3px rgba(0,0,0,.8);
    font-variant-numeric:tabular-nums; }
  #scoreUnit { margin-top:6px; font-size:12px; letter-spacing:.4em; color:rgba(240,201,135,.6); }
  #tips { position:absolute; bottom:18px; left:0; right:0; text-align:center;
    font-size:clamp(11px,1.6vw,13px); letter-spacing:.24em; color:rgba(240,210,160,.55);
    text-shadow:0 1px 2px rgba(0,0,0,.8); transition:opacity .5s; }

  /* —— 菜单 —— */
  #menu { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    transition:opacity .8s, visibility .8s; }
  .menu-inner { text-align:center; padding:0 24px; transform:translateY(-4vh); }
  .menu-inner h1 { font-family:'Ma Shan Zheng', serif; font-weight:400;
    font-size:clamp(52px,10vw,96px); letter-spacing:.12em; color:#f7dcA6; color:#f7dca6;
.........完整代码请登录后点击上方下载按钮下载查看