代码语言：html

所属分类：其他

代码由deepseek-4.1 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, viewport-fit=cover">
<title>穿云者 · CLOUDRUNNER</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#03080f;color:#e8f4ff;
  font-family:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;}
canvas#gl{position:fixed;inset:0;display:block;width:100%;height:100%;}
.hidden{display:none !important;}

/* ───── 通用玻璃面板 ───── */
.panel{
  background:linear-gradient(170deg,rgba(12,30,48,.60),rgba(5,14,26,.44));
  border:1px solid rgba(127,230,255,.20);
  border-radius:10px;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 6px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ───── HUD ───── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:.4px;}
#hud .lbl{color:#8fc6e8;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:.85;}
#hud .val{color:#eaf7ff;font-weight:600;}

#hud-bl{position:absolute;left:18px;bottom:18px;padding:10px 14px;min-width:168px;}
#hud-br{position:absolute;right:18px;bottom:18px;padding:10px 14px;min-width:158px;text-align:right;}
#hud-tr{position:absolute;right:18px;top:74px;padding:10px 14px;min-width:150px;text-align:right;line-height:1.75;}

.bar{height:6px;border-radius:3px;background:rgba(120,200,255,.14);overflow:hidden;margin-top:5px;
  border:1px solid rgba(127,230,255,.13);}
.bar .fill{height:100%;width:0%;border-radius:3px;transition:width .09s linear;}
#thrFill{background:linear-gradient(90deg,#3fb6ff,#8ff0ff);}
#boostFill{background:linear-gradient(90deg,#ffb454,#ffe9a8);}

#hud-tc{position:absolute;left:50%;top:12px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;}
#timerWrap{padding:6px 22px;font-size:22px;font-weight:700;letter-spacing:2px;color:#fff;
  text-shadow:0 0 18px rgba(127,230,255,.6);}
#timerWrap.warn{color:#ff5a5a;text-shadow:0 0 20px rgba(255,60,60,.85);animation:blink .6s infinite;}
@keyframes blink{50%{opacity:.35;}}
#ringProg{font-size:12px;letter-spacing:2px;color:#9fe0ff;padding:3px 16px;}

#compassWrap{width:320px;height:34px;overflow:hidden;position:relative;border-radius:8px;
  background:linear-gradient(180deg,rgba(8,22,38,.62),rgba(5,14,26,.40));
  border:1px solid rgba(127,230,255,.18);}
#compassStrip{position:absolute;top:0;left:0;height:100%;will-change:transform;}
#compassWrap::before{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;
  margin-left:-1px;background:linear-gradient(180deg,#ffb454,#ff8c1a);z-index:3;
  box-shadow:0 0 10px rgba(255,170,70,.9);}
.cmk{position:absolute;top:8px;width:1px;height:8px;background:rgba(150,215,255,.42);}
.cmk.maj{height:15px;top:6px;background:rgba(180,235,255,.85);width:1.5px;}
.cmkLbl{position:absolute;top:2px;font-size:9px;color:#a8d8f5;transform:translateX(-50%);letter-spacing:0;}

#adi{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:132px;height:132px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(127,230,255,.30);
  box-shadow:0 0 24px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.6);
  background:#0a1a2a;}
#adiInner{position:absolute;left:-60px;top:50%;width:252px;height:252px;margin-top:-126px;
  will-change:transform;}
#adiSky{position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,#1b5a8f,#408bcb);}
#adiGnd{position:absolute;inset:50% 0 0 0;background:linear-gradient(180deg,#664929,#2f1f0e);}
#adiLine{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:#ffdc8a;
  box-shadow:0 0 8px rgba(255,220,138,.9);}
#adiCross{position:absolute;inset:0;pointer-events:none;}
#adiCross::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:2px;margin:-1px 0 0 -27px;
  background:#ffb454;box-shadow:0 0 8px rgba(255,180,84,.9);}
#adiCross::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:9px;margin:-10px 0 0 -1px;
  background:#ffb454;}
#adiRoll{position:absolute;inset:0;pointer-events:none;}
#adiRoll i{position:absolute;left:50%;top:6px;width:2px;height:10px;background:rgba(255,255,255,.75);
  transform-origin:50% 60px;margin-left:-1px;}

#warn{position:absolute;left:50%;top:46%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:6px;align-items:center;font-weight:800;letter-spacing:3px;font-size:15px;}
.wtag{padding:4px 16px;border-radius:6px;border:1.5px solid;animation:blink .55s infinite;
  text-shadow:0 0 12px currentColor;backdrop-filter:blur(4px);}
