three实现三维无人战斗机空袭地面目标游戏代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由qwen-4 ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：三维无人战斗机空袭地面目标游戏
下面为部分代码预览，完整代码请点击下载或在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>幽灵打击 · GHOST STRIKE UCAV</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,3 29,24 22,22 16,26 10,22 3,24' fill='%23ffb454'/%3E%3C/svg%3E">
<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
} }
</script>
<style>
:root{
  --amber:#ffb454; --hud:#ffc266; --red:#ff4438; --yellow:#ffd60a; --green:#57e389;
  --night:#0a1420; --deep:#060b12; --panel:rgba(9,18,15,.78); --panel2:rgba(12,22,20,.92);
  --line:rgba(255,180,84,.35); --mil:#8ba06b; --mildark:#46543a; --white:#f2ede0;
  --mono:"Consolas","SF Mono","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--deep);color:var(--white);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;touch-action:none;overscroll-behavior:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0a1210}
::-webkit-scrollbar-thumb{background:var(--mildark);border-radius:4px;border:1px solid rgba(255,180,84,.25)}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}
*{scrollbar-width:thin;scrollbar-color:var(--mildark) #0a1210}
#app{position:fixed;inset:0}
#app canvas{display:block}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
svg{display:block}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--mono)}
#hud::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(4,8,6,.42) 100%)}
#hudCanvas{position:absolute;inset:0;width:100%;height:100%}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;background:linear-gradient(180deg,rgba(6,12,10,.85),transparent);font-size:14px}
.tb-left,.tb-right{display:flex;align-items:center;gap:14px}
#tbMission{color:var(--mil);letter-spacing:.15em;font-size:12px}
#tbTimer{color:var(--hud);font-size:20px;font-weight:bold;letter-spacing:.1em}
#tbTimer.low{color:var(--red);animation:blink .6s steps(2) infinite}
#tbScore{color:var(--green);font-size:16px}
#tbScore::before{content:"SCORE ";color:var(--mil);font-size:10px}
.icon-btn{pointer-events:auto;width:36px;height:36px;background:var(--panel);border:1px solid var(--line);
  color:var(--hud);display:flex;align-items:center;justify-content:center;border-radius:4px;transition:.15s}
.icon-btn:hover{background:rgba(255,180,84,.18);box-shadow:0 0 10px rgba(255,180,84,.35)}
.icon-btn svg{width:20px;height:20px;fill:currentColor}
#warnings{position:absolute;top:16%;left:50%;transform:translateX(-50%);text-align:center;z-index:12}
.warn{font-weight:bold;letter-spacing:.25em;margin:4px 0;text-shadow:0 0 12px currentColor}
#warnLock{color:var(--yellow);font-size:26px;animation:blink .4s steps(2) infinite}
#warnMissile{color:var(--red);font-size:30px;animation:blink .3s steps(2) infinite}
#warnStall{color:var(--yellow);font-size:22px;animation:blink .5s steps(2) infinite}
#warnPull{color:var(--red);font-size:26px;animation:blink .35s steps(2) infinite}
#warnHull{color:var(--red);font-size:18px;animation:blink .8s steps(2) infinite}
#warnBounds,#warnCeil,#warnAmmo{color:var(--yellow);font-size:16px}
@keyframes blink{50%{opacity:.15}}
#objectives{position:absolute;top:52px;left:12px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--mil);padding:8px 12px;font-size:12px;max-width:230px;border-radius:0 4px 4px 0}
#objectives h4{color:var(--mil);font-size:10px;letter-spacing:.3em;margin-bottom:5px}
#objList{list-style:none}
#objList li{color:var(--hud);padding:2px 0;display:flex;gap:6px;align-items:center}
#objList li::before{content:"◆";color:var(--green);font-size:9px}
#objList li.done{color:#5a6a58;text-decoration:line-through}
#objList li.done::before{content:"✓";color:var(--green)}
#objProgress{margin-top:5px;color:var(--green);font-size:11px;letter-spacing:.1em}
#objSecondary{color:#c98a4a;font-size:10px;margin-top:3px}
#statusPanel{position:absolute;left:12px;bottom:14px;width:210px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--mil);padding:10px 12px;border-radius:0 4px 4px 0}
.bar-row{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:10px;color:var(--mil)}
.bar-row label{width:34px;letter-spacing:.1em}
.bar{flex:1;height:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,180,84,.25);position:relative}
.bar>i{position:absolute;inset:1px;transform-origin:left;background:var(--green);transition:width .12s,background .3s}
#hullBar.mid>i{background:var(--yellow)} #hullBar.low>i{background:var(--red)}
#thrBar>i{background:var(--amber)}
.bar-val{width:32px;text-align:right;color:var(--hud);font-size:11px}
#aglText{margin-top:5px;font-size:10px;color:var(--mil);letter-spacing:.1em}
#aglText b{color:var(--hud)}
#weaponPanel{position:absolute;right:12px;bottom:14px;display:flex;gap:8px}
.wpn{background:var(--panel);border:1px solid var(--line);padding:7px 12px;text-align:center;min-width:74px;
  border-radius:4px;color:var(--mil);font-size:10px;letter-spacing:.15em;transition:.15s}
