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

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

代码语言：html

所属分类：其他

代码由deepseek-4.1-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,viewport-fit=cover">
<title>玉兔奔月 · 中秋 3D 跑酷</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #04060f;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  canvas { display: block; touch-action: none; }

  #ui {
    position: fixed; inset: 0;
    pointer-events: none;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
  }

  /* ---------- 顶部 ---------- */
  .title {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(17px, 4.4vw, 28px);
    font-weight: 700;
    letter-spacing: .32em;
    text-indent: .32em;
    color: #ffe8b4;
    text-shadow: 0 0 18px rgba(255,185,70,.9), 0 0 42px rgba(255,140,0,.45);
    white-space: nowrap;
  }
  .score {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 16px;
    font-size: clamp(14px, 3.5vw, 20px);
    font-weight: 600;
    color: #ffd98d;
    text-shadow: 0 0 14px rgba(255,170,60,.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ---------- 底部提示 ---------- */
  .hint {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 2.7vw, 13px);
    color: rgba(190,208,255,.6);
    text-shadow: 0 0 10px rgba(0,0,0,.8);
    white-space: nowrap;
    letter-spacing: .06em;
  }

  /* ---------- 遮罩层 ---------- */
  .overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    pointer-events: none;
    background: radial-gradient(circle at 50% 44%, rgba(26,38,84,.55), rgba(3,5,14,.86) 75%);
    animation: fadeIn .35s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .overlay h1 {
    font-size: clamp(30px, 9.5vw, 60px);
    letter-spacing: .28em; text-indent: .28em;
    color: #ffe8b4;
    text-shadow: 0 0 30px rgba(255,185,70,.95), 0 0 70px rgba(255,120,0,.5);
  }
  .overlay h2 {
    font-size: clamp(22px, 6.5vw, 38px);
    letter-spacing: .18em; text-indent: .18em;
    color: #ffdca0;
    text-shadow: 0 0 24px rgba(255,150,40,.8);
  }
  .overlay p {
    font-size: clamp(12px, 3.4vw, 16px);
    color: rgba(195,212,255,.72);
    letter-spacing: .1em;
  }
  .overlay .big {
    font-size: clamp(42px, 14vw, 84px);
    font-weight: 800;
    line-height: 1.05;
    color: #ffd06a;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 28px rgba(255,160,40,.95), 0 0 70px rgba(255,110,0,.5);
  }
  .overlay button {
    pointer-events: auto;
    margin-top: 14px;
    padding: 13px 42px;
    font-family: inherit;
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 700;
    letter-spacing: .26em; text-indent: .26em;
    color: #2c1a04;
    background: linear-gradient(180deg, #ffe.........完整代码请登录后点击上方下载按钮下载查看