three实现三维水上摩托车驾驶游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由gpt-6 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>水上摩托 · 极速穿行</title>
<style>
  :root { --cyan:#73f1ff; --blue:#1599d3; --glass:rgba(5,19,35,.58); --line:rgba(132,229,255,.34); }
  * { box-sizing:border-box; }
  html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#071b31; color:#f3fbff; font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; }
  canvas { display:block; width:100%; height:100%; }
  #game { position:fixed; inset:0; }
  #hud { position:fixed; inset:0; pointer-events:none; z-index:3; }
  .panel { background:linear-gradient(145deg,rgba(8,28,49,.76),rgba(6,19,36,.46)); border:1px solid var(--line); box-shadow:0 8px 30px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(10px); border-radius:16px; }
  #topbar { position:absolute; top:18px; left:18px; right:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .brand { padding:12px 16px; min-width:190px; }
  .brand .eyebrow { font-size:10px; letter-spacing:3px; color:#8feafa; font-weight:800; }
  .brand .name { font-size:19px; font-weight:900; letter-spacing:1px; margin-top:3px; }
  .brand .sub { color:#a9cadc; font-size:11px; margin-top:2px; }
  .stats { display:flex; gap:10px; }
  .stat { min-width:112px; padding:10px 14px; }
  .stat .label { color:#a4c8db; font-size:10px; letter-spacing:1.5px; }
  .stat .value { margin-top:2px; font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; }
  .stat .unit { font-size:10px; color:#94bed3; font-weight:600; margin-left:4px; }
  #speedValue { color:var(--cyan); }
  #statusPill { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:99px; border:1px solid rgba(109,241,255,.35); background:rgba(47,180,214,.13); color:#a9f7ff; font-size:10px; font-weight:800; margin-top:5px; }
  #statusDot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#72f5ff; box-shadow:0 0 9px #72f5ff; }
  #leftRail { position:absolute; left:18px; top:145px; width:185px; padding:14px; }
  .railTitle { font-size:10px; letter-spacing:2px; color:#a8d4e7; font-weight:800; margin-bottom:10px; }
  .meterRow { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#bbd5e3; margin:10px 0 6px; }
  .bar { height:6px; border-radius:99px; background:rgba(170,220,240,.15); overflow:hidden; }
  .bar > i { display:block; height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,#38b6f7,#7ff9ff); transition:width .12s,background .12s; }
  #sinkFill { background:linear-gradient(90deg,#ffe06f,#ff654f); width:0%; }
  #mission { position:absolute; right:18px; top:145px; width:205px; padding:14px 15px; }
  #mission .headline { font-size:12px; font-weight:900; margin-bottom:5px; }
  #mission p { color:#a9cbdc; font-size:11px; line-height:1.65; margin:0; }
  .key { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; border:1px solid rgba(172,231,255,.38); border-bottom-width:2px; border-radius:5px; background:rgba(255,255,255,.07); color:#e5fbff; font-size:10px; font-weight:800; padding:0 5px; }
  #bottomInfo { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; white-space:nowrap; color:rgba(227,247,255,.83); font-size:11px; text-shadow:0 2px 4px #00203a; }
  #bottomInfo .separator { width:3px; height:3px; border-radius:50%; background:#8cf0ff; opacity:.8; }
  #toast { position:absolute; left:50%; top:25%; transform:translate(-50%,-10px); opacity:0; padding:12px 20px; background:rgba(5,25,42,.82); border:1px.........完整代码请登录后点击上方下载按钮下载查看