.wpn svg{width:22px;height:22px;margin:0 auto 3px;fill:currentColor}
.wpn b{display:block;font-size:19px;color:var(--hud);font-family:var(--mono)}
.wpn.sel{border-color:var(--amber);color:var(--amber);box-shadow:0 0 12px rgba(255,180,84,.35);background:rgba(255,180,84,.1)}
.wpn.empty b{color:var(--red)}
.wpn.cd{opacity:.45}
#lockInfo{position:absolute;right:12px;bottom:86px;font-size:12px;color:var(--yellow);text-align:right;
  text-shadow:0 0 8px rgba(255,214,10,.6);letter-spacing:.1em}
#radar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:158px;height:158px;
  border-radius:50%;border:1px solid var(--line);background:rgba(6,14,10,.7);box-shadow:0 0 18px rgba(87,227,137,.12)}
#markers{position:absolute;inset:0;overflow:hidden}
.marker{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:10px;color:var(--green);
  letter-spacing:.08em;text-shadow:0 0 6px rgba(0,0,0,.9);white-space:nowrap;will-change:left,top}
.marker .mk-d{width:12px;height:12px;margin:0 auto;border:1.5px solid currentColor;transform:rotate(45deg)}
.marker .mk-n{margin-top:3px}
.marker .mk-dist{color:var(--hud);font-size:9px}
.marker .mk-hp{width:44px;height:3px;background:rgba(255,255,255,.15);margin:2px auto 0}
.marker .mk-hp>i{display:block;height:100%;background:var(--green)}
.marker.sam{color:var(--red)} .marker.sam .mk-d{border-radius:50%;transform:none}
.marker.aaa{color:#ff9a3c} .marker.aaa .mk-d{transform:none;width:9px;height:9px;border-radius:50%}
.marker.locking{animation:blink .4s steps(2) infinite}
.marker.plocked{color:var(--yellow)} .marker.plocked .mk-d{box-shadow:0 0 10px var(--yellow)}
.marker.ccip{color:var(--white)} .marker.ccip .mk-d{border-radius:50%;transform:none;border-style:dashed}
#popups{position:absolute;inset:0;overflow:hidden}
.popup{position:absolute;transform:translate(-50%,-50%);color:var(--green);font-weight:bold;font-size:17px;
  text-shadow:0 0 10px rgba(87,227,137,.8);animation:popfloat 1.4s ease-out forwards;letter-spacing:.1em}
.popup small{display:block;font-size:10px;color:var(--hud);text-align:center}
@keyframes popfloat{0%{opacity:0;margin-top:0}12%{opacity:1}100%{opacity:0;margin-top:-70px}}
#toast{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--amber);color:var(--hud);padding:8px 18px;
  font-size:13px;letter-spacing:.12em;border-radius:0 4px 4px 0;opacity:0;transition:opacity .25s;max-width:80vw;text-align:center}
