代码语言：html

所属分类：其他

代码由minimax-m3.1-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, maximum-scale=1.0, user-scalable=no" />
<title>水上飞车 3D · Water Rider</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#08131f; touch-action:none;
    font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:#eaf4ff; }
  #app { position:fixed; inset:0; }
  canvas { display:block; width:100%; height:100%; }

  /* ---------- HUD ---------- */
  .hud { position:absolute; inset:0; pointer-events:none; user-select:none; transition:opacity .35s; }
  .hud.dim { opacity:0; }
  .panel { position:absolute; background:rgba(8,20,34,.42); border:1px solid rgba(160,215,255,.22);
    border-radius:14px; padding:10px 14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

  #speedBox { left:18px; top:18px; min-width:186px; }
  #speedBox .lbl { font-size:11px; letter-spacing:3px; color:#8fb6d6; }
  #speedVal { font-size:56px; font-weight:800; line-height:.95; font-variant-numeric:tabular-nums;
    text-shadow:0 0 22px rgba(90,210,255,.35); transition:color .2s; }
  #speedVal small { font-size:14px; font-weight:600; color:#8fb6d6; margin-left:4px; }
  #speedVal.danger { color:#ff5a5a; animation:pulse .45s infinite alternate; }
  @keyframes pulse { from{ opacity:.55 } to{ opacity:1 } }
  #speedBar { position:relative; height:7px; margin-top:9px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; }
  #speedFill { height:100%; width:0%; background:linear-gradient(90deg,#26c6ff,#7ef2c0); border-radius:5px; transition:width .08s linear, background .2s; }
  #speedFill.low { background:linear-gradient(90deg,#ff4d4d,#ff9b3d); }
  #thresh { position:absolute; top:-3px; bottom:-3px; width:2px; background:#ffd166; box-shadow:0 0 6px #ffd166; }
  #threshLbl { position:absolute; left:0; right:0; bottom:-17px; text-align:center; font-size:10px; color:#ffd166; letter-spacing:1px; }

  #statBox { right:18px; top:18px; text-align:right; min-width:160px; }
  #statBox .row { display:flex; justify-content:space-between; gap:18px; font-size:13px; margin:3px 0; }
  #statBox .row span:first-child { color:#8fb6d6; letter-spacing:1px; }
  #statBox .row span:last-child { font-weight:700; font-variant-numeric:tabular-nums; }
  #hearts { margin-top:8px; font-size:18px; letter-spacing:3px; text-align:right; }

  #boostBox { position:absolute; left:50%; transform:translateX(-50%); bottom:22px; width:min(360px,62vw); text-align:center; }
  #boostBox .lbl { font-size:10px; letter-spacing:4px; color:#8fb6d6; margin-bottom:6px; }
  #boostBar { height:11px; border-radius:7px; background:rgba(255,255,255,.12); overflow:hidden; border:1px solid rgba(160,215,255,.2); }
  #boostFill { height:100%; width:100%; background:linear-gradient(90deg,#ff9f43,#ffd166); border-radius:7px; }
  #boostBox.ready #boostFill { background:linear-gradient(90deg,#38f9d7,#7ef2c0); box-shadow:0 0 16px rgba(120,255,220,.65); }

  #sinkBox { position:absolute; left:50%; transform:translateX(-50%); bottom:74px; width:min(360px,62vw); text-align:center;
    opacity:0; transition:opacity .25s; }
  #sinkBox.show { opacity:1; }
  #sinkBox .lbl { font-size:11px; letter-spacing:3px; color:#ff8b8b; margin-bottom:6px; }
  #sinkBar { height:13px; border-radius:8px; background:rgba(255,255,255,.12); overflow:hidden; border:1px solid rgba(255,120,120,.35); }
  #sinkFill { height:100%; width:0%; background:linear-gradient(90deg,#2f7bff,#00e0ff); border-radius:8px; transition:width .1s linear; }

  #warn { position:absolute; left:50%; top:24%; transform:translateX(-50%); font-size:30px; font-weight:800;
    letter-spacing:4px; color:#ff5a5a; text-shadow:0 0 26px rgba(255,60,60,.85); opacity:0; transition:opacity .15s; white-space:nowrap; }
  #warn.show { opacity:1; animation:pulse .4s infinite alternate; }
  #toast { position:absolute; left:50%; top:38%; transform:translateX(-50%); font-size:26px; font-weight:800;
    letter-spacing:3px; color:#ffe27a; text-shadow:0 0 22px rgba(255,220,90,.8); opacity:0; transition:opacity .3s; }
  #toast.show { opacity:1; }

  /* ---------- overlays ---------- */
  .screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 42%, rgba(6,24,46,.38), rgba(2,7,15,.82)); backdrop-filter:blur(3px); }
  .screen.hide { display:none; }
  .card { text-align:center; max-width:min(560px,90vw); padding:34px 40px; }
  .title { font-size:52px; font-weight:900; letter-spacing:8px; margin-bottom:4px;
    background:linear-gradient(180deg,#ffffff,#5fd2ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .subtitle { color:#8fc3e8; letter-spacing:4px; font-size:13px; margin-bottom:22px; }
  .desc { font-size:14.5px; line-height:2; color:#dcecf9; margin-bottom:24px; text-shadow:0 2px 14px rgba(0,8,20,.85); }
  .desc b { color:#ffd166; }
  .desc .c { color:#ff6b6b; }
  .keys { display:flex; flex-wrap:w.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论