代码语言：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, maximum-scale=1.0, user-scalable=no" />
<title>水上飞摩 · Water Moto Rush</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#0b1c2c;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    -webkit-user-select:none; user-select:none; touch-action:none; overscroll-behavior:none; }
  canvas { display:block; }
  #game { position:fixed; inset:0; }

  /* ---------- HUD ---------- */
  #hud { position:fixed; inset:0; pointer-events:none; z-index:10; color:#eef6ff; }
  .panel { background:rgba(6,18,30,.66); border:1px solid rgba(255,255,255,.14);
    border-radius:14px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

  #stat { position:absolute; top:14px; left:14px; padding:10px 16px; min-width:160px; }
  #stat .score { font-size:30px; font-weight:800; line-height:1.05; letter-spacing:1px; }
  #stat .row { font-size:12.5px; opacity:.85; margin-top:3px; display:flex; justify-content:space-between; gap:14px; }
  #stat .row b { font-weight:700; }

  #speedBox { position:absolute; left:14px; bottom:14px; padding:10px 18px 14px; min-width:200px; }
  #speedNum { font-size:52px; font-weight:800; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums; }
  #speedNum.low { color:#ff5d5d; text-shadow:0 0 18px rgba(255,60,60,.55); }
  #speedNum .unit { font-size:15px; font-weight:600; opacity:.75; margin-left:5px; letter-spacing:0; }
  #speedBar { position:relative; height:7px; border-radius:4px; background:rgba(255,255,255,.14); margin-top:10px; }
  #speedFill { height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,#38e08c,#ffd45e,#ff5d5d); transition:width .12s linear; }
  #tick60 { position:absolute; left:30%; top:-3px; width:2px; height:13px; background:#ff5d5d; border-radius:1px; }
  #tickLabel { position:absolute; left:30%; top:15px; transform:translateX(-50%); font-size:10px; color:#ff8b8b; }

  #warn { position:absolute; top:16px; left:50%; transform:translateX(-50%); padding:9px 22px; border-radius:999px;
    background:rgba(255,58,58,.16); border:1px solid rgba(255,110,110,.6); color:#ffb0b0;
    font-weight:700; font-size:15px; letter-spacing:1px; display:none; animation:blink .5s steps(2) infinite; white-space:nowrap; }
  @keyframes blink { 50% { opacity:.35; } }

  #sinkWrap { position:absolute; top:64px; left:50%; transform:translateX(-50%); width:240px; display:none; }
  #sinkWrap .label { text-align:center; font-size:11.5px; letter-spacing:2px; color:#9fd0ff; margin-bottom:5px; }
  #sinkBar { height:9px; border-radius:5px; background:rgba(255,255,255,.13); border:1px solid rgba(160,210,255,.25); overflow:hidden; }
  #sinkFill { height:100%; width:0%; background:linear-gradient(90deg,#2f7fd4,#5fd0ff); transition:width .1s linear; }

  #hint { position:absolute; right:14px; bottom:14px; padding:9px 14px; font-size:12.5px; line-height:1.9; opacity:.92; text-align:right; }
  #hint b { color:#ffd27f; font-weight:700; }
  #muteTag { position:absolute; top:14px; right:14px; padding:6px 12px; font-size:12px; opacity:.85; }

  #countdown { position:absolute; top:50%; left:50%; transform:translate(-50%,-56%); font-size:130px; font-weight:900;
    color:#fff; text-shadow:0 0 34px rgba(255,190,110,.85), 0 4px 22px rgba(0,0,0,.45); display:none; }
  #countdown.pop { animation:pop .62s ease-out; }
  @keyframes pop { 0% { transform:translate(-50%,-56%) scale(1.7); opacity:0; } 22% { opacity:1; }
    100% { transform:translate(-50%,-56%) scale(.92); opacity:.92; } }

  .float { position:absolute; transform:translate(-50%,-50%); font-weight:800; font-size:19px;
    text-shadow:0 2px 10px rgba(0,0,0,.6); animation:floatUp .95s ease-out forwards; white-space:nowrap; }
  @keyframes floatUp { to { transform:translate(-50%,-190%); opacity:0; } }

  /* ---------- 全屏特效层 ---------- */
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:6;
    background:radial-gradient(ellipse at center, transparent 58%, rgba(2,10,20,.5) 100%); }
  #underwater { position:fixed; inset:0; pointer-events:none; z-index:7; opacity:0;
    background:linear-gradient(180deg, rgba(16,7.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论