代码语言：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,maximum-scale=1,user-scalable=no">
<title>峰回路转 · 螺旋山道竞速</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=Noto+Serif+SC:wght@600;900&family=Oxanium:wght@500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#f1ede4; --dim:#98a19c; --amber:#e2a84e; --danger:#e0563f;
  --panel:rgba(13,17,20,.55); --stroke:rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0e11}
body{font-family:'Noto Serif SC',serif;color:var(--ink)}
#app,#app canvas{position:fixed;inset:0;display:block}
.num{font-family:'Oxanium',monospace}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .8s}
body:not(.menu-mode) #hud{opacity:1}
.card{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--stroke);border-radius:10px}

#wxCard{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:11px;padding:10px 14px}
#wxIcon{width:30px;height:30px;color:var(--amber);display:flex}
#wxIcon svg{width:100%;height:100%}
#wxName{font-weight:900;font-size:16px;letter-spacing:.08em}
.gripBar{width:110px;height:4px;background:rgba(255,255,255,.12);border-radius:3px;margin:5px 0 3px;overflow:hidden}
#gripFill{display:block;height:100%;width:100%;background:#8fb573;border-radius:3px;transition:width .3s}
#gripTxt{font:500 10px 'Oxanium';letter-spacing:.14em;color:var(--dim)}

#rankCard{position:absolute;top:14px;right:14px;width:196px;padding:10px 12px}
#rankTitle{font:700 10px 'Oxanium';letter-spacing:.3em;color:var(--dim);margin-bottom:7px}
.rrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:3.5px 0;border-top:1px solid rgba(255,255,255,.05)}
.rrow .rp{font:700 12px 'Oxanium';color:var(--dim);width:12px}
.rrow i{width:9px;height:9px;border-radius:50%;flex:none}
.rrow .rn{flex:1;font-weight:600}
.rrow .rg{font:500 11px 'Oxanium';color:var(--dim)}
.rrow.me{color:var(--amber)} .rrow.me .rp,.rrow.me .rg{color:var(--amber)}

#progCard{position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:8px 14px 5px}
#progCard svg{display:block;max-width:76vw}
#progCard text{font-family:'Oxanium';font-size:9px;letter-spacing:.15em;fill:var(--dim)}

#speedCard{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  width:196px;padding:12px 14px 10px;text-align:center}
#pill{display:inline-flex;align-items:center;gap:8px;font:500 11px 'Oxanium';letter-spacing:.1em;
  color:var(--amber);border:1px solid rgba(226,168,78,.4);border-radius:20px;padding:3px 12px;margin-bottom:4px}
#pill.danger{color:var(--danger);border-color:rgba(224,86,63,.55);animation:pulse .5s infinite alternate}
@keyframes pulse{from{opacity:.65}to{opacity:1}}
#pillVal{font-weight:700}
#speedWrap{position:relative;height:74px}
#arcSvg{width:100%;height:100%}
#arcBg{fill:none;stroke:#252a2f;stroke-width:6;stroke-linecap:round}
#arcFill{fill:none;stroke:url(#ag);stroke-width:6;stroke-linecap:round;stroke-dasharray:157.1}
#speedNum{position:absolute;left:0;right:0;bottom:2px;font:700 36px 'Oxanium';line-height:1}
#speedUnit{position:absolute;left:0;right:0;bottom:-6px;font:500 9px 'Oxanium';letter-spacing:.35em;color:var(--dim)}
#skidLamp{position:absolute;top:34px;right:10px;font:700 10px 'Oxanium';letter-spacing:.12em;
  color:var(--danger);opacity:0;text-shadow:0 0 8px rgba(224,86,63,.6)}

#banner{position:absolute;top:23%;left:50%;transform:translate(-50%,-10px);opacity:0;
  transition:.4s;text-align:center;pointer-events:none}
#banner.show{opacity:1;transform:translate(-50%,0)}
#bIcon{display:inline-flex;width:30px;height:30px;color:var(--amber);margin-bottom:4px}
#bIcon svg{width:100%;height:100%}
#bTitle{font:900 30px 'Noto Serif SC';letter-spacing:.1em;text-shadow:0 2px 16px rgba(0,0,0,.55)}
#bSub{font:500 13px 'Oxanium';letter-spacing:.18em;color:var(--amber);margin-top:4px}

#countdown{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  font:900 120px 'Noto Serif SC';color:var(--ink);text-shadow:0 4px 30px rgba(0,0,0,.5);display:none}
#countdown.on{display:block;animation:pop .5s}
@keyframes pop{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
#countdown.go{color:var(--amber)}

#muteBtn{position:absolute;top:14px;right:222px;width:36px;height:36px;border-radius:50%;
  background:var(--panel);border:1px solid var(--stroke);color:var(--dim);cursor:pointer;
  pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:0}
#muteBtn svg{width:17px;height:17px}
#muteBtn:hover{color:var(--ink)}

/* ---------- 触控 ---------- */
#touchUI{position:absolute;left:0;right:0;bottom:110px;display:none;justify-content:space-between;
  padding:0 16px;pointer-events:none}
.tgrp{display:flex;gap:14px}
.tbtn{width:72px;height:72px;border-radius:50%;background:rgba(15,18,21,.5);border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;
  user-select:none;-webkit-user-select:none;color:var(--ink)}
.tbtn svg{width:26px;height:26px}
.tbtn.big{width:84px;height:84px}
.tbtn.on{background:rgba(226,168,78,.28);border-color:rgba(226,168,78,.6)}
@media (pointer:coarse){#touchUI{display:flex}#speedCard{bottom:14px}}
@media (max-width:820px){#progCard{display:none}#rankCard{width:158px}#muteBtn{right:184px}}

/* ---------- 主菜单 ---------- */
#menu{position:fixed;inset:0;display:flex;align-items:center;padding:0 6vw;
  background:linear-gradient(90deg,rgba(7,9,11,.78) 0%,rgba(7,9,11,.42) 46%,rgba(7,9,11,0) 75%);
  transition:opacity .7s;z-index:5}
#menu.hide{opacity:0;pointer-events:none}
.eyebrow{font:700 12px 'Oxanium';letter-spacing:.5em;color:var(--amber);margin-bottom:14px}
#menu h1{font:900 clamp(46px,7vw,84px)/1.1 'Noto Serif SC';letter-spacing:.14em;margin:0 0 18px}
.lede{max-width:490px;font-size:15px;line-height:1.95;color:#c9c6bd;margin:0 0 22px}
.wxnow{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:12px}
.wxnow svg{width:22px;height:22px;color:var(--amber)}
.wxrow{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.wxb{display:flex;align-items:center;gap:7px;font:500 12px 'Oxanium';color:var(--dim);
  border:1px solid var(--stroke);border-radius:20px;padding:5px 13px}
.wxb svg{width:15px;height:15px;color:var(--amber)}
.wxb b{color:var(--ink)}
.keys{display:grid;grid-template-columns:auto auto;gap:6px 26px;margin-bottom:26px;font-size:13px;color:var(--dim)}
.keys b{font-family:'Oxanium';color:var(--ink);font-weight:700;letter-spacing:.06em}
#startBtn{font:700 17px 'Oxanium';letter-spacing:.5em;text-indent:.5em;padding:15px 52px;
  background:var(--amber);color:#171410;border:0;border-radius:3px.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论