代码语言：html

所属分类：其他

代码由qwen-3.8-max 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,maximum-scale=1,user-scalable=no">
<title>喷气迫降 · JET LANDING</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{--org:#ff8a2a;--cyn:#57d8ff;--red:#ff4d5e;--grn:#6fe39a;--pan:rgba(9,15,25,.78);--lin:rgba(255,255,255,.12)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0b111c;font-family:'Noto Sans SC',sans-serif;color:#e8eef6;user-select:none}
canvas{position:fixed;inset:0;display:block}
.num{font-family:'Orbitron',monospace}
.hidden{display:none!important}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(5,8,15,.5) 100%)}
/* ---------- HUD ---------- */
.panel{position:fixed;background:var(--pan);border:1px solid var(--lin);backdrop-filter:blur(6px);padding:12px 16px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.p-left{top:16px;left:16px;display:flex;flex-direction:column;gap:10px;min-width:172px}
.stat label{display:block;font-size:10px;letter-spacing:2px;color:#8fa2bb;font-weight:700}
.stat div{display:flex;align-items:baseline;gap:6px}
.stat .big{font-size:30px;font-weight:700;line-height:1.05}
.stat small{font-size:11px;color:#8fa2bb}
#vspd.good{color:var(--grn)} #vspd.mid{color:var(--org)} #vspd.bad{color:var(--red)}
.p-top{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.chip{background:var(--pan);border:1px solid var(--lin);padding:8px 16px;font-size:13px;letter-spacing:1px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.chip b{font-family:'Orbitron';color:var(--org);font-size:16px;margin-left:4px}
.chip.dist b{color:var(--cyn)}
.p-right{top:16px;right:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-end;min-width:196px}
.att-wrap{display:flex;align-items:center;gap:12px}
.att-dial{width:78px;height:78px;border-radius:50%;overflow:hidden;position:relative;border:2px solid var(--lin);box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.att-roll{position:absolute;left:-30%;top:-110%;width:160%;height:320%;background:linear-gradient(#3f7fd4 49.6%,#eef4fa 49.6% 50.4%,#8a6a42 50.4%)}
.att-mark{position:absolute;left:50%;top:50%;width:44px;height:3px;background:var(--org);transform:translate(-50%,-50%);box-shadow:0 0 8px var(--org)}
.att-num{font-size:20px;font-weight:700;color:var(--cyn)}
.fuel-wrap{width:100%}
.fuel-wrap label,.wind-wrap label{font-size:10px;letter-spacing:2px;color:#8fa2bb;font-weight:700}
.fbar{width:100%;height:10px;background:#1a2433;border:1px solid var(--lin);margin:5px 0 3px;transform:skewX(-18deg);overflow:hidden}
.fbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a1f,var(--org));transition:width .15s}
.fbar.low i{background:var(--red);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.fuel-wrap>span{font-size:14px}
.wind-wrap{display:flex;align-items:center;gap:10px}
.wind-wrap b{font-size:22px;color:var(--cyn);display:inline-block;transition:transform .2s}
#warns{position:fixed;top:22%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;z-index:20}
.warn{background:rgba(255,45,70,.16);border:1px solid var(--red);color:#ffd7db;padding:7px 22px;font-weight:700;letter-spacing:2px;animation:blink .6s steps(2) infinite;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.warn.info{background:rgba(87,216,255,.12);border-color:var(--cyn);color:#d9f6ff;animation:none}
#toasts{position:fixed;top:12%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:21}
.toast{background:var(--pan);border:1px solid var(--org);color:#ffd9b3;padding:9px 26px;font-size:15px;font-weight:700;letter-spacing:1px;opacity:0;transform:translateY(-14px);transition:.35s;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.toast.in{opacity:1;transform:none}
/* 喷口矩阵 */
#tmap{bottom:14px;left:50%;transform:translateX(-50%);text-align:center;padding:10px 18px 12px}
.tm-cap,.tm-cap2{font-size:11px;letter-spacing:2px;color:#8fa2bb;font-weight:700}
.tm-cap2{margin-top:8px;color:#c8d4e4}
.tm-cap2 b{color:var(--org)}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 46px;margin-top:8px;position:relative}
.tm-grid::before{content:'';position:absolute;left:50%;top:50%;width:74px;height:26px;transform:translate(-50%,-50%);background:#22304a;border:1px solid var(--lin);border-radius:13px 6px 6px 13px;box-shadow:inset -8px 0 0 rgba(255,138,42,.25)}
.tnode{position:relative;background:#131c2c;border:1px solid var(--lin);color:#c8d4e4;padding:7px 14px;cursor:pointer;font-family:'Noto Sans SC';transition:.12s;clip-path:polygon(8px 0,10.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论