three做个三维中秋兔子奔月收集月饼跑酷游戏代码-html代码-BFW代码库

代码语言：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, maximum-scale=1, user-scalable=no">
<title>玉兔奔月 · 中秋 3D 跑酷</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=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#e9c87e; --gold-dim:#b99a5c; --ink:#f2ead6; --night:#070d24; --red:#b8442f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--night);touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{font-family:'Noto Serif SC',serif;color:var(--ink)}
canvas{display:block;position:fixed;inset:0}

#vignette{position:fixed;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(3,6,16,.55) 100%)}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;padding:18px 22px}
#muteBtn{pointer-events:auto;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(233,200,126,.35);background:rgba(8,13,32,.5);color:var(--gold);
  cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#muteBtn svg{width:18px;height:18px}
.ingame{opacity:0;transition:opacity .5s}
body.playing .ingame{opacity:1}
#gameTitle{position:absolute;left:50%;transform:translateX(-50%);top:12px;text-align:center;
  font-family:'Ma Shan Zheng',serif;font-weight:400;font-size:30px;color:var(--gold);
  letter-spacing:8px;text-indent:8px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#gameTitle::after{content:'';display:block;margin:3px auto 0;width:64px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
#scoreBox{text-align:right;margin-left:auto}
#scoreLabel{font-size:11px;letter-spacing:6px;color:var(--gold-dim)}
#scoreVal{font-size:34px;line-height:1.15;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.65)}
#scoreVal.pop{animation:pop .35s ease}
@keyframes pop{30%{transform:scale(1.25)}}
#cakeCount{font-size:11px;letter-spacing:3px;color:rgba(242,234,214,.55);margin-top:2px}
#hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:3px;color:rgba(242,234,214,.5);white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:6}
.fs{position:fixed;font-weight:600;color:var(--gold);font-size:22px;pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.6);animation:fsUp .9s ease-out forwards}
@keyframes fsUp{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-72px) scale(1)}}

#flash{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;
  background:radial-gradient(circle, rgba(255,60,30,0) 35%, rgba(255,60,30,.4) 100%)}
#flash.on{animation:flashA .55s ease-out}
@keyframes flashA{0%{opacity:1}100%{opacity:0}}

.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .6s ease}
.overlay.hidden{opacity:0;visibility:hidden}
.menu-inner{pointer-events:auto;text-align:center;padding:40px 20px;max-width:92vw}
.menu-sub{font-size:13px;letter-spacing:10px;text-indent:10px;color:var(--gold-dim);margin-bottom:14px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.menu-title{font-family:'Ma Shan Zheng',serif;font-weight:400;font-size:min(19vw,106px);
  color:var(--ink);letter-spacing:14px;text-indent:14px;line-height:1.15;
  text-shadow:0 3px 26px rgba(0,0,0,.55)}
.menu-line{width:230px;height:1px;margin:20px auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.menu-desc{font-size:14px;letter-spacing:4px;color:rgba(242,234,214,.72);
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
#menuBest{font-size:12px;letter-spacing:4px;color:var(--gold-dim);margin-top:8px}
.start-btn{display:inline-block;font-family:'Ma Shan Zheng',serif;font-size:26px;color:#ffe9c4;
  letter-spacing:12px;text-indent:12px;background:rgba(184,68,47,.92);cursor:pointer;
  border:1px solid rgba(233,200,126,.65);outline:1px solid rgba(233,200,126,.22);outline-offset:4px;
  border-radius:4px;padding:12px 46px;margin-top:28px;
  box-shadow:0 6px 24px rgba(0,0,0,.4), inset 0 0 18px rgba(255,220,160,.12);
  transition:transform .25s, background .25s}
.start-btn:hover{transform:translateY(-2px) scale(1.03);background:#c4502f}
.start-btn:active{transform:scale(.96)}
.menu-keys{margin-top:24px;font-size:11px;letter-spacing:3px;color:rgba(242,234,214,.42)}

.pane.........完整代码请登录后点击上方下载按钮下载查看