.wtag.red{color:#ff5252;border-color:#ff5252;background:rgba(255,40,40,.13);}
.wtag.amber{color:#ffc247;border-color:#ffc247;background:rgba(255,190,60,.13);}

#combo{position:absolute;left:50%;top:34%;transform:translateX(-50%);font-size:34px;font-weight:900;
  color:#ffd66b;text-shadow:0 0 26px rgba(255,190,60,.95),0 3px 0 rgba(0,0,0,.4);pointer-events:none;
  opacity:0;transition:opacity .25s;}
#flash{position:fixed;inset:0;pointer-events:none;z-index:9;background:#fff;opacity:0;}
/* ↓ 压暗穿云遮罩，避免完全死白，加入灰蓝色调 */
#cloudVeil{position:fixed;inset:0;pointer-events:none;z-index:8;
  background:radial-gradient(circle at 50% 45%, rgba(200,220,240,.85), rgba(150,180,210,.7) 60%, rgba(100,140,180,.5));
  opacity:0;transition:opacity .15s linear;}

/* 水滴 / 划痕 */
#drops{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:0;transition:opacity .3s;}

/* ───── 触屏 ───── */
#touch{position:fixed;inset:0;z-index:11;pointer-events:none;display:none;}
#stick{position:absolute;left:22px;bottom:120px;width:132px;height:132px;border-radius:50%;
  border:2px solid rgba(127,230,255,.30);background:rgba(10,28,46,.30);pointer-events:auto;
  backdrop-filter:blur(4px);}
#stickKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#9fe4ff,#2f7fbf);box-shadow:0 0 18px rgba(80,190,255,.75);}
#btnCol{position:absolute;right:22px;bottom:120px;display:flex;flex-direction:column;gap:14px;}
.tbtn{width:86px;height:64px;border-radius:14px;border:2px solid rgba(127,230,255,.32);
  background:rgba(10,28,46,.42);color:#cfeeff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:2px;pointer-events:auto;backdrop-filter:blur(4px);}
.tbtn.on{background:rgba(80,200,255,.34);border-color:#7fe6ff;box-shadow:0 0 22px rgba(90,210,255,.7);}

/* ───── 覆盖层 ───── */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  flex-direction:column;padding:24px;overflow-y:auto;}
#cover{background:radial-gradient(ellipse at 50% 18%,rgba(70,130,180,.20),rgba(2,6,12,.88) 62%,rgba(1,4,8,.96));}
#pause,#result{background:rgba(1,5,10,.85);backdrop-filter:blur(9px);}
.card{width:min(760px,100%);padding:30px 34px;border-radius:18px;
  background:linear-gradient(170deg,rgba(14,30,50,.88),rgba(4,10,20,.92));
  border:1px solid rgba(127,230,255,.26);box-shadow:0 22px 70px rgba(0,0,0,.66);}
h1{font-size:clamp(26px,5vw,44px);letter-spacing:6px;font-weight:900;
  background:linear-gradient(92deg,#ffffff,#8fe6ff 45%,#ffd48a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 46px rgba(110,200,255,.35);text-align:center;line-height:1.25;}
.sub{text-align:center;color:#8fc6e8;font-size:12px;letter-spacing:5px;margin-top:6px;margin-bottom:22px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:12.5px;color:#bcdcf2;
  margin-bottom:20px;}
.grid2 b{color:#ffd48a;font-weight:700;display:inline-block;min-width:74px;}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.btn{cursor:pointer;pointer-events:auto;padding:11px 26px;border-radius:10px;font-size:14px;font-weight:700;
  letter-spacing:2px;border:1.5px solid rgba(127,230,255,.42);color:#d8f2ff;
  background:linear-gradient(180deg,rgba(40,110,170,.55),rgba(14,44,72,.65));
  transition:transform .12s, box-shadow .18s, background .18s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(70,180,255,.36);}
.btn.primary{background:linear-gradient(180deg,#39a9ff,#1168c0);border-color:#8fe6ff;color:#fff;
  box-shadow:0 8px 28px rgba(60,170,255,.48);}
.seg{display:inline-flex;border-radius:9px;overflow:hidden;border:1px solid rgba(127,230,255,.30);}
.seg button{cursor:pointer;padding:8px 18px;font-size:12.5px;font-weight:700;letter-spacing:1px;
  background:rgba(10,28,46,.55);color:#9fc9e4;border:none;transition:background .15s,color .15s;}
.seg button.act{background:linear-gradient(180deg,#39a9ff,#1168c0);color:#fff;}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;font-size:12.5px;color:#9fc9e4;letter-spacing:1px;}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 22px;}
.stat{padding:12px 16px;border-radius:11px;background:rgba(12,32,52,.62);border:1px solid rgba(127,230,255,.16);}
.stat .k{font-size:10px;letter-spacing:2px;color:#7fb4d4;text-t.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论