three实现三维小溪河流漂流避障游戏代码-html代码-BFW代码库

three实现三维小溪河流漂流避障游戏代码

代码语言：html

所属分类：游戏

代码描述：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">
    <title>山间漂流</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #CFEFFF;
            --fg: #163042;
            --muted: #5D7C8E;
            --accent: #FF6B35;
            --accent2: #FFB347;
            --card: rgba(255, 255, 255, 0.78);
            --border: rgba(80, 130, 170, 0.25);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: var(--bg);
            color: var(--fg);
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        canvas { display: block; }

        /* ===== HUD ===== */
        #hud {
            position: fixed; top: 0; left: 0; right: 0;
            padding: 20px 28px;
            display: none; justify-content: space-between; align-items: flex-start;
            pointer-events: none; z-index: 10;
        }
        .hud-panel {
            background: var(--card);
            border: 1px solid var(--border);
            backdrop-filter: blur(12px);
            border-radius: 14px;
            padding: 12px 22px;
        }
        .score-label {
            font-size: 11px; color: var(--muted);
            text-transform: uppercase; letter-spacing: 2.5px; font-weight: 500;
        }
        .score-value { font-size: 34px; font-weight: 900; color: var(--accent); line-height: 1.1; }
        .hearts { display: flex; gap: 5px; margin-top: 4px; }
        .heart { font-size: 22px; transition: all 0.3s ease; }
        .heart.on { color: #FF3D3D; text-shadow: 0 0 8px rgba(255,61,61,0.35); }
        .heart.off { color: #AFC3CF; }

        /* 进度条 */
        #progress-wrap {
            position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
            width: 280px; display: none; z-index: 10; text-align: center;
        }
        .prog-track {
            height: 5px; background: rgba(255,255,255,0.35);
            border-radius: 3px; overflow: hidden;
        }
        .prog-fill {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--accent), var(--accent2));
            border-radius: 3px; transition: width 0.15s;
        }
        .prog-label {
            font-size: 10px; color: var(--muted);
            margin-top: 5px; letter-spacing: 1.5px;
        }

        /* 速度 */
        #speed-box {
            position: fixed; bottom: 28px; left: 28px;
            display: none; z-index: 10;
        }
        #speed-val { font-size: 20px; font-weight: 700; color: #0D9E72; }

        /* ===== 开始界面 ===== */
        #start-screen {
            position: fixed; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center; z-index: 100;
            background:
                radial-gradient(ellipse at 50% 85%, rgba(135, 206, 250, 0.35) 0%, transparent 60%),
                linear-gradient(180deg, #DFF6FF 0%, #BEE8FF 50%, #EAF9FF 100%);
        }
        .title {
            font-size: 76px; font-weight: 900; line-height: 1;
            background: linear-gradient(135deg, #FF6B35 0%, #FFB347 50%, #FF6B35 100%);
            background-size: 200% 200%;
            animation: gradShift 3s ease infinite;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin-bottom: 12px;
        }
        @keyframes gradShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .subtitle {
            font-size: 16px; color: var(--muted); margin-bottom: 52px;
      .........完整代码请登录后点击上方下载按钮下载查看