#toast.show{opacity:1}
#hint{position:absolute;left:50%;bottom:230px;transform:translateX(-50%);background:rgba(10,24,18,.9);
  border:1px solid rgba(87,227,137,.5);color:var(--green);padding:9px 20px;font-size:13px;letter-spacing:.1em;
  border-radius:4px;opacity:0;transition:opacity .3s;max-width:86vw;text-align:center;box-shadow:0 0 16px rgba(87,227,137,.2)}
#hint.show{opacity:1}
#hitFlash{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,40,20,.12) 30%,rgba(255,30,10,.55) 100%);opacity:0}
#lowHull{position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(255,40,20,.55);opacity:0}
#lowHull.on{animation:hullpulse 1s ease-in-out infinite}
@keyframes hullpulse{0%,100%{opacity:.15}50%{opacity:.75}}

/* ============ 触屏 ============ */
#touchUI{position:fixed;inset:0;z-index:20;pointer-events:none}
#joy{position:absolute;left:18px;bottom:24px;width:136px;height:136px;border-radius:50%;pointer-events:auto;
  background:radial-gradient(circle,rgba(20,34,26,.55),rgba(10,18,14,.75));border:1.5px solid var(--line);touch-action:none}
#joy::before{content:"";position:absolute;inset:26px;border-radius:50%;border:1px dashed rgba(255,180,84,.25)}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd9a0,var(--amber) 60%,#b06a20);box-shadow:0 0 14px rgba(255,180,84,.5);pointer-events:none}
#touchBtns{position:absolute;right:14px;bottom:20px;display:grid;grid-template-columns:repeat(2,72px);gap:10px;pointer-events:auto}
.tbtn{width:72px;height:56px;border-radius:10px;border:1.5px solid var(--line);background:var(--panel2);
  color:var(--hud);font-size:13px;font-weight:bold;letter-spacing:.1em;touch-action:none;user-select:none}
.tbtn:active,.tbtn.on{background:rgba(255,180,84,.25);box-shadow:0 0 14px rgba(255,180,84,.4)}
#tFire{grid-column:span 2;height:64px;background:rgba(120,30,16,.8);border-color:rgba(255,80,50,.6);color:#ffb0a0;font-size:16px}
#tFire:active{background:rgba(255,70,40,.45)}

/* ============ 全屏界面 ============ */
.screen{position:fixed;inset:0;z-index:50;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(160deg,rgba(6,12,18,.88),rgba(8,16,12,.9) 60%,rgba(6,10,16,.92));
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:24px}
.screen::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px)}
.panel{position:relative;width:min(960px,96vw);margin:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:30px 36px;box-shadow:0 0 60px rgba(0,0,0,.6),inset 0 0 40px rgba(139,160,107,.05)}
.panel::before,.panel::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--amber)}
.panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.cover-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}
.game-title{font-size:clamp(40px,6.5vw,74px);font-weight:900;letter-spacing:.14em;line-height:1.05;
  color:var(--white);text-shadow:0 0 30px rgba(255,180,84,.45),0 2px 0 #3a2a10}
.game-sub{color:var(--amber);letter-spacing:.5em;font-size:clamp(12px,1.6vw,17px);margin:8px 0 4px;font-family:var(--mono)}
.game-tag{color:var(--mil);font-size:12px;letter-spacing:.25em;margin-bottom:18px}
.cover-drone{width:150px;margin:6px 0 14px;filter:drop-shadow(0 0 14px rgba(255,180,84,.5));animation:hover 3.2s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.brief-text{color:#c9cfc0;font-size:13.5px;line-height:1.8;border-left:3px solid var(--mildark);padding-left:14px;margin-bottom:18px}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;font-size:12px;color:#a8b09a}
.ctrl-grid b{color:var(--hud);font-family:var(--mono);display:inline-block;min-width:74px}
.sec-title{color:var(--mil);font-size:11px;letter-spacing:.35em;margin:16px 0 8px;border-bottom:1px solid rgba(139,160,107,.25);padding-bottom:5px}
.mission-cards{display:flex;flex-direction:column;gap:7px}
.mcard{display:flex;align-items:center;gap:12px;background:rgba(20,30,24,.6);border:1px solid rgba(139,160,107,.3);
  padding:9px 14px;border-radius:4px;color:var(--white);text-align:left;transit.........完整代码请登录后点击上方下载按钮下载查看