three做个三维高空跳伞游戏代码

代码语言:html

所属分类:其他

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

代码描述:三维跳伞游戏

代码标签: three 三维 高空 跳伞 游戏 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>凌空 · 三千米 — 第一人称跳伞</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root{ --amber:#ff9a3c; --ink:#e9edf1; --dim:#9aa5ae; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0b0e11;color:var(--ink);
  font-family:'Rajdhani','Noto Sans SC','Microsoft YaHei',sans-serif;user-select:none}
#scene{position:fixed;inset:0;display:block}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .7s;z-index:10}
#hud.on{opacity:1}
#hud b{font-weight:700}
.mono{font-variant-numeric:tabular-nums}

#compass{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:380px;height:46px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#compass-inner{position:relative;width:100%;height:100%}
.cmark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.85);display:none;line-height:1}
.cmark::before{content:'';display:block;width:1px;height:7px;margin:0 auto 3px;background:rgba(255,255,255,.4)}
.cmark.mid::before{height:10px;background:rgba(255,255,255,.7)}
.cmark.major{font-size:15px;color:#fff}
.cmark.major::before{height:13px;background:#fff}
.dzmark{position:absolute;left:50%;bottom:0;display:none;text-align:center;color:var(--amber);font-size:11px;font-weight:700;line-height:1}
.dzmark::before{content:'';display:block;width:7px;height:7px;margin:0 auto 3px;background:var(--amber);transform:rotate(45deg)}
#compass-cursor{position:absolute;left:50%;top:0;width:0;height:100%}
#compass-cursor::before{content:'';position:absolute;left:-5px;top:-2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #fff}

#dzinfo{position:absolute;top:22px;left:26px;font-size:14px;letter-spacing:.08em;color:var(--dim);line-height:1.9}
#dzinfo b{color:var(--ink);margin-left:8px;font-size:16px}

#altbar{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:8px;height:52vh;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.15)}
.ab-zone{position:absolute;left:0;width:100%;background:rgba(140,210,150,.4)}
.ab-aad{position:absolute;left:-5px;width:18px;height:2px;background:#ff5230}
#ab-cursor{position:absolute;left:-7px;width:22px;height:2px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7)}
#altnum{position:absolute;right:70px;transform:translateY(-50%);text-align:right;font-weight:700;font-size:34px;
  text-shadow:0 1px 8px rgba(0,0,0,.55);line-height:1}
#altnum small{display:block;font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.25em;margin-top:3px}

#speeds{position:absolute;left:26px;bottom:26px;font-size:14px;letter-spacing:.08em;color:var(--dim);line-height:1.9}
#speeds b{color:var(--ink);margin-left:10px;font-size:17px}

#tip{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);font-size:16px;letter-spacing:.2em;
  color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6);display:none;white-space:nowrap}
#tip.show{display:block}
#alert{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);font-size:42px;font-weight:700;
  color:#ff5230;letter-spacing:.35em;text-shadow:0 2px 14px rgba(0,0,0,.7);display:none;white-space:nowra.........完整代码请登录后点击上方下载按钮下载查看

网友评论0