three实现三维低洼路面卡丁车比赛游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由minimax-m3.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>越野卡丁车 · 坑洼拉力赛</title>
<style>
  :root{
    --acc:#ff7a18; --acc2:#ffd166; --bad:#ff4d5e; --good:#5ce08a;
    --panel:rgba(10,14,20,.58); --stroke:rgba(255,255,255,.14);
    --txt:#e9eef6; --dim:#9fb0c4;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;background:#080b10;color:var(--txt);
    font-family:"HarmonyOS Sans SC","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
    user-select:none;-webkit-user-select:none}
  #app{position:fixed;inset:0}
  canvas{display:block}
  .mono{font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:5}
  .panel{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;
    backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
    box-shadow:0 8px 30px rgba(0,0,0,.35)}

  #mmWrap{position:absolute;left:16px;top:16px;padding:8px;border-radius:18px}
  #minimap{display:block;width:180px;height:180px;border-radius:12px;background:rgba(0,0,0,.28)}
  #mmTitle{position:absolute;left:14px;top:22px;font-size:11px;letter-spacing:.18em;color:var(--dim);font-weight:700}

  #stats{position:absolute;right:16px;top:16px;padding:12px 14px;min-width:190px;display:flex;flex-direction:column;gap:9px}
  .stat{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  .stat .k{font-size:11px;color:var(--dim);letter-spacing:.12em;font-weight:600}
  .stat .v{font-size:17px;font-weight:800;letter-spacing:.02em}
  .stat .v.hot{color:var(--acc2)} .stat .v.good{color:var(--good)}
  .rowline{height:1px;background:var(--stroke);margin:1px 0}

  #tachoWrap{position:absolute;left:18px;bottom:18px;width:210px;height:210px;padding:0;
    border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(14,20,28,.72),rgba(8,11,16,.42) 70%,transparent 72%);
    border:none;box-shadow:none}
  #tacho{width:210px;height:210px;display:block;overflow:visible}
  #spdTxt{fill:#fff;font-size:46px;font-weight:800;text-anchor:middle;font-family:ui-monospace,Menlo,monospace}
  #spdUnit{fill:var(--dim);font-size:12px;text-anchor:middle;letter-spacing:.24em}
  #gearTxt{fill:var(--acc2);font-size:26px;font-weight:900;text-anchor:middle;font-family:ui-monospace,Menlo,monospace}
  #gearLab{fill:var(--dim);font-size:9px;text-anchor:middle;letter-spacing:.3em}

  #msg{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;
    font-size:clamp(28px,6.5vw,74px);font-weight:900;letter-spacing:.06em;opacity:0;transition:opacity .2s;
    text-shadow:0 6px 40px rgba(0,0,0,.7);white-space:nowrap}
  #submsg{position:absolute;left:50%;top:calc(16% + clamp(34px,8vw,90px));transform:translateX(-50%);
    text-align:center;font-size:clamp(13px,2.2vw,20px);font-weight:700;color:var(--acc2);opacity:0;
    transition:opacity .2s;text-shadow:0 3px 16px rgba(0,0,0,.8);letter-spacing:.12em;white-space:nowrap}

  #lapFlash{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.85);opacity:0;
    font-size:clamp(22px,5vw,54px);font-weight:900;color:var(--acc);text-shadow:0 0 40px rgba(255,122,24,.55);
    transition:none;letter-spacing:.08em;white-space:nowrap}
  #lapFlash.pop{animation:pop .95s ease-out}
  @keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
    70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}

  #hint{position:absolute;right:16px;bottom:18px;padding:10px 14px;font-size:12px;line-height:1.75;color:var(--dim);
    text-align:right;font-weight:600}
  #hint b{color:var(--txt);background:rgba(255,255,255,.09);border-radius:5px;padding:1px 6px;margin:0 2px;font-weight:700}

  /* ---------- 菜单 / 结算 ---------- */
  .screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 40%,rgba(18,26,38,.72),rgba(4,6,10,.94));
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overflow-y:auto;padding:18px 14px}
  .screen.hide{display:none}
  .card{width:min(560px,92vw);margin:auto;padding:30px 32px 26px;border-radius:22px;
    background:linear-gradient(180deg,rgba(20,27,38,.94),rgba(10,14,20,.96));
    border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .title{font-size:clamp(26px,5.4vw,42px);font-weight:900;letter-spacing:.02em;line-height:1.1;
    background:linear-gradient(92deg,#fff 20%,var(--acc) 62%,var(--acc2));-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .sub{margin-top:8px;color:var(--dim);font-size:13.5px;line-height:1.7;font-weight:600}
  .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:8px;margin:18px 0 4px}
  .keys div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;
    padding:8px 10px;font-size:12px;color:var(--dim);font-weight:600}
  .keys div b{display:block;color:#fff;font-size:13px;margin-bottom:3px;letter-spacing:.04em}
  .opts{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px;align-items:center}
  .optlabel{font-size:11px;letter-spacing:.16em;color:var(--dim);font-weight:800}
  .seg{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:11px;padding:3px;gap:3px}
  .seg button{background:transparent;border:0;color:var(--dim);font:inherit;font-weight:700;font-size:13px;
    padding:7px 14px;border-radius:8px;cursor:pointer;transition:.15s}
  .seg button.on{background:var(--acc);color:#170c02;box-shadow:0 3px 14px rgba(255,122,24,.4)}
  .seg button:hover:not(.on){color:#fff}
  .swatches{display:flex;gap:9px}
  .sw{width:34px;height:34px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:.15s;
    box-shadow:inset 0 -8px 14px rgba(0,0,0,.35)}
  .sw.on{border-color:#fff;transform:translateY(-2px)}
  .cta{margin-top:22px;width:100%;padding:16px;border:0;border-radius:14px;cursor:pointer;
    background:linear-gradient(96deg,var(--acc),#ff4f2a);color:#1a0b02;font:inherit;font-size:17px;font-weight:900;
    letter-spacing:.1em;box-shadow:0 12px 34px rgba(255,90,20,.32);transition:.15s}
  .cta:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(255,90,20,.45)}
  .cta:active{transform:translateY(0)}
  .ghost{margin-top:10px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--stroke);
    background:rgba(255,255,255,.05);color:var(--txt);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
  .ghost:hover{background:rgba(255,255,255,.11)}
  table.res{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
  table.res td{padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  table.res td.r{text-align:right;font-weight:800}
  table.res tr.me td{color:var(--acc2)}
  .tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;background:rgba(255,255,255,.1)}

  /* ---------- 触屏 ---------- */
  #touch{position:fixed;inset:auto 0 0 0;height:180px;z-index:8;display:none;pointer-events:none}
  @media (pointer:coarse){ #touch{display:block} #hint{display:none} }
  .tbtn{position:absolute;bottom:22px;width:78px;height:78px;border-radius:50%;pointer-events:auto;
    background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;user-select:none}
  .tbtn:active{background:rgba(255,122,24,.55)}
  #tL{left:22px}#tR{left:112px}#tGas{right:22px}#tBrk{right:112px}
  #tHand{position:absolute;bottom:112px;right:22px;width:64px;height:64px;font-size:13px;letter-spacing:.08em}

  #loading{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:16px;background:#080b10;color:var(--dim);font-size:13px;letter-spacing:.2em;font-weight:700}
  .spin{width:38px;height:38px;border:3px solid rgba(255,255,255,.14);border-top-color:var(--acc);
    border-radius:50%;animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  #err{color:var(--bad);max-width:min(520px,86vw);text-align:center;line-height:1.8;letter-spacing:.02em;font-size:13px}

  /* 矮屏(手机横屏等)自适应 */
  @media (max-height:560px){
    #tachoWrap{width:148px;height:148px}
    #tacho{width:148px;height:148px}
    #spdTxt{font-size:34px} #spdUnit{font-size:9px} #gearTxt{font-size:19px}
    #mmWrap{transform:scale(.62);transform-origin:top left}
    #stats{padding:8px 11px;min-width:150px;gap:5px}
    .stat .v{font-size:13px} .stat .k{font-size:9px}
    #hint{display:none}
    .card{padding:20px 22px 18px}
    .keys{display:none}
    .title{font-size:clamp(20px,4vw,30px)}
    .sub{font-size:11.5px;margin-top:5px}
    .opts{margin:10px 0 4px}
    .cta{margin-top:14px;padding:12px;font-size:15px}
  }
  @media (max-height:430px){ #mmWrap{display:none} }
</style>
</head>
<body>

<div id="app"></div>

<div id="hud">
  <div id="mmWrap" class="panel"><c.........完整代码请登录后点击上方下载按钮下载查看