js+css实现小船河流行驶避障类游戏代码-html代码-BFW代码库

js+css实现小船河流行驶避障类游戏代码

代码语言：html

所属分类：游戏

代码描述：js+css实现小船河流行驶避障类游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>激流勇进 - 河流驾驶游戏</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+SC:wght@300;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a1628;
      --fg: #e8edf5;
      --accent: #f59e0b;
      --accent2: #06d6a0;
      --card: rgba(10, 22, 40, 0.85);
      --border: rgba(245, 158, 11, 0.3);
      --danger: #ef4444;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      overflow: hidden;
      font-family: 'Noto Sans SC', sans-serif;
      color: var(--fg);
    }
    canvas { display: block; width: 100vw; height: 100vh; }

    .hud {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 10; pointer-events: none;
      padding: 16px 24px;
      display: flex; justify-content: space-between; align-items: flex-start;
    }
    .hud-block {
      background: var(--card);
      backdrop-filter: blur(14px);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 18px; min-width: 100px; text-align: center;
    }
    .hud-label {
      font-size: 0.65rem; letter-spacing: 0.15em;
      text-transform: uppercase; color: rgba(232,237,245,0.5); margin-bottom: 2px;
    }
    .hud-value {
      font-family: 'Orbitron', monospace; font-weight: 700;
      font-size: 1.4rem; color: var(--accent);
    }
    .hud-lives { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
    .life-pip {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--danger);
      box-shadow: 0 0 8px rgba(239,68,68,0.6);
      transition: opacity 0.3s, transform 0.3s;
    }
    .life-pip.lost { opacity: 0.15; transform: scale(0.7); box-shadow: none; }

    .speed-bar-wrap {
      position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
      width: 10px; height: 180px;
      background: rgba(255,255,255,0.08); border-radius: 10px;
      z-index: 10; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .speed-bar-fill {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: linear-gradient(to top, var(--accent2), var(--accent));
      border-radius: 10px; transition: height 0.3s ease;
    }

    .overlay {
      position: fixed; inset: 0; z-index: 50;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: rgba(6,12,24,0.88);
      backdrop-filter: blur(16px);
      transition: opacity 0.4s ease;
    }
    .overlay.hidden { opacity: 0; pointer-events: none; }
    .overlay-title {
      font-family: 'Orbitron', monospace; font-weight: 900;
      font-size: clamp(2rem, 6vw, 3.8rem); letter-spacing: 0.04em;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; margin-bottom: 12px;
    }
    .overlay-sub {
      font-size: clamp(0.85rem, 2vw, 1.1rem);
      color: rgba(232,237,245,0.6);
      margin-bottom: 32px; tex.........完整代码请登录后点击上方下载按钮下载查看