three实现三维热气球飞行挑战游戏代码-html代码-BFW代码库

代码语言：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>热气球环游记 · SKY DRIFTER</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@400;700;800;900&family=ZCOOL+Kuile&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0d2b33; --panel:#0f333d; --panel2:#0a222b; --line:#245462;
  --amber:#ffb703; --gold:#ffd166; --sky:#8ecae6; --red:#ef476f; --green:#06d6a0;
  --display:'Lilita One','ZCOOL Kuile',system-ui,sans-serif;
  --body:'Nunito','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#79b8dd;font-family:var(--body);color:#eaf6f9}
#scene-holder{position:fixed;inset:0}
#scene-holder canvas{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(6,20,28,.38) 100%)}
.hidden{display:none!important}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.panel{background:linear-gradient(180deg,#123844ee,#0b2731f2);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 8px 22px rgba(3,15,20,.4)}
#hud-left{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:8px}
.score-panel{padding:10px 18px 12px}
.hud-label{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#7fb6c4;text-transform:uppercase}
#scoreVal{font-family:var(--display);font-size:42px;line-height:1;color:var(--gold);
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bump{animation:bump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{40%{transform:scale(1.22) rotate(-2deg)}}
.ring-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;
  background:rgba(8,25,32,.82);border:1px solid var(--line);font-weight:800;font-size:14px}
.ring-pill .ico{color:var(--gold);font-size:16px;animation:spinSlow 6s linear infinite;display:inline-block}
@keyframes spinSlow{to{transform:rotate(360deg)}}
#hud-right{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.timer-panel{padding:8px 16px;display:flex;align-items:center;gap:10px}
#timerVal{font-family:var(--display);font-size:24px;color:#dff3f7;letter-spacing:1px}
.nav-panel{padding:10px 16px;display:flex;align-items:center;gap:12px}
.nav-arrow{width:26px;height:26px;background:var(--gold);flex:none;
  clip-path:polygon(50% 0,100% 80%,50% 62%,0 80%);transition:transform .15s linear;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.nav-txt b{display:block;font-size:16px;color:var(--gold)}
.nav-txt span{font-size:11px;color:#8fbac6}
.wind-panel{padding:8px 14px;display:flex;align-items:center;gap:10px;font-size:12px;color:#9fc6d0}
.wind-arrow{width:16px;height:16px;background:#7fd1e8;clip-path:polygon(50% 0,100% 80%,50% 62%,0 80%);
  transition:transform .3s;flex:none}
.view-tag{position:absolute;right:16px;bottom:18px;padding:9px 16px;display:flex;align-items:center;
  gap:10px;font-weight:800;font-size:14px;color:#dff3f7}
.view-tag kbd{font-size:11px}

#toasts{position:absolute;top:84px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:90vw}
.toast{background:#0e2f38e8;border:1px solid var(--line);border-left:4px solid var(--amber);
  padding:8px 20px;border-radius:10px;font-weight:800;font-size:15px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(2,12,18,.45);
  animation:toastIn .35s cubic-bezier(.2,1.5,.4,1),toastOut .4s ease 1.9s forwards}
.toast.good{border-left-color:var(--green)} .toast.bad{border-left-color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.9)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

#dash{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  display:flex;gap:22px;align-items:flex-end;padding:14px 26px 10px;
  background:linear-gradient(180deg,#113641f0,#081d25f8);
  border:1px solid var(--line);border-bottom:none;border-radius:18px 18px 0 0;
  box-shadow:0 -10px 34px rgba(2,12,18,.45)}
.gauge{width:96px;text-align:center}
.dial{position:relative;width:88px;height:88px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#174552,#081c23 72%);
  border:2px solid var(--line);box-shadow:inset 0 4px 14px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.35)}
.dial::before{content:'';position:absolute;inset:5px;border-radius:50%;opacity:.85;
  background:repeating-conic-gradient(from 150deg,#9ed6e0 0deg 1.6deg,transparent 1.6deg 20deg);
  -webkit-mask:radial-gradient(closest-side,transparent 72%,#000 73%);
  mask:radial-gradient(closest-side,transparent 72%,#000 73%)}
.dial::after{content:'';position:absolute;inset:5px;border-radius:50%;opacity:.55;
  background:conic-gradient(from 150deg,var(--green) 0 100deg,var(--amber) 100deg 175deg,var(--red) 175deg 240deg,transparent 240deg);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 85%);
  mask:radial-gradient(closest-side,transparent 84%,#000 85%)}
.needle{position:absolute;bottom:50%;left:calc(50% - 2px);width:4px;height:33px;border-radius:3px;
  background:linear-gradient(#fff2c9,var(--amber));transform-origin:50% 100%;
  transform:rotate(-120deg);transition:transform .12s linear;
  box-shadow:0 0 8px rgba(255,183,3,.7)}
.hub{position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:#0a2129;border:2px solid var(--amber)}
.gauge .val{font-weight:900;font-size:15px;margin-top:5px;color:#dff3f7}
.g.........完整代码请登录后点击上方下载按钮下载查看